websocket 增加多分组 fork https://github.com/olahol/melody
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

53 lines
1.3 KiB

  1. <html>
  2. <head>
  3. <title>Melody example: chatting</title>
  4. </head>
  5. <style>
  6. #chat {
  7. text-align: left;
  8. background: #f1f1f1;
  9. width: 500px;
  10. min-height: 300px;
  11. padding: 20px;
  12. }
  13. </style>
  14. <body>
  15. <center>
  16. <h3 id="name"></h3>
  17. <pre id="chat"></pre>
  18. <input placeholder="say something" id="text" type="text">
  19. </center>
  20. <script>
  21. var url = "ws://" + window.location.host + window.location.pathname + "/ws";
  22. var ws = new WebSocket(url);
  23. var name = "Guest" + Math.floor(Math.random() * 1000);
  24. var channelName = window.location.pathname.split("/")[2];
  25. document.getElementById("name").innerText = "Channel: " + channelName;
  26. var chat = document.getElementById("chat");
  27. var text = document.getElementById("text");
  28. var now = function () {
  29. var iso = new Date().toISOString();
  30. return iso.split("T")[1].split(".")[0];
  31. };
  32. ws.onmessage = function (msg) {
  33. var line = now() + " " + msg.data + "\n";
  34. chat.innerText += line;
  35. };
  36. text.onkeydown = function (e) {
  37. if (e.keyCode === 13 && text.value !== "") {
  38. ws.send("<" + name + "> " + text.value);
  39. text.value = "";
  40. }
  41. };
  42. </script>
  43. </body>
  44. </html>