From 78c16c95f5e3f8ff2577367e55593ed76b80c272 Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Sun, 16 Nov 2025 16:53:03 +0100
Subject: [PATCH] fix: Handle data channel onopen event for bidirectional
 messaging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The offerer creates the data channel immediately, but it's not in the
'open' state until the connection is established. The answerer receives
the channel later when it's typically already open.

Now we:
- Listen for channel.onopen and update the connection state when open
- Check if channel is already open and update immediately if so
- Add logging for channel state changes
- Handle channel errors and close events

This fixes the issue where only the answerer could send messages.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.jsx | 40 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 8072b6c..4bda51c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -132,6 +132,8 @@ export default function App() {
       });
 
       peer.on('datachannel', (channel) => {
+        console.log(`📡 Data channel received, state: ${channel.readyState}`);
+
         // Handle data channel
         channel.onmessage = (event) => {
           setMessages(prev => [...prev, {
@@ -142,7 +144,23 @@ export default function App() {
           }]);
         };
 
-        updateConnectionChannel(peer.offerId, channel);
+        channel.onopen = () => {
+          console.log(`✅ Data channel opened for offer ${peer.offerId}`);
+          updateConnectionChannel(peer.offerId, channel);
+        };
+
+        channel.onerror = (error) => {
+          console.error('❌ Data channel error:', error);
+        };
+
+        channel.onclose = () => {
+          console.log('🔒 Data channel closed');
+        };
+
+        // If already open, update immediately
+        if (channel.readyState === 'open') {
+          updateConnectionChannel(peer.offerId, channel);
+        }
       });
 
       // Create offer
@@ -233,6 +251,8 @@ export default function App() {
       });
 
       peer.on('datachannel', (channel) => {
+        console.log(`📡 Data channel received, state: ${channel.readyState}`);
+
         // Handle data channel
         channel.onmessage = (event) => {
           setMessages(prev => [...prev, {
@@ -243,7 +263,23 @@ export default function App() {
           }]);
         };
 
-        updateConnectionChannel(offer.id, channel);
+        channel.onopen = () => {
+          console.log(`✅ Data channel opened for offer ${offer.id}`);
+          updateConnectionChannel(offer.id, channel);
+        };
+
+        channel.onerror = (error) => {
+          console.error('❌ Data channel error:', error);
+        };
+
+        channel.onclose = () => {
+          console.log('🔒 Data channel closed');
+        };
+
+        // If already open, update immediately
+        if (channel.readyState === 'open') {
+          updateConnectionChannel(offer.id, channel);
+        }
       });
 
       // Answer the offer