1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <title>http-proxy-middleware - WebSocket example</title>
|
6 | <style>
|
7 | fieldset {
|
8 | border: 0;
|
9 | }
|
10 | label {
|
11 | display: inline-block;
|
12 | width: 5em;
|
13 | vertical-align: top;
|
14 | }
|
15 | code {
|
16 | background-color: #eee;
|
17 | }
|
18 | </style>
|
19 | </head>
|
20 |
|
21 | <body>
|
22 |
|
23 | <h2>WebSocket demo</h2>
|
24 |
|
25 | <p>
|
26 | Proxy <code>ws://localhost:3000</code> to <code>ws://echo.websocket.org</code>
|
27 | </p>
|
28 |
|
29 | <fieldset id="configuration">
|
30 | <p>
|
31 | <label for="location">location:</label>
|
32 | <input id="location" type="text" value="ws://localhost:3000">
|
33 | <button id="connect">connect</button>
|
34 | <button id="disconnect" disabled="disabled">disconnect</button>
|
35 | </p>
|
36 | </fieldset>
|
37 | <fieldset id="messaging" disabled="disabled">
|
38 | <p>
|
39 | <label for="message">message:</label>
|
40 | <input type="text" id="message" value="Hello WebSocket">
|
41 | <button id="send">send</button>
|
42 | </p>
|
43 | <p>
|
44 | <label for="logger">log:</label>
|
45 | <textarea id="logger" cols="30" rows="10"></textarea>
|
46 | </p>
|
47 | </fieldset>
|
48 |
|
49 | <script>
|
50 | window.onload = function () {
|
51 |
|
52 | var configuration = document.getElementById('configuration');
|
53 | var location = document.getElementById('location');
|
54 | var connect = document.getElementById('connect');
|
55 | var disconnect = document.getElementById('disconnect');
|
56 | var messaging = document.getElementById('messaging');
|
57 | var message = document.getElementById('message');
|
58 | var send = document.getElementById('send');
|
59 | var logger = document.getElementById('logger');
|
60 |
|
61 |
|
62 | var socket;
|
63 |
|
64 | connect.onclick = function () {
|
65 | connect.disabled = true;
|
66 | disconnect.disabled = false;
|
67 | messaging.disabled = false;
|
68 |
|
69 | socket = new WebSocket(location.value);
|
70 | socket.onopen = function () { log('CONNECTED'); };
|
71 | socket.onclose = function () { log('DISCONNECTED'); };
|
72 | socket.onerror = function () { log('SOCKET ERROR OCCURED'); };
|
73 | socket.onmessage = function (msg) { log('RECEIVED:' + msg.data); };
|
74 | }
|
75 |
|
76 | disconnect.onclick = function () {
|
77 | connect.disabled = false;
|
78 | disconnect.disabled = true;
|
79 | messaging.disabled = true;
|
80 | socket.close();
|
81 | }
|
82 |
|
83 | send.onclick = function () {
|
84 | log('SEND: ' + message.value);
|
85 | socket.send(message.value);
|
86 | };
|
87 |
|
88 | function log (message) {
|
89 | logger.value = logger.value + message + '\n'
|
90 | }
|
91 |
|
92 | }
|
93 | </script>
|
94 |
|
95 | </body>
|
96 | </html>
|