javascript - javascript - rTCDataChannel发送方法没有发送数据

我在RTCDataChannel有一个奇怪的问题。

我正在研究WebRTC,我已经有了WebRTC音频/视频聊天功能,现在我想用RTCDataChannel添加文本聊天和文件共享。

我已经像这样创建了RTCDataChannel :


var dataChannelOptions = {


 reliable: true,


 maxRetransmitTime:"2000"


};



dataChannel = yourConnection.createDataChannel("testDataChannel", dataChannelOptions);



dataChannel.onerror = function (error) {


 console.log("dataChannel.OnError:", error);


};



dataChannel.onmessage = function (event) {


 console.log("dataChannel.OnMessage:", event);


};



dataChannel.onopen = function (event) {


 console.log("dataChannel.OnOpen", event);


 dataChannel.send("Hello World!");


};



dataChannel.onclose = function (event) {


 console.log("dataChannel.OnClose", event);


};



只有我在两边的receieve都是从dataChannel.onopen的第一行登录,我没有从dataChannel.onmessage接收日志。

没有错误。

当我手动调用dataChannel.send结果是相同的。

测试:
Google Chrome (50.0.2661.94 )
Firefox (45.0.2 )

谁可以帮助?

时间:

我遇到了同样的问题,按照RTCDataChannel文档,你应该处理对等连接对象的回调,以接收数据通道上的数据,下面的代码可能有帮助:

步骤1:定义回调处理程序:


 var handleDataChannelOpen = function (event) {


 console.log("dataChannel.OnOpen", event);


 dataChannel.send("Hello World!");


 };



 var handleDataChannelMessageReceived = function (event) {


 console.log("dataChannel.OnMessage:", event);


 };



 var handleDataChannelError = function (error) {


 console.log("dataChannel.OnError:", error);


 };



 var handleDataChannelClose = function (event) {


 console.log("dataChannel.OnClose", event);


 };



 var handleChannelCallback = function (event) {


 dataChannel = event.channel;


 dataChannel.onopen = handleDataChannelOpen;


 dataChannel.onmessage = handleDataChannelMessageReceived;


 dataChannel.onerror = handleDataChannelError;


 dataChannel.onclose = handleDataChannelClose;


 };



步骤2:创建RTC对等连接:


 var pc = new RTCPeerConnection();


 pc.ondatachannel = handleChannelCallback;



步骤3:创建数据通道:


 var dataChannel = pc.createDataChannel('dataChannelName', {});



 dataChannel.onopen = handleDataChannelOpen;


 dataChannel.onmessage = handleDataChannelMessageReceived;


 dataChannel.onerror = handleDataChannelError;


 dataChannel.onclose = handleDataChannelClose;



在代码中,只需添加ondatachannel回调处理程序即可接收数据。

这是工作客户端代码,我在这里分享,可能会帮助别人,如果它对你有帮助,请注意:


 var connection = new WebSocket('wss://127.0.0.1:3000'); 


 var name ="";



 var loginInput = document.querySelector('#loginInput'); 


 var loginBtn = document.querySelector('#loginBtn'); 



 var otherUsernameInput = document.querySelector('#otherUsernameInput'); 


 var connectToOtherUsernameBtn = document.querySelector('#connectToOtherUsernameBtn'); 


 var msgInput = document.querySelector('#msgInput'); 


 var sendMsgBtn = document.querySelector('#sendMsgBtn'); 


 var connectedUser, myConnection, dataChannel;



 //when a user clicks the login button 


 loginBtn.addEventListener("click", function(event) { 


 name = loginInput.value; 



 if(name.length > 0) { 


 send({ 


 type:"login", 


 name: name 


 }); 


 } 


 });



 //handle messages from the server 


 connection.onmessage = function (message) {


 // if(message)


 var data = JSON.parse(message.data);


 console.log("Got message", data.type);


 switch(data.type) { 


 case"login": 


 onLogin(data.success); 


 break; 


 case"offer": 


 onOffer(data.offer, data.name); 


 break; 


 case"answer":


 onAnswer(data.answer); 


 break; 


 case"candidate": 


 onCandidate(data.candidate); 


 break; 


 default: 


 break; 


 } 


 }; 



 //when a user logs in 


 function onLogin(success) { 



 if (success === false) { 


 alert("oops...try a different username"); 


 } else { 


 //creating our RTCPeerConnection object 


 var configuration = { 


"iceServers": [{"url":"stun:stun.1.google.com:19302" }] 


 }; 



 myConnection = new RTCPeerConnection(configuration); 



 console.log("RTCPeerConnection object was created"); 


 console.log(myConnection); 



 //setup ice handling 


 //when the browser finds an ice candidate we send it to another peer 


 myConnection.onicecandidate = function (event) { 



 if (event.candidate) { 


 send({ 


 type:"candidate", 


 candidate: event.candidate 


 });


 } 


 }; 


 myConnection.ondatachannel = function (event) {


 var receiveChannel = event.channel;


 receiveChannel.onmessage = function (event) {


 console.log("ondatachannel message:", event.data);


 };


 }; 



 openDataChannel();


 console.log("DataChannel Opened..");



 } 


 };



 connection.onopen = function () { 


 console.log("Connected"); 


 }; 



 connection.onerror = function (err) { 


 console.log("Got error", err); 


 };



 // Alias for sending messages in JSON format 


 function send(message) { 


 if (connectedUser) { 


 message.name = connectedUser; 


 }



 connection.send(JSON.stringify(message)); 


 };



 //setup a peer connection with another user 


 connectToOtherUsernameBtn.addEventListener("click", function () {



 var otherUsername = otherUsernameInput.value;


 connectedUser = otherUsername;



 if (otherUsername.length > 0) { 


 //make an offer 


 myConnection.createOffer(function (offer) { 


 console.log(offer); 



 send({ 


 type:"offer", 


 offer: offer 


 }); 



 myConnection.setLocalDescription(offer); 


 }, function (error) { 


 alert("An error has occurred."); 


 }); 


 } 


 });



 //when somebody wants to call us 


 function onOffer(offer, name) { 


 connectedUser = name; 


 myConnection.setRemoteDescription(new RTCSessionDescription(offer));



 myConnection.createAnswer(function (answer) { 


 myConnection.setLocalDescription(answer); 



 send({ 


 type:"answer", 


 answer: answer 


 }); 



 }, function (error) { 


 alert("oops...error"); 


 }); 


 }



 //when another user answers to our offer 


 function onAnswer(answer) { 


 myConnection.setRemoteDescription(new RTCSessionDescription(answer)); 


 }



 //when we got ice candidate from another user 


 function onCandidate(candidate) { 


 myConnection.addIceCandidate(new RTCIceCandidate(candidate)); 


 }



 //creating data channel 


 function openDataChannel() { 



 var dataChannelOptions = { 


 reliable:true 


 };



 dataChannel = myConnection.createDataChannel("myDataChannel", dataChannelOptions);



 dataChannel.onerror = function (error) { 


 console.log("Error:", error); 


 };



 dataChannel.onmessage = function (event) { 


 console.log("Got message:", event.data); 


 }; 


 }



 //when a user clicks the send message button 


 sendMsgBtn.addEventListener("click", function (event) { 


 console.log("send message");


 var val = msgInput.value; 


 dataChannel.send(val); 


 });



...