socket.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <html>
  2. <head>
  3. <title>SimpleWebSocketServer</title>
  4. <style type="text/css">@import url('styles.css');</style>
  5. <script src="jquery-1.4.2.min.js"></script>
  6. <script type="text/javascript">
  7. $(document).ready(main);
  8. // Run when document.ready fires
  9. function main() {
  10. // Reference to the websocket object
  11. var ws;
  12. // Make sure sockets are supported
  13. testSocket();
  14. // Event handlers for buttons
  15. $('#btnStart').click(function() {
  16. startSocket();
  17. });
  18. $('#btnStop').click(function() {
  19. stopSocket();
  20. });
  21. $('#btnClear').click(function() {
  22. $('#results').html('');
  23. });
  24. }
  25. // Make sure the browser supports sockets
  26. function testSocket()
  27. {
  28. if ("WebSocket" in window)
  29. {
  30. $('#status').hide();
  31. $('#btnStart').removeAttr("disabled");
  32. //$('#status').css({'background-color': 'green'}).html('Websockets are supported');
  33. }
  34. else
  35. {
  36. $('#status').show();
  37. $('#status').css({'background-color': 'red'}).html('Websockets NOT supported');
  38. $('#btnStart').attr("disabled","disabled");
  39. }
  40. }
  41. // Close the websocket
  42. function stopSocket()
  43. {
  44. ws.close();
  45. }
  46. // Create the websocket
  47. function startSocket()
  48. {
  49. if ("WebSocket" in window)
  50. {
  51. ws = new WebSocket("%%WEBSOCKET_URL%%");
  52. // Called when the websocket is opened
  53. ws.onopen = function()
  54. {
  55. // Web Socket is connected
  56. $('#status').css({'background-color': 'green'}).html('Websocket opened');
  57. // Clear the results window
  58. $('#results').html('');
  59. // Disable Start Button
  60. $('#btnStart').attr("disabled","disabled");
  61. // Enable Stop Button
  62. $('#btnStop').removeAttr("disabled");
  63. // You can send data now
  64. //ws.send("Hey man, you got the time?");
  65. };
  66. // Called when the websocket receives data
  67. ws.onmessage = function(evt)
  68. {
  69. $('#results').append(evt.data + '<br/>');
  70. };
  71. // Called when the websocket is closed
  72. ws.onclose = function() {
  73. $('#status').css({'background-color': 'orange'}).html('Websocket closed');
  74. $('#btnStart').removeAttr("disabled");
  75. $('#btnStop').attr("disabled", "disabled");
  76. };
  77. }
  78. else
  79. {
  80. alert("Browser doesn't support WebSockets!");
  81. }
  82. }
  83. </script>
  84. <style type="text/css">
  85. body {
  86. margin: 0px;
  87. }
  88. #status {
  89. height: 20px;
  90. width: 100%;
  91. color: #fff;
  92. background-color: orange;
  93. font-weight: bold;
  94. padding: 5px;
  95. text-align: center;
  96. }
  97. #container {
  98. padding: 20px;
  99. }
  100. </style>
  101. </head>
  102. <body bgcolor="#FFFFFF">
  103. <div id="status">Testing Websocket</div>
  104. <h1>Live Logging</h1>
  105. <div id="container">
  106. <input type="button" id="btnStart" value="Start Listening" disabled="disabled">
  107. <input type="button" id="btnStop" value="Stop Listening" disabled="disabled">
  108. <input type="button" id="btnClear" value="Clear Results">
  109. <p><strong>Received Messages:</strong></p>
  110. <div id="results"></div>
  111. </div>
  112. </body>
  113. </html>