UNPKG

2.86 kBHTMLView Raw
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 // elements
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 // ws
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>