Update static/chat.js

static/chat.js

@@ -1,30 +1,61 @@
 (() => {
   const params = new URLSearchParams(window.location.search);
   const room = params.get("room");
-  const socket = io();
 
-  socket.on("connect", () => {
-    socket.emit("subscribe", { room });
-  });
+const socket = io();
+const chatBox = document.getElementById("chat");
+const msgInput = document.getElementById("msg");
+const sendBtn = document.getElementById("send");
+const leaveBtn = document.getElementById("leave");
+const chatroomTitle = document.getElementById("chatroom-title");
 
-  const chatDiv = document.getElementById("chat");
-  const input   = document.getElementById("msg");
-  const sendBtn = document.getElementById("send");
-  const leaveBtn= document.getElementById("leave");
+let mySid = null;
+let partnerSid = null;
+let currentRoom = null;
 
-  sendBtn.onclick = () => {
-    const text = input.value.trim();
-    if (!text) return;
-    socket.emit("chat", { room, msg: text });
-    input.value = "";
-  };
+// On connect, store my SID
+socket.on("connect", () => {
+  mySid = socket.id;
+});
 
-  socket.on("chat", data => {
-    const b = document.createElement("div");
-    b.textContent = data.msg;
-    chatDiv.append(b);
-    chatDiv.scrollTop = chatDiv.scrollHeight;
-  });
+socket.on("matched", data => {
+  currentRoom = data.room;
+  const sid1 = data.sid1;
+  const sid2 = data.sid2;
+  partnerSid = (mySid === sid1) ? sid2 : sid1;
+
+  chatroomTitle.textContent = `Chatroom of ${sid1} and ${sid2}`;
+  appendSystemMsg("Matched! Start chatting.");
+});
+
+socket.on("chat", data => {
+  const cls = data.sid === mySid ? "me" : "other";
+  appendChat(data.sid + ": " + data.msg, cls);
+});
+
+sendBtn.onclick = () => {
+  const txt = msgInput.value.trim();
+  if (!txt || !currentRoom) return;
+  socket.emit("chat", { room: currentRoom, msg: txt, sid: mySid });
+  msgInput.value = "";
+};
+
+
+
+function appendChat(msg, cls) {
+  const div = document.createElement("div");
+  div.textContent = msg;
+  div.classList.add(cls);
+  chatBox.append(div);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+function appendSystemMsg(msg) {
+  appendChat(msg, "status");
+}
+
+
+  
 
   socket.on("status", data => {
     const s = document.createElement("div");