WebRTC Data Channel始终处于connecting状态，无法发送消息求助

你的DataChannel一直处于connecting状态，核心原因是WebRTC对等连接未完成ICE候选交换，同时客户端代码存在几处逻辑错误，导致连接无法建立。以下是具体问题排查和修复方案：

核心问题分析 #

1. 缺少ICE候选交换：WebRTC需要交换ICE候选地址才能建立端到端连接，你的代码完全没有处理icecandidate事件，导致双方无法获取彼此的网络地址。
2. WebSocket消息监听被覆盖：客户端代码中先后两次赋值ws.onmessage，导致第一个监听被覆盖，信令消息和普通消息的处理逻辑混乱。
3. DataChannel状态监听缺失：没有监听dataChannel的onopen、onerror事件，无法追踪状态变化和排查错误。

客户端代码修复 #

修改后的客户端JS代码如下，关键修复点已标注：

let ws;
let rtcPeerConnection;
let dataChannel;

const chatBox = document.getElementById('chatBox');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');

sendButton.onclick = sendMessage;

function sendMessage() {
    const message = messageInput.value;
    if (message.trim() !== '') {
        chatBox.value += `You: ${message}\n`;
        sendData(message);
        messageInput.value = '';
    }
}

function receiveMessage(message) {
    chatBox.value += `Peer: ${message}\n`;
}

function sendData(data) {
    console.log(dataChannel.readyState)
    if (dataChannel && dataChannel.readyState === 'open') {
        dataChannel.send(data);
    } else {
        console.warn('DataChannel未处于open状态，无法发送消息');
    }
}

function init() {
    ws = new WebSocket('ws://localhost:3000');

    // 合并WebSocket消息处理，区分信令消息和普通文本消息
    ws.onmessage = async event => {
        try {
            // 尝试解析为信令消息
            const message = JSON.parse(event.data.toString());
            switch(message.type) {
                case 'answer':
                    await rtcPeerConnection.setRemoteDescription(message.data);
                    break;
                case 'offer':
                    await rtcPeerConnection.setRemoteDescription(message.data);
                    const answer = await rtcPeerConnection.createAnswer();
                    await rtcPeerConnection.setLocalDescription(answer);
                    ws.send(JSON.stringify({
                        type: 'answer',
                        data: rtcPeerConnection.localDescription
                    }));
                    break;
                case 'ice-candidate':
                    // 处理ICE候选
                    if (message.data) {
                        await rtcPeerConnection.addIceCandidate(message.data);
                    }
                    break;
            }
        } catch (e) {
            // 解析失败则视为普通聊天消息
            receiveMessage(event.data);
        }
    };

    rtcPeerConnection = new RTCPeerConnection();

    // 监听ICE候选事件，发送给对等端
    rtcPeerConnection.onicecandidate = event => {
        if (event.candidate) {
            ws.send(JSON.stringify({
                type: 'ice-candidate',
                data: event.candidate
            }));
        }
    };

    // 监听远端创建的DataChannel
    rtcPeerConnection.ondatachannel = event => {
        dataChannel = event.channel;
        dataChannel.onmessage = event => receiveMessage(event.data);
        // 添加DataChannel状态监听
        dataChannel.onopen = () => console.log('DataChannel已打开');
        dataChannel.onerror = error => console.error('DataChannel错误:', error);
    };

    const dataChannelOptions = { ordered: true };
    dataChannel = rtcPeerConnection.createDataChannel('textChat', dataChannelOptions);
    // 监听本地DataChannel状态
    dataChannel.onopen = () => console.log('本地DataChannel已打开');
    dataChannel.onerror = error => console.error('本地DataChannel错误:', error);

    rtcPeerConnection.createOffer()
        .then(offer => rtcPeerConnection.setLocalDescription(offer))
        .then(() => {
            ws.send(JSON.stringify({
                type: 'offer',
                data: rtcPeerConnection.localDescription
            }));
        })
        .catch(error => console.error('Error creating offer:', error));
}

init();

客户端关键修复点 #

• 合并WebSocket消息处理：通过try/catch区分信令JSON消息和普通聊天消息，避免监听覆盖。
• 添加ICE候选处理：监听rtcPeerConnection.onicecandidate事件，将候选发送给信令服务器；同时处理收到的ICE候选，添加到对等连接。
• 添加DataChannel状态监听：监听onopen、onerror事件，便于调试连接状态。

服务器代码说明 #

你的Node.js信令服务器代码无需修改，它已经正确转发所有消息（包括新增的ICE候选消息），确保信令能在两个客户端之间传递。

验证步骤 #

1. 启动信令服务器，打开两个浏览器窗口访问http://localhost:3000。
2. 打开浏览器控制台，观察是否输出DataChannel已打开的日志。
3. 尝试发送消息，此时消息应能通过DataChannel正常传递。

内容的提问来源于stack exchange，提问作者asad nextstair