websocket/test/_env/app/chat_socketio/index.html at main · cap-js-community/websocket · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Socket.IO chat</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
  <label for="input"></label><input id="input" autocomplete="off" />
  <button>Send</button>
</form>
</body>
<script src="https://cdn.socket.io/4.7.2/socket.io.js"></script>
<script>
  const socket = io("/ws/chat");
  const form = document.getElementById("form");
  const input = document.getElementById("input");
  const messages = document.getElementById("messages");
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    if (input.value) {
      socket.emit("message", { text: input.value });
      input.value = "";
    }
  });
  socket.on("received", (message) => {
    const item = document.createElement("li");
    item.textContent = `${message.user}: ${message.text}`
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  });
</script>
</html>