plain_echo.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <html>
  2. <head>
  3. <title>WebSockets Echo Test</title>
  4. </head>
  5. <body>
  6. Host: <input id='host' style='width:100'>&nbsp;
  7. Port: <input id='port' style='width:50'>&nbsp;
  8. Encrypt: <input id='encrypt' type='checkbox'>&nbsp;
  9. <input id='connectButton' type='button' value='Start' style='width:100px'
  10. onclick="connect();">&nbsp;
  11. <br>
  12. Log:<br>
  13. <textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
  14. </body>
  15. <script>
  16. var ws, host = null, port = null,
  17. msg_cnt = 0, send_cnt = 1, echoDelay = 500,
  18. echo_ref;
  19. function message(str) {
  20. console.log(str);
  21. cell = document.getElementById('messages');
  22. cell.innerHTML += msg_cnt + ": " + str + "\n";
  23. cell.scrollTop = cell.scrollHeight;
  24. msg_cnt++;
  25. }
  26. Array.prototype.pushStr = function (str) {
  27. var n = str.length;
  28. for (var i=0; i < n; i++) {
  29. this.push(str.charCodeAt(i));
  30. }
  31. }
  32. function send_msg() {
  33. if (ws.bufferedAmount > 0) {
  34. console.log("Delaying send");
  35. return;
  36. }
  37. var str = "Message #" + send_cnt, arr = [];
  38. var encoder = new TextEncoder();
  39. ws.send(encoder.encode(str));
  40. message("Sent message: '" + str + "'");
  41. send_cnt++;
  42. }
  43. function update_stats() {
  44. document.getElementById('sent').innerHTML = sent;
  45. document.getElementById('received').innerHTML = received;
  46. document.getElementById('errors').innerHTML = errors;
  47. }
  48. function init_ws() {
  49. console.log(">> init_ws");
  50. console.log("<< init_ws");
  51. }
  52. function connect() {
  53. var host = document.getElementById('host').value,
  54. port = document.getElementById('port').value,
  55. scheme = "ws://", uri;
  56. console.log(">> connect");
  57. if ((!host) || (!port)) {
  58. console.log("must set host and port");
  59. return;
  60. }
  61. if (ws) {
  62. ws.close();
  63. }
  64. if (document.getElementById('encrypt').checked) {
  65. scheme = "wss://";
  66. }
  67. uri = scheme + host + ":" + port;
  68. message("connecting to " + uri);
  69. ws = new WebSocket(uri);
  70. ws.binaryType = 'arraybuffer';
  71. ws.addEventListener('message', function(e) {
  72. //console.log(">> WebSockets.onmessage");
  73. var decoder = new TextDecoder('UTF-8');
  74. var str = decoder.decode(e.data);
  75. message("Received message '" + str + "'");
  76. //console.log("<< WebSockets.onmessage");
  77. });
  78. ws.addEventListener('open', function(e) {
  79. console.log(">> WebSockets.onopen");
  80. echo_ref = setInterval(send_msg, echoDelay);
  81. console.log("<< WebSockets.onopen");
  82. });
  83. ws.addEventListener('close', function(e) {
  84. console.log(">> WebSockets.onclose");
  85. if (echo_ref) {
  86. clearInterval(echo_ref);
  87. echo_ref = null;
  88. }
  89. console.log("<< WebSockets.onclose");
  90. });
  91. ws.addEventListener('error', function(e) {
  92. console.log(">> WebSockets.onerror");
  93. if (echo_ref) {
  94. clearInterval(echo_ref);
  95. echo_ref = null;
  96. }
  97. console.log("<< WebSockets.onerror");
  98. });
  99. document.getElementById('connectButton').value = "Stop";
  100. document.getElementById('connectButton').onclick = disconnect;
  101. console.log("<< connect");
  102. }
  103. function disconnect() {
  104. console.log(">> disconnect");
  105. if (ws) {
  106. ws.close();
  107. }
  108. if (echo_ref) {
  109. clearInterval(echo_ref);
  110. }
  111. document.getElementById('connectButton').value = "Start";
  112. document.getElementById('connectButton').onclick = connect;
  113. console.log("<< disconnect");
  114. }
  115. window.onload = function() {
  116. console.log("onload");
  117. var url = document.location.href;
  118. document.getElementById('host').value = (url.match(/host=([^&#]*)/) || ['',window.location.hostname])[1];
  119. document.getElementById('port').value = (url.match(/port=([^&#]*)/) || ['',window.location.port])[1];
  120. }
  121. </script>
  122. </html>