<!DOCTYPE html> <html lang="en"> <body> <h1>Websocket test client</h1> <input id="url" type="text" placeholder="Type URL" value="ws://localhost:8000/websocket" style="width:20em;" /> <button id="connect">connect</button> <div style="height: 0.3em;"> </div> <input id="message" type="text" placeholder="Type message" style="width: 20em;" /> <button id="send">send message</button> <div style="margin-top: 1em;">Event log:</div> <div id="log" style="background: #eee; height: 10em; padding: 0.5em;"><div> </body> <script> var ws, E = function(id) { return document.getElementById(id); }; var url = E('url'), connect = E('connect'), message = E('message'), send = E('send'), log = E('log'); var enable = function(en) { message.disabled = send.disabled = !en; url.disabled = en; connect.innerHTML = en ? 'disconnect' : 'connect'; }; enable(false) connect.onclick = function() { if (ws) { ws.close(); return; } ws = new WebSocket(url.value); if (!ws) return; ws.onopen = function() { log.innerHTML += 'CONNECTION OPENED<br/>'; } ws.onmessage = function(ev) { log.innerHTML += 'RECEIVED: ' + ev.data + '<br/>'; } ws.onerror = function(ev) { log.innerHTML += 'ERROR: ' + ev + '<br/>'; } ws.onclose = function() { log.innerHTML += 'CONNECTION CLOSED<br/>'; enable(false); ws = null; } enable(true); }; send.onclick = function() { if (!ws) return; log.innerHTML += 'SENT: ' + message.value + '<br/>'; ws.send(message.value); } </script> </html>