WebNotifier.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <html>
  2. <head>
  3. <title>WebSocketServer</title>
  4. <script type="text/javascript">
  5. var ws;
  6. function log(msg, color)
  7. {
  8. var div = document.getElementById("output");
  9. div.innerHTML = div.innerHTML + "<pre style='color:" + color + "'>" + msg + "</pre>";
  10. }
  11. function WebSocketOpen()
  12. {
  13. if ("WebSocket" in window)
  14. {
  15. ws = new WebSocket("ws://localhost:9980/ws");
  16. ws.onopen = function()
  17. {
  18. ws.send("Hello, world!");
  19. log("WebSocket opened.", "green");
  20. };
  21. ws.onmessage = function(evt)
  22. {
  23. var arr = evt.data.split(",");
  24. if (arr.length >= 4)
  25. {
  26. log("Data: " + evt.data, "green");
  27. updateTable(arr[0], arr[1], arr[2], arr[3]);
  28. }
  29. else
  30. log("Unknown message received: " + evt.data, "red");
  31. };
  32. ws.onclose = function()
  33. {
  34. log("WebSocket closed.", "red");
  35. }
  36. }
  37. else
  38. {
  39. log("This browser does not support WebSockets.", "red");
  40. }
  41. }
  42. function WebSocketSend(msg)
  43. {
  44. ws.send("hello");
  45. }
  46. function WebSocketClose()
  47. {
  48. ws.close();
  49. }
  50. function updateTable(id, name, address, age)
  51. {
  52. var table = document.getElementById("dataTable");
  53. if (table.rows.length > 1)
  54. {
  55. for (r = 1; r < table.rows.length; r++)
  56. {
  57. if (table.rows[r].cells[0].innerHTML == id)
  58. {
  59. table.rows[r].cells[1].innerHTML = name;
  60. table.rows[r].cells[2].innerHTML = address;
  61. table.rows[r].cells[3].innerHTML = age;
  62. return;
  63. }
  64. }
  65. }
  66. var row = table.insertRow(table.rows.length);
  67. var cell1 = row.insertCell(0);
  68. cell1.innerHTML = id;
  69. var cell2 = row.insertCell(1);
  70. cell2.innerHTML = name;
  71. var cell3 = row.insertCell(2);
  72. cell3.innerHTML = address;
  73. var cell4 = row.insertCell(3);
  74. cell4.innerHTML = age;
  75. }
  76. </script>
  77. </head>
  78. <body onload="WebSocketOpen()">
  79. <h1>Web Notifier Example</h1>
  80. <!--
  81. <p><a href="javascript:WebSocketOpen()">Open WebSocket</a></p>
  82. <p><a href="javascript:WebSocketClose()">Close WebSocket</a></p>
  83. <p><a href="javascript:WebSocketSend('hello')">Send Echo</a></p>
  84. -->
  85. <table id="dataTable" width="350px" border="1">
  86. <tr> <th>ID</th> <th>Name</th> <th>Address</th> <th>Age</th></tr>
  87. </table>
  88. <div id="output"></div>
  89. </body>
  90. </html>