<html>
<head>
<title>PeerConnection server test page</title>
<script>
var request = null;
var hangingGet = null;
var localName;
var server;
var my_id = -1;
var other_peers = {};
var message_counter = 0;
function trace(txt) {
var elem = document.getElementById("debug");
elem.innerHTML += txt + "<br>";
}
function handleServerNotification(data) {
trace("Server notification: " + data);
var parsed = data.split(',');
if (parseInt(parsed[2]) != 0)
other_peers[parseInt(parsed[1])] = parsed[0];
}
function handlePeerMessage(peer_id, data) {
++message_counter;
var str = "Message from '" + other_peers[peer_id] + "' ";
str += "<span id='toggle_" + message_counter + "' οnclick='toggleMe(this);' ";
str += "style='cursor: pointer'>+</span><br>";
str += "<blockquote id='msg_" + message_counter + "' style='display:none'>";
str += data + "</blockquote>";
trace(str);
if (document.getElementById("loopback").checked) {//回环就将数据发送回去
if (data.search("offer") != -1) {
// In loopback mode, if DTLS is enabled, notify the client to disable it.
// Otherwise replace the offer with an answer.
if (data.search("fingerprint") != -1)
data = data.replace("offer", "offer-loopback");
else
data = data.replace("offer", "answer");
}
sendToPeer(peer_id, data);
}
}
function GetIntHeader(r, name) {
var val = r.getResponseHeader(name);
return val != null && val.length ? parseInt(val) : -1;
}
function hangingGetCallback() {//接收挂起请求后返回数据
try {
if (hangingGet.readyState != 4)
return;
if (hangingGet.status != 200) {
trace("server error: " + hangingGet.statusText);
disconnect();
} else {
var peer_id = GetIntHeader(hangingGet, "Pragma");
if (peer_id == my_id) {
handleServerNotification(hangingGet.responseText);//处理服务器发给本端的通知
} else {
handlePeerMessage(peer_id, hangingGet.responseText);//处理对端发送来的数据
}
}
if (hangingGet) {
hangingGet.abort();
hangingGet = null;
}
if (my_id != -1)
window.setTimeout(startHangingGet, 0);
} catch (e) {
trace("Hanging get error: " + e.description);
}
}
function startHangingGet() {
try {
hangingGet = new XMLHttpRequest();
hangingGet.onreadystatechange = hangingGetCallback;//回调函数
hangingGet.ontimeout = onHangingGetTimeout;//超时回调函数
hangingGet.open("GET", server + "/wait?peer_id=" + my_id, true);
hangingGet.send();
} catch (e) {
trace("error" + e.description);
}
}
function onHangingGetTimeout() {
trace("hanging get timeout. issuing again.");
hangingGet.abort();
hangingGet = null;
if (my_id != -1)
window.setTimeout(startHangingGet, 0);
}
function signInCallback() {//接收sign_in返回的数据
try {
if (request.readyState == 4) {
if (request.status == 200) {
var peers = request.responseText.split("\n");
my_id = parseInt(peers[0].split(',')[1]);
trace("My id: " + my_id);
for (var i = 1; i < peers.length; ++i) {
if (peers[i].length > 0) {
trace("Peer " + i + ": " + peers[i]);
var parsed = peers[i].split(',');
other_peers[parseInt(parsed[1])] = parsed[0];
}
}
startHangingGet();//发送挂起的GET请求
request = null;
}
}
} catch (e) {
trace("error: " + e.description);
}
}
function sendToPeer(peer_id, data) {
if (my_id == -1) {
alert("Not connected");
return;
}
if (peer_id == my_id) {
alert("Can't send a message to oneself :)");
return;
}
var r = new XMLHttpRequest();
r.open("POST", server + "/message?peer_id=" + my_id + "&to=" + peer_id,
false);
r.setRequestHeader("Content-Type", "text/plain");
r.send(data);//发送数据给peer_id非本地的对端
r = null;
}
function signIn() {
try {
request = new XMLHttpRequest();
request.onreadystatechange = signInCallback; //回调函数
request.open("GET", server + "/sign_in?" + localName, true);
request.send();
} catch (e) {
trace("error: " + e.description);
}
}
function connect() { //点击连接按钮调用函数
localName = document.getElementById("local").value.toLowerCase();
server = document.getElementById("server").value.toLowerCase();
if (localName.length == 0) {
alert("I need a name please.");
document.getElementById("local").focus();
} else {
document.getElementById("connect").disabled = true;
document.getElementById("disconnect").disabled = false;
document.getElementById("send").disabled = false;
signIn(); //发送sign_in的GET请求
}
}
function disconnect() {
if (request) {
request.abort();
request = null;
}
if (hangingGet) {
hangingGet.abort();
hangingGet = null;
}
if (my_id != -1) {
request = new XMLHttpRequest();
request.open("GET", server + "/sign_out?peer_id=" + my_id, false);
request.send();
request = null;
my_id = -1;
}
document.getElementById("connect").disabled = false;
document.getElementById("disconnect").disabled = true;
document.getElementById("send").disabled = true;
}
window.onbeforeunload = disconnect;
function send() {//点击发送按钮调用的函数
var text = document.getElementById("message").value;
var peer_id = parseInt(document.getElementById("peer_id").value);
if (!text.length || peer_id == 0) {
alert("No text supplied or invalid peer id");
} else {
sendToPeer(peer_id, text);//发送到填写的peer_id端
}
}
function toggleMe(obj) {
var id = obj.id.replace("toggle", "msg");
var t = document.getElementById(id);
if (obj.innerText == "+") {//点击"+"号显示接收数据
obj.innerText = "-";
t.style.display = "block";
} else {//点击"-"号隐藏接收数据
obj.innerText = "+";
t.style.display = "none";
}
}
</script>
</head>
<body>
Server: <input type="text" id="server" value="http://localhost:8888" /><br>
<input type="checkbox" id="loopback" checked="checked"/> Loopback (just send received messages right back)<br>
Your name: <input type="text" id="local" value="my_name"/>
<button id="connect" οnclick="connect();">Connect</button>
<button disabled="true" id="disconnect" οnclick="disconnect();">Disconnect</button>
<br>
<table>
<tr>
<td>Target peer id: <input type="text" id="peer_id" size="3"/></td>
<td>Message: <input type="text" id="message"/></td>
<td><button disabled="true" id="send" οnclick="send();">Send</button></td>
</tr>
</table>
<button οnclick="document.getElementById('debug').innerHTML='';">Clear log</button>
<pre id="debug"></pre>
<br>
<hr>
</body>
</html>
【总结】
实现功能主要有：
1. 接收peer的数据并显示，可以折叠或显示数据;
2. 根据peer_id发送给对端;
3. loop，将接收来的数据处理返回, 实现peerconnection_client.exe应用的回环视频测试。
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
