From be98b998e782b388ba1ebea0f6017f019ff0a28e Mon Sep 17 00:00:00 2001 From: Abdulhade Date: Sun, 16 Nov 2025 21:39:23 +0300 Subject: [PATCH 1/4] Creating channel and listeing to ice --- front_files/index.js | 48 ++++++++++++++++++++++++++++---------------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/front_files/index.js b/front_files/index.js index 716065c..c99d109 100644 --- a/front_files/index.js +++ b/front_files/index.js @@ -121,18 +121,7 @@ console.log("Echo mock frontend loaded"); ); } - function mockConnectP2P() { - if (wsConnected) { - return; - } - wsConnected = true; - setChatInputEnabled(true); - appendMessage( - "system", - "Pretend the RTCDataChannel is open now. Replace this with real WebRTC events." - ); - } function sendChatMessage(text) { if (!wsConnected) { @@ -204,12 +193,6 @@ console.log("Echo mock frontend loaded"); currentParty = "B"; showChat(); - appendMessage( - "system", - "TODO: connect to /api/signal/session/" + - currentSessionId + - "/party/B via WebSocket." - ); connectWebSocket() } @@ -224,9 +207,40 @@ console.log("Echo mock frontend loaded"); ws = new WebSocket(wsURL) ws.onopen = () => appendMessage("system", "Connected to WS") + ws.onmessage = (event) => handleWebSocketEvent(JSON.parse(event.data)) + + + if (currentParty == "A") { + createChannel() + } } + function handleWebSocketEvent(payload) { + // this will handle offers and answers + } + + function createChannel() { + pc = new RTCPeerConnection() + + + pc.onicecandidate = e => { + console.log(" NEW ice candidate!! on pc reprinting SDP ") + console.log(JSON.stringify(pc.localDescription)) + + } + + + const sendChannel = pc.createDataChannel("sendChannel"); + sendChannel.onmessage = e => console.log("messsage received!!!" + e.data) + sendChannel.onopen = e => console.log("open!!!!"); + sendChannel.onclose = e => console.log("closed!!!!!!"); + + + pc.createOffer().then(o => pc.setLocalDescription(o)) + } + + createBtn.addEventListener("click", function () { createSession(); }); From 1f73a8909ae62345bfff4c32986d500b23f48000 Mon Sep 17 00:00:00 2001 From: Abdulhade Date: Mon, 17 Nov 2025 00:42:24 +0300 Subject: [PATCH 2/4] Wrote some Websocket funcs --- front_files/index.js | 36 +++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/front_files/index.js b/front_files/index.js index c99d109..7d4f6bc 100644 --- a/front_files/index.js +++ b/front_files/index.js @@ -37,6 +37,8 @@ console.log("Echo mock frontend loaded"); var ws = null; var pc = null; var rc = null; + var lastSignal = null; // saving the last signal to send it on client connect + var dataChannel = null function setSessionInfo(text) { var partyLabel = @@ -131,8 +133,13 @@ console.log("Echo mock frontend loaded"); ); } + + dataChannel.send(text) + appendMessage("me", text); + + if (!wsConnected) { appendMessage( "them", @@ -215,6 +222,16 @@ console.log("Echo mock frontend loaded"); } } + function sendSignal(payload) { + if (!ws || ws.readyState !== WebSocket.OPEN) { + return + } + try { + ws.send(JSON.stringify(payload)); + } catch (err) { + console.error("Failed to send signal", err) + } + } function handleWebSocketEvent(payload) { // this will handle offers and answers @@ -227,14 +244,27 @@ console.log("Echo mock frontend loaded"); pc.onicecandidate = e => { console.log(" NEW ice candidate!! on pc reprinting SDP ") console.log(JSON.stringify(pc.localDescription)) + sendSignal(JSON.stringify(pc.localDescription)) + lastSignal = JSON.stringify(pc.localDescription) } const sendChannel = pc.createDataChannel("sendChannel"); - sendChannel.onmessage = e => console.log("messsage received!!!" + e.data) - sendChannel.onopen = e => console.log("open!!!!"); - sendChannel.onclose = e => console.log("closed!!!!!!"); + sendChannel.onmessage = e => { + console.log("messsage received!!!" + e.data) + appendMessage("them", e.data) + } + sendChannel.onopen = e => { + console.log("open!!!!") + setChatInputEnabled(true) + }; + sendChannel.onclose = e => { + console.log("closed!!!!!!") + setChatInputEnabled(false) + }; + + dataChannel = sendChannel pc.createOffer().then(o => pc.setLocalDescription(o)) From 965f43a397fd908e982297b8419219b8c9a20856 Mon Sep 17 00:00:00 2001 From: Abdulhade Date: Mon, 17 Nov 2025 01:19:15 +0300 Subject: [PATCH 3/4] Implement send offers and answers --- front_files/index.js | 82 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 70 insertions(+), 12 deletions(-) diff --git a/front_files/index.js b/front_files/index.js index 7d4f6bc..f19bd98 100644 --- a/front_files/index.js +++ b/front_files/index.js @@ -178,7 +178,7 @@ console.log("Echo mock frontend loaded"); "Created session" ); - connectWebSocket() + await connectWebSocket() } catch (err) { console.error(err); @@ -189,7 +189,7 @@ console.log("Echo mock frontend loaded"); } } - function joinSession() { + async function joinSession() { var id = sessionIdInput.value.trim(); if (!id) { sessionIdInput.focus(); @@ -200,10 +200,10 @@ console.log("Echo mock frontend loaded"); currentParty = "B"; showChat(); - connectWebSocket() + await connectWebSocket() } - function connectWebSocket() { + async function connectWebSocket() { // supporting ws for local testing. var schema = window.location.protocol === "https" ? "wss://" : "ws://" @@ -213,16 +213,32 @@ console.log("Echo mock frontend loaded"); ws = new WebSocket(wsURL) - ws.onopen = () => appendMessage("system", "Connected to WS") - ws.onmessage = (event) => handleWebSocketEvent(JSON.parse(event.data)) + ws.onopen = () => { + appendMessage("system", "Connected to WS") - if (currentParty == "A") { - createChannel() + if (currentParty == "A") { + createChannel() + } else { + sendSignal({ "type": "hello" }) + } } + ws.onmessage = async (event) => { + var event_data = event.data + console.log("Received from WS", event_data, typeof (event_data)) + var payload = JSON.parse(event_data) + await handleWebSocketEvent(payload) + } + + + } function sendSignal(payload) { + if (!payload) { + console.warn("Attempted to send empty signaling payload") + return + } if (!ws || ws.readyState !== WebSocket.OPEN) { return } @@ -233,8 +249,48 @@ console.log("Echo mock frontend loaded"); } } - function handleWebSocketEvent(payload) { - // this will handle offers and answers + async function handleWebSocketEvent(payload) { + console.log("Handling WS Event, payload.type", payload.type, payload, typeof (payload)) + + if (payload.type == "offer") { + await handleOffer(payload) + } else if (payload.type == "hello" && lastSignal) { + sendSignal(lastSignal) + } + } + + async function handleOffer(offer) { + console.log("New offer", offer) + + if (!rc) { + rc = new RTCPeerConnection() + } + + rc.onicecandidate = e => { + console.log(" NEW ice candidate!! reprinting SDP ") + console.log(JSON.stringify(rc.localDescription)) + } + + + rc.ondatachannel = e => { + + const receiveChannel = e.channel; + receiveChannel.onmessage = e => console.log("message received!!!" + e.data) + receiveChannel.onopen = e => console.log("open!!!!"); + receiveChannel.onclose = e => console.log("closed!!!!!!"); + rc.channel = receiveChannel; + + } + + + await rc.setRemoteDescription(offer) + console.log("Remote description applied") + + var answer = await rc.createAnswer() + await rc.setLocalDescription(answer) + console.log("Answer", JSON.stringify(rc.localDescription)) + sendSignal(rc.localDescription) + lastSignal = rc.localDescription } function createChannel() { @@ -244,8 +300,10 @@ console.log("Echo mock frontend loaded"); pc.onicecandidate = e => { console.log(" NEW ice candidate!! on pc reprinting SDP ") console.log(JSON.stringify(pc.localDescription)) - sendSignal(JSON.stringify(pc.localDescription)) - lastSignal = JSON.stringify(pc.localDescription) + if (pc.localDescription) { + sendSignal(pc.localDescription) + lastSignal = pc.localDescription + } } From fa05b054b3922dcd87e637c3c87da26adf3952aa Mon Sep 17 00:00:00 2001 From: Abdulhade Date: Mon, 17 Nov 2025 01:28:24 +0300 Subject: [PATCH 4/4] Wired answers and now it is working! --- front_files/index.js | 52 ++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 29 deletions(-) diff --git a/front_files/index.js b/front_files/index.js index f19bd98..9539842 100644 --- a/front_files/index.js +++ b/front_files/index.js @@ -105,47 +105,24 @@ console.log("Echo mock frontend loaded"); setSessionInfo( "Session ID: " + currentSessionId + " (share this with your peer)" ); - appendMessage( - "system", - "Session created. TODO: open a WebSocket for signaling and send an SDP offer." - ); + } else { setSessionInfo("Joined session: " + currentSessionId); - appendMessage( - "system", - "Joined session. TODO: connect to the signaling WebSocket and respond with an SDP answer." - ); + } - appendMessage( - "system", - "Mock mode: no real signaling or WebRTC yet. Everything stays local." - ); + } function sendChatMessage(text) { - if (!wsConnected) { - appendMessage( - "system", - "Mock mode: sending locally. Wire this up to RTCDataChannel.send()." - ); - } dataChannel.send(text) appendMessage("me", text); - - - if (!wsConnected) { - appendMessage( - "them", - "(Simulated peer) Replace with your RTCDataChannel onmessage handler." - ); - } } async function createSession() { @@ -256,6 +233,8 @@ console.log("Echo mock frontend loaded"); await handleOffer(payload) } else if (payload.type == "hello" && lastSignal) { sendSignal(lastSignal) + } else if (payload.type == "answer") { + handleAnswer(payload) } } @@ -275,14 +254,25 @@ console.log("Echo mock frontend loaded"); rc.ondatachannel = e => { const receiveChannel = e.channel; - receiveChannel.onmessage = e => console.log("message received!!!" + e.data) - receiveChannel.onopen = e => console.log("open!!!!"); - receiveChannel.onclose = e => console.log("closed!!!!!!"); + receiveChannel.onmessage = e => { + console.log("messsage received!!!" + e.data) + appendMessage("them", e.data) + } + receiveChannel.onopen = e => { + console.log("open!!!!") + setChatInputEnabled(true) + }; + receiveChannel.onclose = e => { + console.log("closed!!!!!!") + setChatInputEnabled(false) + }; rc.channel = receiveChannel; + dataChannel = receiveChannel } + await rc.setRemoteDescription(offer) console.log("Remote description applied") @@ -293,6 +283,10 @@ console.log("Echo mock frontend loaded"); lastSignal = rc.localDescription } + function handleAnswer(answer) { + pc.setRemoteDescription(answer).then(a => console.log("Accepted Answer.")) + } + function createChannel() { pc = new RTCPeerConnection()