| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <title>PeerConnection server test page</title> | |
| 4 | |
| 5 <script> | |
| 6 var request = null; | |
| 7 var hangingGet = null; | |
| 8 var localName; | |
| 9 var server; | |
| 10 var my_id = -1; | |
| 11 var other_peers = {}; | |
| 12 var message_counter = 0; | |
| 13 | |
| 14 function trace(txt) { | |
| 15 var elem = document.getElementById("debug"); | |
| 16 elem.innerHTML += txt + "<br>"; | |
| 17 } | |
| 18 | |
| 19 function handleServerNotification(data) { | |
| 20 trace("Server notification: " + data); | |
| 21 var parsed = data.split(','); | |
| 22 if (parseInt(parsed[2]) != 0) | |
| 23 other_peers[parseInt(parsed[1])] = parsed[0]; | |
| 24 } | |
| 25 | |
| 26 function handlePeerMessage(peer_id, data) { | |
| 27 ++message_counter; | |
| 28 var str = "Message from '" + other_peers[peer_id] + "' "; | |
| 29 str += "<span id='toggle_" + message_counter + "' onclick='toggleMe(this);' "; | |
| 30 str += "style='cursor: pointer'>+</span><br>"; | |
| 31 str += "<blockquote id='msg_" + message_counter + "' style='display:none'>"; | |
| 32 str += data + "</blockquote>"; | |
| 33 trace(str); | |
| 34 if (document.getElementById("loopback").checked) { | |
| 35 if (data.search("offer") != -1) { | |
| 36 // In loopback mode, if DTLS is enabled, notify the client to disable it. | |
| 37 // Otherwise replace the offer with an answer. | |
| 38 if (data.search("fingerprint") != -1) | |
| 39 data = data.replace("offer", "offer-loopback"); | |
| 40 else | |
| 41 data = data.replace("offer", "answer"); | |
| 42 } | |
| 43 sendToPeer(peer_id, data); | |
| 44 } | |
| 45 } | |
| 46 | |
| 47 function GetIntHeader(r, name) { | |
| 48 var val = r.getResponseHeader(name); | |
| 49 return val != null && val.length ? parseInt(val) : -1; | |
| 50 } | |
| 51 | |
| 52 function hangingGetCallback() { | |
| 53 try { | |
| 54 if (hangingGet.readyState != 4) | |
| 55 return; | |
| 56 if (hangingGet.status != 200) { | |
| 57 trace("server error: " + hangingGet.statusText); | |
| 58 disconnect(); | |
| 59 } else { | |
| 60 var peer_id = GetIntHeader(hangingGet, "Pragma"); | |
| 61 if (peer_id == my_id) { | |
| 62 handleServerNotification(hangingGet.responseText); | |
| 63 } else { | |
| 64 handlePeerMessage(peer_id, hangingGet.responseText); | |
| 65 } | |
| 66 } | |
| 67 | |
| 68 if (hangingGet) { | |
| 69 hangingGet.abort(); | |
| 70 hangingGet = null; | |
| 71 } | |
| 72 | |
| 73 if (my_id != -1) | |
| 74 window.setTimeout(startHangingGet, 0); | |
| 75 } catch (e) { | |
| 76 trace("Hanging get error: " + e.description); | |
| 77 } | |
| 78 } | |
| 79 | |
| 80 function startHangingGet() { | |
| 81 try { | |
| 82 hangingGet = new XMLHttpRequest(); | |
| 83 hangingGet.onreadystatechange = hangingGetCallback; | |
| 84 hangingGet.ontimeout = onHangingGetTimeout; | |
| 85 hangingGet.open("GET", server + "/wait?peer_id=" + my_id, true); | |
| 86 hangingGet.send(); | |
| 87 } catch (e) { | |
| 88 trace("error" + e.description); | |
| 89 } | |
| 90 } | |
| 91 | |
| 92 function onHangingGetTimeout() { | |
| 93 trace("hanging get timeout. issuing again."); | |
| 94 hangingGet.abort(); | |
| 95 hangingGet = null; | |
| 96 if (my_id != -1) | |
| 97 window.setTimeout(startHangingGet, 0); | |
| 98 } | |
| 99 | |
| 100 function signInCallback() { | |
| 101 try { | |
| 102 if (request.readyState == 4) { | |
| 103 if (request.status == 200) { | |
| 104 var peers = request.responseText.split("\n"); | |
| 105 my_id = parseInt(peers[0].split(',')[1]); | |
| 106 trace("My id: " + my_id); | |
| 107 for (var i = 1; i < peers.length; ++i) { | |
| 108 if (peers[i].length > 0) { | |
| 109 trace("Peer " + i + ": " + peers[i]); | |
| 110 var parsed = peers[i].split(','); | |
| 111 other_peers[parseInt(parsed[1])] = parsed[0]; | |
| 112 } | |
| 113 } | |
| 114 startHangingGet(); | |
| 115 request = null; | |
| 116 } | |
| 117 } | |
| 118 } catch (e) { | |
| 119 trace("error: " + e.description); | |
| 120 } | |
| 121 } | |
| 122 | |
| 123 function signIn() { | |
| 124 try { | |
| 125 request = new XMLHttpRequest(); | |
| 126 request.onreadystatechange = signInCallback; | |
| 127 request.open("GET", server + "/sign_in?" + localName, true); | |
| 128 request.send(); | |
| 129 } catch (e) { | |
| 130 trace("error: " + e.description); | |
| 131 } | |
| 132 } | |
| 133 | |
| 134 function sendToPeer(peer_id, data) { | |
| 135 if (my_id == -1) { | |
| 136 alert("Not connected"); | |
| 137 return; | |
| 138 } | |
| 139 if (peer_id == my_id) { | |
| 140 alert("Can't send a message to oneself :)"); | |
| 141 return; | |
| 142 } | |
| 143 var r = new XMLHttpRequest(); | |
| 144 r.open("POST", server + "/message?peer_id=" + my_id + "&to=" + peer_id, | |
| 145 false); | |
| 146 r.setRequestHeader("Content-Type", "text/plain"); | |
| 147 r.send(data); | |
| 148 r = null; | |
| 149 } | |
| 150 | |
| 151 function connect() { | |
| 152 localName = document.getElementById("local").value.toLowerCase(); | |
| 153 server = document.getElementById("server").value.toLowerCase(); | |
| 154 if (localName.length == 0) { | |
| 155 alert("I need a name please."); | |
| 156 document.getElementById("local").focus(); | |
| 157 } else { | |
| 158 document.getElementById("connect").disabled = true; | |
| 159 document.getElementById("disconnect").disabled = false; | |
| 160 document.getElementById("send").disabled = false; | |
| 161 signIn(); | |
| 162 } | |
| 163 } | |
| 164 | |
| 165 function disconnect() { | |
| 166 if (request) { | |
| 167 request.abort(); | |
| 168 request = null; | |
| 169 } | |
| 170 | |
| 171 if (hangingGet) { | |
| 172 hangingGet.abort(); | |
| 173 hangingGet = null; | |
| 174 } | |
| 175 | |
| 176 if (my_id != -1) { | |
| 177 request = new XMLHttpRequest(); | |
| 178 request.open("GET", server + "/sign_out?peer_id=" + my_id, false); | |
| 179 request.send(); | |
| 180 request = null; | |
| 181 my_id = -1; | |
| 182 } | |
| 183 | |
| 184 document.getElementById("connect").disabled = false; | |
| 185 document.getElementById("disconnect").disabled = true; | |
| 186 document.getElementById("send").disabled = true; | |
| 187 } | |
| 188 | |
| 189 window.onbeforeunload = disconnect; | |
| 190 | |
| 191 function send() { | |
| 192 var text = document.getElementById("message").value; | |
| 193 var peer_id = parseInt(document.getElementById("peer_id").value); | |
| 194 if (!text.length || peer_id == 0) { | |
| 195 alert("No text supplied or invalid peer id"); | |
| 196 } else { | |
| 197 sendToPeer(peer_id, text); | |
| 198 } | |
| 199 } | |
| 200 | |
| 201 function toggleMe(obj) { | |
| 202 var id = obj.id.replace("toggle", "msg"); | |
| 203 var t = document.getElementById(id); | |
| 204 if (obj.innerText == "+") { | |
| 205 obj.innerText = "-"; | |
| 206 t.style.display = "block"; | |
| 207 } else { | |
| 208 obj.innerText = "+"; | |
| 209 t.style.display = "none"; | |
| 210 } | |
| 211 } | |
| 212 | |
| 213 </script> | |
| 214 | |
| 215 </head> | |
| 216 <body> | |
| 217 Server: <input type="text" id="server" value="http://localhost:8888" /><br> | |
| 218 <input type="checkbox" id="loopback" checked="checked"/> Loopback (just send | |
| 219 received messages right back)<br> | |
| 220 Your name: <input type="text" id="local" value="my_name"/> | |
| 221 <button id="connect" onclick="connect();">Connect</button> | |
| 222 <button disabled="true" id="disconnect" | |
| 223 onclick="disconnect();">Disconnect</button> | |
| 224 <br> | |
| 225 <table><tr><td> | |
| 226 Target peer id: <input type="text" id="peer_id" size="3"/></td><td> | |
| 227 Message: <input type="text" id="message"/></td><td> | |
| 228 <button disabled="true" id="send" onclick="send();">Send</button> | |
| 229 </td></tr></table> | |
| 230 <button onclick="document.getElementById('debug').innerHTML='';"> | |
| 231 Clear log</button> | |
| 232 | |
| 233 <pre id="debug"> | |
| 234 </pre> | |
| 235 <br><hr> | |
| 236 </body> | |
| 237 </html> | |
| OLD | NEW |