Update public/chat.js

public/chat.js

@@ -1,23 +1,88 @@
 const socket = io();
 
-const urlParams = new URLSearchParams(window.location.search);
-const roomId = urlParams.get("room");
-const name = urlParams.get("name");
+const params = new URLSearchParams(location.search);
+const roomId = params.get("room");
+const name = params.get("name");
 
 document.getElementById("roomTitle").innerText = "Room: " + roomId;
 
+let peers = {};
+let channels = {};
+
 socket.emit("join-room", { roomId, name });
 
-socket.on("message", (data) => {
-  const chat = document.getElementById("chat");
-  chat.innerHTML += `<p><b>${data.name}:</b> ${data.text}</p>`;
-  chat.scrollTop = chat.scrollHeight;
+socket.on("user-joined", ({ id }) => {
+  createPeer(id, true);
 });
 
+socket.on("signal", async ({ from, data }) => {
+  if (!peers[from]) createPeer(from, false);
+
+  if (data.sdp) {
+    await peers[from].setRemoteDescription(data.sdp);
+    if (data.sdp.type === "offer") {
+      const answer = await peers[from].createAnswer();
+      await peers[from].setLocalDescription(answer);
+      socket.emit("signal", { to: from, data: { sdp: peers[from].localDescription } });
+    }
+  }
+
+  if (data.candidate) {
+    await peers[from].addIceCandidate(data.candidate);
+  }
+});
+
+function createPeer(id, initiator) {
+  const peer = new RTCPeerConnection({
+    iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
+  });
+
+  if (initiator) {
+    const channel = peer.createDataChannel("chat");
+    setupChannel(id, channel);
+  } else {
+    peer.ondatachannel = (e) => {
+      setupChannel(id, e.channel);
+    };
+  }
+
+  peer.onicecandidate = (e) => {
+    if (e.candidate) {
+      socket.emit("signal", { to: id, data: { candidate: e.candidate } });
+    }
+  };
+
+  peers[id] = peer;
+
+  if (initiator) {
+    peer.createOffer().then(offer => {
+      peer.setLocalDescription(offer);
+      socket.emit("signal", { to: id, data: { sdp: offer } });
+    });
+  }
+}
+
+function setupChannel(id, channel) {
+  channels[id] = channel;
+
+  channel.onmessage = (e) => {
+    addMessage("Peer", e.data);
+  };
+}
+
 function send() {
   const msgInput = document.getElementById("msg");
   const msg = msgInput.value;
-  if (!msg) return;
-  socket.emit("send-message", msg);
+  addMessage("Me", msg);
+
+  for (let id in channels) {
+    channels[id].send(msg);
+  }
   msgInput.value = "";
 }
+
+function addMessage(sender, text) {
+  const chat = document.getElementById("chat");
+  chat.innerHTML += `<p><b>${sender}:</b> ${text}</p>`;
+  chat.scrollTop = chat.scrollHeight;
+}