interact.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Web Sockets echo test</title>
  5. <meta charset="UTF-8">
  6. <script src="include/mootools.js"></script>
  7. <script src="include/mootools-more.js"></script>
  8. <script>
  9. var cnt = 0;
  10. var s = null; var timer = null;
  11. function debug(str) {
  12. cell = $('debug');
  13. cell.innerHTML += str + "<br/>";
  14. }
  15. function send_data() {
  16. var entry = $('entry');
  17. debug(">> send: " + entry.value);
  18. s.send(entry.value + "\n");
  19. entry.value = ""; // Clear it
  20. return true;
  21. }
  22. window.onload = function() {
  23. debug(">> window.onload");
  24. var uri = new URI(window.location);
  25. var host = uri.getData("host");
  26. var port = uri.getData("port");
  27. if ((!host) || (!port)) {
  28. debug("must set host and port");
  29. return;
  30. }
  31. var location = "ws://" + host + ":" + port
  32. debug("connecting to " + location);
  33. s = new WebSocket(location);
  34. s.onmessage = function(e) {
  35. debug(">> onmessage");
  36. var out = $("out");
  37. out.innerHTML = out.innerHTML + e.data;
  38. };
  39. s.onopen = function(e) {
  40. debug(">> onopen");
  41. };
  42. s.onclose = function(e) {
  43. debug(">> onclose");
  44. if (timer) {
  45. timer = $clear(timer);
  46. }
  47. debug("<< onclose");
  48. }
  49. debug("<< window.onload");
  50. };
  51. </script>
  52. </head>
  53. <body>
  54. <h1>Web Sockets Interactive</h1>
  55. <fieldset>
  56. <h3>Server output:</h3>
  57. <pre>
  58. <div id="out"></div>
  59. </pre>
  60. </fieldset>
  61. <p>Enter something in the entry below to send to the server.</p>
  62. <fieldset>
  63. <p>Enter: <input id="entry" onkeypress="{if (event.keyCode==13) send_data()}" size="42"></p>
  64. <!-- <p>Enter: <input id="entry" onchange="send_data()" onkeypress="{if (event.keyCode==13) send_data()}" size="42"></p> -->
  65. </fieldset>
  66. <br><br>
  67. Debug:
  68. <div id="debug" style="width:600px;height:300px"></div>
  69. </body>