WebRTC 发送消息
WebRTC 发送消息
现在我们创建一个简单的例子. 首先, 运行信令服务器(signaling server).
页面上包含三个文本输入框,一个用来登录,一个用来输入用户名,一个用于填写你要发送给其他计算机的消息,创建index.html并添加如下代码:
<html lang="en"> <head> <meta charset="utf-8" /> </head> <body> <div> <input type="text" id="loginInput" /> <button id="loginBtn">Login</button> </div> <div> <input type="text" id="otherUsernameInput" /> <button id="connectToOtherUsernameBtn">Establish connection</button> </div> <div> <input type="text" id="msgInput" /> <button id="sendMsgBtn">Send text message</button> </div> <script src="client.js"></script> </body> </html>
我们还要添加三个按钮:用于登,建立连接和发送消息。创建一个client.js文件并添加以下代码:
var connection = new WebSocket('ws://localhost:9090'); 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) { console.log("Got message", message.data); var data = JSON.parse(message.data); 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 webkitRTCPeerConnection(configuration, { optional: [{RtpDataChannels: true}] }); 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 }); } }; openDataChannel(); } }; 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)); };
您可以看到,我们建立了一个与信令服务器的连接。当用户单击登录按钮时,程序将把用户名发送给服务器。如果登录成功,应用程序将创建RTCPeerConnection对象并设置OnIceCandidate处理程序,它将所有找到的IceCandidates发送到另一个对等点。它还运行创建DataChannel的opendatachannel()函数。请注意,在创建RTCPeerConnection对象时,构造函数可选:[{rtpdatachannels:true}]中的第二个参数是强制使用chrome或opera浏览器.下一步是为其他节点创建一个提议。将以下代码添加到client.js文件中:
//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(); 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)); }
您可以看到,当单击“建立连接”按钮时,程序会向其他节点提供SDP提议。我们还设置了onanswer和oncandidate处理程序。最后,让我们实现创建datachannel的opendatachannel()函数。将以下代码添加到client.js文件中:
//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); });
在这里,我们为连接创建datachannel,并为“发送消息”按钮添加事件处理程序。现在,在两个选项卡中打开此页面,使用两个用户登录,建立连接,并尝试发送消息,您应该在控制台输出中看到它们。请注意上面的示例在opera中测试的。