A little upgrade to the HTML test page:

* Signaling messages are added to the log with a '+' / '-' sign to expand/collapse the message.  This makes the log easier to read and each message can be read separate from the others.
* Loopback enabled by default since that's the most common use case.
* Wrapped some lines at 80 for easier future diffing.
Review URL: http://webrtc-codereview.appspot.com/214001

git-svn-id: http://webrtc.googlecode.com/svn/trunk@711 4adac7df-926f-26a2-2b94-8c16560cd09d
This commit is contained in:
tommi@webrtc.org
2011-10-07 13:23:11 +00:00
parent 25e0b8e3a0
commit 5a945ecc28

View File

@ -9,6 +9,7 @@ var localName;
var server;
var my_id = -1;
var other_peers = {};
var message_counter = 0;
function trace(txt) {
var elem = document.getElementById("debug");
@ -23,14 +24,19 @@ function handleServerNotification(data) {
}
function handlePeerMessage(peer_id, data) {
trace("Message from '" + other_peers[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)
sendToPeer(peer_id, data);
}
function GetIntHeader(r, name) {
var val = r.getResponseHeader(name);
trace("header value: " + val);
return val != null && val.length ? parseInt(val) : -1;
}
@ -126,7 +132,8 @@ function sendToPeer(peer_id, data) {
return;
}
var r = new XMLHttpRequest();
r.open("POST", server + "/message?peer_id=" + my_id + "&to=" + peer_id, false);
r.open("POST", server + "/message?peer_id=" + my_id + "&to=" + peer_id,
false);
r.setRequestHeader("Content-Type", "text/plain");
r.send(data);
r = null;
@ -182,21 +189,37 @@ function send() {
}
}
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"/> Loopback (just send received messages right back)<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>
<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>
<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>