index.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>WebSocket Test</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. <style type="text/css">
  8. body {
  9. background-color: #789; margin: 0;
  10. padding: 0; font: 14px Helvetica, Arial, sans-serif;
  11. }
  12. div.content {
  13. width: 800px; margin: 2em auto; padding: 20px 50px;
  14. background-color: #fff; border-radius: 1em;
  15. }
  16. #messages {
  17. border: 2px solid #fec; border-radius: 1em;
  18. height: 10em; overflow: scroll; padding: 0.5em 1em;
  19. }
  20. a:link, a:visited { color: #69c; text-decoration: none; }
  21. @media (max-width: 700px) {
  22. body { background-color: #fff; }
  23. div.content {
  24. width: auto; margin: 0 auto; border-radius: 0;
  25. padding: 1em;
  26. }
  27. }
  28. </style>
  29. <script language="javascript" type="text/javascript">
  30. var rooms = [];
  31. var ws = new WebSocket('ws://' + "192.168.2.49:8001" + '/ws');
  32. if (!window.console) { window.console = { log: function() {} } };
  33. ws.onopen = function(ev) { console.log(ev); };
  34. ws.onerror = function(ev) { console.log(ev); };
  35. ws.onclose = function(ev) { console.log(ev); };
  36. ws.onmessage = function(ev) {
  37. console.log(ev);
  38. var div = document.createElement('div');
  39. div.innerHTML = ev.data;
  40. document.getElementById('messages').appendChild(div);
  41. };
  42. window.onload = function() {
  43. document.getElementById('send_button').onclick = function(ev) {
  44. var msg = document.getElementById('send_input').value;
  45. document.getElementById('send_input').value = '';
  46. ws.send(msg);
  47. };
  48. document.getElementById('send_input').onkeypress = function(ev) {
  49. if (ev.keyCode == 13 || ev.which == 13) {
  50. document.getElementById('send_button').click();
  51. }
  52. };
  53. };
  54. </script>
  55. </head>
  56. <body>
  57. <div class="content">
  58. <h1>Websocket PubSub Demonstration</h1>
  59. <p>
  60. This page demonstrates how Mongoose could be used to implement
  61. <a href="http://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern">
  62. publish–subscribe pattern</a>. Open this page in several browser
  63. windows. Each window initiates persistent
  64. <a href="http://en.wikipedia.org/wiki/WebSocket">WebSocket</a>
  65. connection with the server, making each browser window a websocket client.
  66. Send messages, and see messages sent by other clients.
  67. </p>
  68. <div id="messages">
  69. </div>
  70. <p>
  71. <input type="text" id="send_input" />
  72. <button id="send_button">Send Message</button>
  73. </p>
  74. </div>
  75. </body>
  76. </html>