WebRTC 数据通道始终处于连接状态

Question

我正在尝试使用 WEBRTC 通过对等连接发送 JSON/文本数据。但我的

datachannel

始终停留在

connecting

状态，我认为这是一个问题，因为我的短信未发送到连接的对等方。

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) //this always logs connecting
            if (dataChannel && dataChannel.readyState === 'open') {
                dataChannel.send(data);
            }
        }

        function init() {
            ws = new WebSocket('ws://localhost:3000');
            ws.onmessage = event => receiveMessage(event.data);

            rtcPeerConnection = new RTCPeerConnection();
            rtcPeerConnection.ondatachannel = event => {
                dataChannel = event.channel;
                dataChannel.onmessage = event => receiveMessage(event.data);
            };

            const dataChannelOptions = { ordered: true };
            dataChannel = rtcPeerConnection.createDataChannel('textChat', dataChannelOptions);

            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));

            ws.onmessage = async event => {
                const message = JSON.parse(event.data.toString());
                if (message.type === 'answer') {
                    await rtcPeerConnection.setRemoteDescription(message.data);
                } else if (message.type === 'offer') {
                    await rtcPeerConnection.setRemoteDescription(message.data);
                    const answer = await rtcPeerConnection.createAnswer();
                    await rtcPeerConnection.setLocalDescription(answer);
                    ws.send(JSON.stringify({
                        type: 'answer',
                        data: rtcPeerConnection.localDescription
                    }));
                }
            };
        }

        init();

对于信令服务器，我使用 Node Js Websockets，下面是服务器的基本代码。

const http = require('http');
const fs = require('fs');
const WebSocket = require('ws');

const server = http.createServer((req, res) => {
    fs.readFile('index.html', 'utf8', (err, data) => {
        if (err) {
            res.writeHead(500);
            return res.end('Error loading index.html');
        }
        res.writeHead(200);
        res.end(data);
    });
});

const wss = new WebSocket.Server({ server });

wss.on('connection', ws => {
    ws.on('message', message => {
        wss.clients.forEach(client => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message.toString());
            }
        });
    });
});

server.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

我不确定我的代码中的问题出在哪里。请帮助我。

Answer 1

您不会交换 ICE 候选项，即对等方可以连接的 IP 地址。请参阅 webrtc 示例 并查找 onicecandidate 处理程序和 addIceCandidate 调用。