simple.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <html>
  2. <head>
  3. <title>Websock Simple Client</title>
  4. </head>
  5. <body>
  6. WebSocket/websockify URI: <input id='target'>&nbsp;
  7. <input id='connectButton' type='button' value='Connect'
  8. onclick="connect();">
  9. <br> <br>
  10. <input id='sendText'>&nbsp;
  11. <input id='sendButton' type='button' value='Send' disabled
  12. onclick="send();">&nbsp;
  13. <br> <br>
  14. Log:<br><textarea id="messages" cols=80 rows=25></textarea>
  15. </body>
  16. <script>
  17. var document.getElementById = function(id) { return document.getElementById(id); },
  18. ws = null, msgs = document.getElementById('messages');
  19. function msg(str) {
  20. msgs.innerHTML += str + "\n";
  21. msgs.scrollTop = msgs.scrollHeight;
  22. }
  23. function connect() {
  24. var uri = document.getElementById('target').value;
  25. msg("connecting to: " + uri);
  26. ws = new WebSocket(uri);
  27. ws.binaryType = 'arraybuffer';
  28. ws.addEventListener('open', function () {
  29. msg("Connected");
  30. });
  31. ws.addEventListener('message', function (e) {
  32. msg("Received: " + e.data);
  33. });
  34. ws.addEventListener('close', function () {
  35. disconnect();
  36. msg("Disconnected");
  37. });
  38. document.getElementById('connectButton').value = "Disconnect";
  39. document.getElementById('connectButton').onclick = disconnect;
  40. document.getElementById('sendButton').disabled = false;
  41. }
  42. function disconnect() {
  43. if (ws) { ws.close(); }
  44. ws = null;
  45. document.getElementById('connectButton').value = "Connect";
  46. document.getElementById('connectButton').onclick = connect;
  47. document.getElementById('sendButton').disabled = true;
  48. }
  49. function send() {
  50. msg("Sending: " + document.getElementById('sendText').value);
  51. ws.send_string(document.getElementById('sendText').value);
  52. };
  53. </script>
  54. </html>