ws-echo.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>WebSocket Echo</title>
  6. </head>
  7. <body>
  8. <h1>WebSocket Echo</h1>
  9. <p>Message: <input type="text" id="message"> <button onclick="sendMessage()">Send</button></p>
  10. <div id="log"></div>
  11. <script language="javascript" type="text/javascript">
  12. var wsUri = "ws://" + location.hostname + "/ws-echo.lc";
  13. var messageLog;
  14. function init()
  15. {
  16. logDiv = document.getElementById("log");
  17. websocket = new WebSocket(wsUri);
  18. websocket.onopen = function(evt) { appendLog('<span style="color: green;">CONNECTED</span>') };
  19. websocket.onclose = function(evt) { appendLog('<span style="color: green;">DISCONNECTED</span>') };
  20. websocket.onmessage = function(evt) { appendLog('<span style="color: blue;">RESPONSE:</span> ' + evt.data) };
  21. websocket.onerror = function(evt) { appendLog('<span style="color: red;">ERROR:</span> ' + evt.data) };
  22. }
  23. function sendMessage()
  24. {
  25. message = document.getElementById("message").value;
  26. appendLog('<span style="color: green;">SENT:</span> ' + message);
  27. websocket.send(message);
  28. }
  29. function appendLog(log)
  30. {
  31. var pre = document.createElement("p");
  32. pre.innerHTML = log;
  33. logDiv.appendChild(pre);
  34. }
  35. window.addEventListener("load", init, false);
  36. </script>
  37. </body>
  38. </html>