From 2b979c65c1379fde6974491224d4178177a0ab1c Mon Sep 17 00:00:00 2001 From: chompypotato Date: Fri, 30 Aug 2024 10:42:02 -0400 Subject: [PATCH] Update chat.js --- chat.js | 50 +++++++++++++++++++++++++++++++------------------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/chat.js b/chat.js index e7945f3..a9b08b3 100644 --- a/chat.js +++ b/chat.js @@ -2,57 +2,56 @@ const messagesDiv = document.getElementById('messages'); const messageInput = document.getElementById('message-input'); const nameInput = document.getElementById('name-input'); const sendButton = document.getElementById('send-button'); +const remoteNameInput = document.getElementById('remote-name-input'); // Added input for remote name -let localConnection; -let remoteConnection; -let localChannel; -let remoteChannel; - +// STUN server configuration const servers = { iceServers: [ - { - urls: 'stun:stun.l.google.com:19302' - }, - { - urls: 'stun:stun1.l.google.com:19302' - }, - { - urls: 'stun:stun2.l.google.com:19302' - } + { urls: 'stun:stun.l.google.com:19302' } ] -}; // Use a STUN server for production +}; + const NAME_TAG = 'name'; const MESSAGE_TAG = 'message'; let localUserName = 'You'; let remoteUserName = 'Remote'; // Default remote user name +let localConnection; +let remoteConnection; +let localChannel; +let remoteChannel; + function createConnection() { localConnection = new RTCPeerConnection(servers); remoteConnection = new RTCPeerConnection(servers); // Create data channel on local peer localChannel = localConnection.createDataChannel('chat'); + localChannel.onopen = () => console.log('Local data channel is open'); localChannel.onmessage = e => handleMessage(e.data, 'local'); // Set up data channel on remote peer remoteConnection.ondatachannel = event => { remoteChannel = event.channel; + remoteChannel.onopen = () => console.log('Remote data channel is open'); remoteChannel.onmessage = e => handleMessage(e.data, 'remote'); }; // ICE candidate exchange localConnection.onicecandidate = e => { if (e.candidate) { + console.log('Local ICE candidate:', e.candidate); remoteConnection.addIceCandidate(e.candidate) - .catch(err => console.error('Error adding ICE candidate:', err)); + .catch(err => console.error('Error adding ICE candidate on remote:', err)); } }; remoteConnection.onicecandidate = e => { if (e.candidate) { + console.log('Remote ICE candidate:', e.candidate); localConnection.addIceCandidate(e.candidate) - .catch(err => console.error('Error adding ICE candidate:', err)); + .catch(err => console.error('Error adding ICE candidate on local:', err)); } }; @@ -69,6 +68,7 @@ function createConnection() { function handleMessage(data, source) { try { const parsedData = JSON.parse(data); + console.log(`Message from ${source}:`, parsedData); if (parsedData.type === NAME_TAG) { remoteUserName = parsedData.name; // Update remote user's name } else if (parsedData.type === MESSAGE_TAG) { @@ -91,6 +91,7 @@ sendButton.addEventListener('click', () => { localUserName = nameInput.value || 'You'; // Update local user name if (message) { const messageData = JSON.stringify({ type: MESSAGE_TAG, name: localUserName, message }); + console.log('Sending message:', messageData); localChannel.send(messageData); addMessage(localUserName, message); messageInput.value = ''; @@ -100,9 +101,20 @@ sendButton.addEventListener('click', () => { function sendName() { const name = nameInput.value || 'You'; const nameData = JSON.stringify({ type: NAME_TAG, name }); + console.log('Sending name:', nameData); + localChannel.send(nameData); +} + +// Update remote user's name and notify the other peer +function updateRemoteName() { + const newRemoteName = remoteNameInput.value || 'Remote'; + const nameData = JSON.stringify({ type: NAME_TAG, name: newRemoteName }); + console.log('Sending updated remote name:', nameData); localChannel.send(nameData); } -// Initialize the connection and send the local name createConnection(); -sendName(); +sendName(); // Send initial local name + +// Event listener to update remote name +remoteNameInput.addEventListener('change', updateRemoteName);