254 lines
6.8 KiB
HTML
254 lines
6.8 KiB
HTML
|
<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, replace the offer with an answer.
|
||
|
|
data = data.replace("offer", "answer");
|
||
|
|
// Keep only the first crypto line for each m line in the answer.
|
||
|
|
var mlines = data.split("m=");
|
||
|
|
// Start from 1 because the first item in the array is not a m line.
|
||
|
|
for (var i = 1; i < mlines.length; ++i) {
|
||
|
|
var mline = mlines[i];
|
||
|
|
var cryptoBegin = mline.indexOf("a=crypto:", 0);
|
||
|
|
if (cryptoBegin == -1) {
|
||
|
|
// No crypto line found.
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
// Skip the first crypto line.
|
||
|
|
cryptoBegin = mline.indexOf("a=crypto:", cryptoBegin + 1);
|
||
|
|
while (cryptoBegin != -1) {
|
||
|
|
var cryptoEnd = mline.indexOf("\\n", cryptoBegin);
|
||
|
|
var crypto = mline.substring(cryptoBegin, cryptoEnd + 2);
|
||
|
|
data = data.replace(crypto, "");
|
||
|
|
// Search for the the next crypto line.
|
||
|
|
cryptoBegin = mline.indexOf("a=crypto:", cryptoBegin + 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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() {
|
||
|
|
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();
|
||
|
|
request = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
trace("error: " + e.description);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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 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);
|
||
|
|
r = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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>
|