home.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Command Example</title>
  5. <script type="text/javascript">
  6. window.onload = function () {
  7. var conn;
  8. var msg = document.getElementById("msg");
  9. var log = document.getElementById("log");
  10. function appendLog(item) {
  11. var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
  12. log.appendChild(item);
  13. if (doScroll) {
  14. log.scrollTop = log.scrollHeight - log.clientHeight;
  15. }
  16. }
  17. document.getElementById("form").onsubmit = function () {
  18. if (!conn) {
  19. return false;
  20. }
  21. if (!msg.value) {
  22. return false;
  23. }
  24. conn.send(msg.value);
  25. msg.value = "";
  26. return false;
  27. };
  28. if (window["WebSocket"]) {
  29. conn = new WebSocket("ws://" + document.location.host + "/ws");
  30. conn.onclose = function (evt) {
  31. var item = document.createElement("div");
  32. item.innerHTML = "<b>Connection closed.</b>";
  33. appendLog(item);
  34. };
  35. conn.onmessage = function (evt) {
  36. var messages = evt.data.split('\n');
  37. for (var i = 0; i < messages.length; i++) {
  38. var item = document.createElement("div");
  39. item.innerText = messages[i];
  40. appendLog(item);
  41. }
  42. };
  43. } else {
  44. var item = document.createElement("div");
  45. item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
  46. appendLog(item);
  47. }
  48. };
  49. </script>
  50. <style type="text/css">
  51. html {
  52. overflow: hidden;
  53. }
  54. body {
  55. overflow: hidden;
  56. padding: 0;
  57. margin: 0;
  58. width: 100%;
  59. height: 100%;
  60. background: gray;
  61. }
  62. #log {
  63. background: white;
  64. margin: 0;
  65. padding: 0.5em 0.5em 0.5em 0.5em;
  66. position: absolute;
  67. top: 0.5em;
  68. left: 0.5em;
  69. right: 0.5em;
  70. bottom: 3em;
  71. overflow: auto;
  72. }
  73. #log pre {
  74. margin: 0;
  75. }
  76. #form {
  77. padding: 0 0.5em 0 0.5em;
  78. margin: 0;
  79. position: absolute;
  80. bottom: 1em;
  81. left: 0px;
  82. width: 100%;
  83. overflow: hidden;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <div id="log"></div>
  89. <form id="form">
  90. <input type="submit" value="Send" />
  91. <input type="text" id="msg" size="64"/>
  92. </form>
  93. </body>
  94. </html>