<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>چت ساده</title>
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form">
    <input id="input" autocomplete="off" />
    <button>ارسال</button>
  </form>
  <script>
    const socket = io("http://localhost:3000");

    const form = document.getElementById("form");
    const input = document.getElementById("input");
    const messages = document.getElementById("messages");

    form.addEventListener("submit", (e) => {
      e.preventDefault();
      if (input.value) {
        socket.emit("chat message", input.value);
        input.value = "";
      }
    });

    socket.on("chat message", (msg) => {
      const item = document.createElement("li");
      item.textContent = msg;
      messages.appendChild(item);
    });
  </script>
</body>
</html>