Update static/chat.js

static/chat.js

@@ -1,63 +1,48 @@
 (() => {
   const params = new URLSearchParams(window.location.search);
   const room = params.get("room");
-const socket = io();
-let myId = sessionStorage.getItem("myId") || "me";
-let currentRoom = sessionStorage.getItem("roomId") || null;
-let partnerId = null;
+  const socket = io();
 
-const chat = document.getElementById("chat");
-const input = document.getElementById("msg");
-const sendBtn = document.getElementById("send");
-const leaveBtn = document.getElementById("leave");
-const title = document.getElementById("chatroom-title");
-
-// join room
-socket.emit("subscribe", { room: currentRoom });
-socket.emit("chat", { room: currentRoom, msg: `__joined__:${myId}` });
+  socket.on("connect", () => {
+    socket.emit("subscribe", { room });
+  });
 
-sendBtn.onclick = () => {
-  const txt = input.value.trim();
-  if (!txt || !currentRoom) return;
-  socket.emit("chat", { room: currentRoom, msg: txt, sender: myId });
-  input.value = "";
-};
+  const chatDiv = document.getElementById("chat");
+  const input   = document.getElementById("msg");
+  const sendBtn = document.getElementById("send");
+  const leaveBtn= document.getElementById("leave");
+
+  sendBtn.onclick = () => {
+    const text = input.value.trim();
+    if (!text) return;
+    socket.emit("chat", { room, msg: text });
+    input.value = "";
+  };
+
+  socket.on("chat", data => {
+    const b = document.createElement("div");
+    b.textContent = data.msg;
+    chatDiv.append(b);
+    chatDiv.scrollTop = chatDiv.scrollHeight;
+  });
 
-leaveBtn.onclick = () => {
-  if (confirm("Leave?")) {
-    socket.emit("leave", { room: currentRoom });
-    sessionStorage.clear();
-    window.location.href = "/";
-  }
-};
+  socket.on("status", data => {
+    const s = document.createElement("div");
+    s.style.fontStyle = "italic";
+    s.textContent = data.msg;
+    chatDiv.append(s);
+    chatDiv.scrollTop = chatDiv.scrollHeight;
+  });
 
-socket.on("chat", d => {
-  if (d.msg.startsWith("__joined__:")) {
-    const id = d.msg.split(":")[1];
-    if (id !== myId) {
-      partnerId = id;
-      title.textContent = `Chatroom of ${myId} and ${partnerId}`;
+  leaveBtn.onclick = () => {
+    if (confirm("Leave chat?")) {
+      socket.emit("leave", { room });
     }
-    return;
-  }
-
-  const sender = d.sender === myId ? "me" : "other";
-  appendMessage(`${d.sender}: ${d.msg}`, sender);
-});
-
-socket.on("left", () => {
-  appendMessage("Partner left the chat.", "status");
-  setTimeout(() => window.location.href = "/", 1500);
-});
+  };
+  socket.on("left", () => {
+    window.location = "/";
+  });
 
-function appendMessage(text, cls = "") {
-  const line = document.createElement("div");
-  line.textContent = text;
-  line.classList.add("chat-line");
-  if (cls) line.classList.add(cls);
-  chat.append(line);
-  chat.scrollTop = chat.scrollHeight;
-}
   socket.on("matched", data => {
     // If you ever get matched here, you can handle it, but in this flow
     // matching happens before navigation.