peerconnection_server目录中html代码简单注释与分析

来源：互联网发布：埃摩森猎头公司知乎编辑：程序博客网时间：2024/06/07 03:52
<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 + "' onclick='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" onclick="connect();">Connect</button><button disabled="true" id="disconnect" onclick="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" onclick="send();">Send</button></td></tr></table><button onclick="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应用的回环视频测试。
0 0