Gitiles
Code Review Sign In
gerrit-public.fairphone.software / platform / external / libwebsockets / 0ad1a6e5bfbdf6a2d3feae815a7b3ec11f56814b / . / test-server / test.html
blob: eff2ba19d15a7c9075b1600e3ca6a1b89779607c [file] [log] [blame]
Andy Green775c0dd2010-10-29 14:15:22 +0100[diff] [blame]1<!DOCTYPE html>
2<html lang="en">
3<head>
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]4 <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]5 <title>Minimal Websocket test app</title>
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]6<style type="text/css">
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]7 span.title { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; }
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]8 .browser { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#ffff00; vertical-align:middle; text-align:center; background:#d0b070; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]9 .group2 { vertical-align:middle;
10 text-align:center;
11 background:#f0f0e0;
12 padding:12px;
13 -webkit-border-radius:10px;
14 -moz-border-radius:10px;
15 border-radius:10px; }
16 .explain { vertical-align:middle;
17 text-align:center;
18 background:#f0f0c0; padding:12px;
19 -webkit-border-radius:10px;
20 -moz-border-radius:10px;
21 border-radius:10px;
22 color:#404000; }
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]23 td.wsstatus { vertical-align:middle; width:200px; height:50px;
24 text-align:center;
25 background:#f0f0c0; padding:6px;
26 -webkit-border-radius:8px;
27 -moz-border-radius:8px;
28 border-radius:8px;
29 color:#404000; }
30 td.l { vertical-align:middle;
31 text-align:center;
32 background:#d0d0b0;
33 padding:3px;
34 -webkit-border-radius:3px;
35 -moz-border-radius:3px;
36 border-radius:3px; }
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]37 .content { vertical-align:top; text-align:center; background:#fffff0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
38 .canvas { vertical-align:top; text-align:center; background:#efefd0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]39.tabs {
40 position: relative;
41 min-height: 750px; /* This part sucks */
42 clear: both;
43 margin: 25px 0;
44}
45.tab {
46 float: left;
47}
48.tab label {
49 background: #eee;
50 padding: 10px;
51 border: 1px solid #ccc;
52 margin-left: -1px;
53 position: relative;
54 left: 1px;
55}
56.tab [type=radio] {
57 display: none;
58}
59.content {
60 position: absolute;
61 top: 28px;
62 left: 0;
63 background: white;
64 right: 0;
65 bottom: 0;
66 padding: 20px;
67 border: 1px solid #ccc;
68}
69[type=radio]:checked ~ label {
70 background: white;
71 border-bottom: 1px solid white;
72 z-index: 2;
73}
74[type=radio]:checked ~ label ~ .content {
75 z-index: 1;
76}
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]77</style>
Andy Green775c0dd2010-10-29 14:15:22 +0100[diff] [blame]78</head>
79
80<body>
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]81<header></header>
82<article>
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]83
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]84<table><tr><td>
85
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]86<table width=600px>
87 <tr>
88 <td valign=middle align=center>
89 <a href="https://libwebsockets.org">
90 <img src="/libwebsockets.org-logo.png"></a></td><td>
91 <section class="browser">Detected Browser:
92 <div id=brow>...</div></section>
93 </td>
94 </tr>
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]95
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]96</table>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]97</td></tr>
98<tr><td colspan=2 align=center>
99Click <a href="/leaf.jpg" target="_blank">Here</a> to
100have the test server send a big picture by http.
101</td></tr>
102<tr><td colspan=2>
103<div class="tabs">
104
105 <div class="tab">
106 <input type="radio" id="tab-1" name="tab-group-1" checked>
107 <label for="tab-1">Dumb Increment Demo</label>
108
109 <div class="content">
110 <div id="dumb" class="group2">
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]111 <table>
112 <tr>
113 <td id=wsdi_statustd align=center class="wsstatus">
114 <span id=wsdi_status>Websocket connection not initialized</span></td>
115 <td><span class="title">dumb increment-protocol</span></td>
116 </tr>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]117 <tr>
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]118 <td class="explain" colspan=2>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]119The incrementing number is coming from the server at 20Hz and is individual for
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]120each connection to the server... try opening a second browser window.
121<br/><br/>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]122The button sends a message over the websocket link to ask the server
123to zero just this connection's number.
124 </td>
125 </tr>
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]126 <tr>
127 <td align=center><div id=number style="font-size:120%;"> </div></td>
128 <td align=center>
129 <input type=button id=offset value="Reset counter" onclick="reset();" >
130 </td>
131 </tr>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]132 </table>
133 </div>
134 </div>
135 </div>
136
137 <div class="tab">
138 <input type="radio" id="tab-2" name="tab-group-1">
139 <label for="tab-2">Mirror Demo</label>
140
141 <div class="content">
142 <div id="mirror" class="group2">
143 <table>
144 <tr>
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]145 <td colspan=1 id=wslm_statustd align=center class="wsstatus">
146 <span id=wslm_status>Websocket connection not initialized</span>
147 </td>
148 <td>
149 <span class="title">lws-mirror-protocol</span>
150 </td>
151 </tr>
152 <tr>
153 <td colspan=2>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]154 <div class="explain">
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]155Use the mouse to draw on the canvas below -- all other browser windows open
156on this page see your drawing in realtime and you can see any of theirs as
157well.
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]158<br/><br/>
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]159The lws-mirror protocol doesn't interpret what is being sent to it, it just
160re-sends it to every other websocket it has a connection with using that
161protocol, including the guy who sent the packet.
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]162<br/><br/>
163<b>libwebsockets-test-client</b> joins in by spamming circles on to this shared canvas when
164run.
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]165 </div>
166 </td>
167 </tr>
168 <tr>
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]169 <td colspan=2>Drawing color:
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]170 <select id="color" onchange="update_color();">
171 <option value=#000000>Black</option>
172 <option value=#0000ff>Blue</option>
173 <option value=#20ff20>Green</option>
174 <option value=#802020>Dark Red</option>
175 </select>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]176 </tr>
177 <tr>
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]178 <td colspan=2 width=500 height=320>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]179 <div id="wslm_drawing" style="background:white"></div>
180 </td>
181 </tr>
182 </table>
183 </div>
184 </div>
185 </div>
186
187 <div class="tab">
188 <input type="radio" id="tab-3" name="tab-group-1">
189 <label for="tab-3">Close Testing</label>
190
191 <div class="content">
192<div id="ot" class="group2">
193 <table>
194 <tr>
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]195 <td>
196
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]197 </td></tr>
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]198 <tr><td id=ot_statustd align=center class="wsstatus">
199 <span id=ot_status>Websocket connection not initialized</span>
200 </td>
201 <td colspan=2><span class="title">Open and close testing</span></td>
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]202 </tr>
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]203 <tr>
204<td class="explain" colspan=3 style="padding:3">
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]205To help with open and close testing, you can open and close a connection by hand using
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]206 the buttons.<br>
207 "<b>Close</b>" closes the connection from the browser with code 3000
208 and reason 'Bye!".<br>
209 "<b>Request Server Close</b>" sends a message asking the server to
210initiate the close, which it does with code 1001 and reason "Seeya".
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]211</td></tr>
212 <tr>
213 <td align=center><input type=button id=ot_open_btn value="Open" onclick="ot_open();" ></td>
214 <td align=center><input type=button id=ot_close_btn disabled value="Close" onclick="ot_close();" ></td>
215 <td align=center><input type=button id=ot_req_close_btn disabled value="Request Server Close" onclick="ot_req_close();" ></td>
216 </tr>
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]217
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]218</table>
219
220</div>
221 </div>
222 </div>
223
224 <div class="tab">
225 <input type="radio" id="tab-4" name="tab-group-1">
226 <label for="tab-4">Server info</label>
227
228 <div class="content">
229<div id="ot" class="group2">
230 <table>
231 <tr>
232 <td id=s_statustd align=center class="wsstatus">
233 <div id=s_status>Websocket connection not initialized</div>
234 </td>
235 <td colspan=1>
236<span class="title">Server Info</span>
237 </td>
238 </tr><tr>
239<td class="explain" colspan=2>
240This information is sent by the server over a ws[s] link and updated live
241whenever the information changes server-side.
242</td></tr>
243 <tr>
244 <td align=center colspan=2><div id=servinfo></</div></td>
245 </tr>
246 <tr>
247 <td align=center colspan=2><div id=conninfo style="border : solid 2px #e0d040; padding : 4px; width : 500px; height : 350px; overflow : auto; "></</div></td>
248 </tr>
249</table>
Andy Greenaa850242016-02-20 07:52:35 +0800[diff] [blame]250</div>
251 </div>
252 </div>
253
254</div>
255</td></tr></table>
256
Andy Greence0326b2016-02-21 10:42:46 +0800[diff] [blame]257Looking for support? <a href="https://libwebsockets.org">https://libwebsockets.org</a>, <a href="https://github.com/warmcat/libwebsockets">https://github.com/warmcat/libwebsockets</a></a><br/>
258Join the mailing list: <a href="https://libwebsockets.org/mailman/listinfo/libwebsockets">https://libwebsockets.org/mailman/listinfo/libwebsockets</a>
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]259
Andy Greenc51823a2013-01-31 19:50:57 +0800[diff] [blame]260</article>
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]261
Andy Green775c0dd2010-10-29 14:15:22 +0100[diff] [blame]262<script>
Andy Green188d8962011-09-25 10:01:02 +0100[diff] [blame]263
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]264/*
265 * We display untrusted stuff in html context... reject anything
266 * that has HTML stuff in it
267 */
268
269function san(s)
270{
271 if (s.search("<") != -1)
272 return "invalid string";
273
274 return s;
275}
276
Andy Green188d8962011-09-25 10:01:02 +0100[diff] [blame]277/* BrowserDetect came from http://www.quirksmode.org/js/detect.html */
278
279var BrowserDetect = {
280 init: function () {
281 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
282 this.version = this.searchVersion(navigator.userAgent)
283 || this.searchVersion(navigator.appVersion)
284 || "an unknown version";
285 this.OS = this.searchString(this.dataOS) || "an unknown OS";
286 },
287 searchString: function (data) {
288 for (var i=0;i<data.length;i++) {
289 var dataString = data[i].string;
290 var dataProp = data[i].prop;
291 this.versionSearchString = data[i].versionSearch || data[i].identity;
292 if (dataString) {
293 if (dataString.indexOf(data[i].subString) != -1)
294 return data[i].identity;
295 }
296 else if (dataProp)
297 return data[i].identity;
298 }
299 },
300 searchVersion: function (dataString) {
301 var index = dataString.indexOf(this.versionSearchString);
302 if (index == -1) return;
303 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
304 },
305 dataBrowser: [
306 {
307 string: navigator.userAgent,
308 subString: "Chrome",
309 identity: "Chrome"
310 },
311 { string: navigator.userAgent,
312 subString: "OmniWeb",
313 versionSearch: "OmniWeb/",
314 identity: "OmniWeb"
315 },
316 {
317 string: navigator.vendor,
318 subString: "Apple",
319 identity: "Safari",
320 versionSearch: "Version"
321 },
322 {
323 prop: window.opera,
324 identity: "Opera",
325 versionSearch: "Version"
326 },
327 {
328 string: navigator.vendor,
329 subString: "iCab",
330 identity: "iCab"
331 },
332 {
333 string: navigator.vendor,
334 subString: "KDE",
335 identity: "Konqueror"
336 },
337 {
338 string: navigator.userAgent,
339 subString: "Firefox",
340 identity: "Firefox"
341 },
342 {
343 string: navigator.vendor,
344 subString: "Camino",
345 identity: "Camino"
346 },
347 { // for newer Netscapes (6+)
348 string: navigator.userAgent,
349 subString: "Netscape",
350 identity: "Netscape"
351 },
352 {
353 string: navigator.userAgent,
354 subString: "MSIE",
355 identity: "Explorer",
356 versionSearch: "MSIE"
357 },
358 {
359 string: navigator.userAgent,
360 subString: "Gecko",
361 identity: "Mozilla",
362 versionSearch: "rv"
363 },
364 { // for older Netscapes (4-)
365 string: navigator.userAgent,
366 subString: "Mozilla",
367 identity: "Netscape",
368 versionSearch: "Mozilla"
369 }
370 ],
371 dataOS : [
372 {
373 string: navigator.platform,
374 subString: "Win",
375 identity: "Windows"
376 },
377 {
378 string: navigator.platform,
379 subString: "Mac",
380 identity: "Mac"
381 },
382 {
383 string: navigator.userAgent,
384 subString: "iPhone",
385 identity: "iPhone/iPod"
386 },
387 {
388 string: navigator.platform,
389 subString: "Linux",
390 identity: "Linux"
391 }
392 ]
393
394};
395BrowserDetect.init();
396
397document.getElementById("brow").textContent = " " + BrowserDetect.browser + " "
398 + BrowserDetect.version +" " + BrowserDetect.OS +" ";
399
Andy Green775c0dd2010-10-29 14:15:22 +0100[diff] [blame]400 var pos = 0;
401
Andy Green24cc0ae2010-11-15 19:39:30 +0000[diff] [blame]402function get_appropriate_ws_url()
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]403{
Andy Green24cc0ae2010-11-15 19:39:30 +0000[diff] [blame]404 var pcol;
405 var u = document.URL;
406
Andy Green3faa9c72010-11-08 17:03:03 +0000[diff] [blame]407 /*
408 * We open the websocket encrypted if this page came on an
409 * https:// url itself, otherwise unencrypted
410 */
411
Andy Green24cc0ae2010-11-15 19:39:30 +0000[diff] [blame]412 if (u.substring(0, 5) == "https") {
413 pcol = "wss://";
414 u = u.substr(8);
415 } else {
416 pcol = "ws://";
417 if (u.substring(0, 4) == "http")
418 u = u.substr(7);
419 }
420
421 u = u.split('/');
422
John Harrison8d5793b2013-12-10 21:20:03 +0800[diff] [blame]423 /* + "/xxx" bit is for IE10 workaround */
424
425 return pcol + u[0] + "/xxx";
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]426}
427
Andy Green24cc0ae2010-11-15 19:39:30 +0000[diff] [blame]428
429document.getElementById("number").textContent = get_appropriate_ws_url();
430
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]431/* dumb increment protocol */
Andy Green3faa9c72010-11-08 17:03:03 +0000[diff] [blame]432
Andy Green188d8962011-09-25 10:01:02 +0100[diff] [blame]433 var socket_di;
434
David Galeanob42dcc72013-01-09 15:39:50 +0800[diff] [blame]435 if (typeof MozWebSocket != "undefined") {
Andy Green188d8962011-09-25 10:01:02 +0100[diff] [blame]436 socket_di = new MozWebSocket(get_appropriate_ws_url(),
437 "dumb-increment-protocol");
438 } else {
439 socket_di = new WebSocket(get_appropriate_ws_url(),
440 "dumb-increment-protocol");
441 }
442
Andy Green775c0dd2010-10-29 14:15:22 +0100[diff] [blame]443
444 try {
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]445 socket_di.onopen = function() {
Andy Green51959682010-11-12 14:12:13 +0000[diff] [blame]446 document.getElementById("wsdi_statustd").style.backgroundColor = "#40ff40";
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]447 document.getElementById("wsdi_status").innerHTML =
448 " <b>websocket connection opened</b><br>" +
449 san(socket_di.extensions);
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]450 }
Andy Green775c0dd2010-10-29 14:15:22 +0100[diff] [blame]451
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]452 socket_di.onmessage =function got_packet(msg) {
Andy Green51959682010-11-12 14:12:13 +0000[diff] [blame]453 document.getElementById("number").textContent = msg.data + "\n";
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]454 }
455
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]456 socket_di.onclose = function(){
Andy Green51959682010-11-12 14:12:13 +0000[diff] [blame]457 document.getElementById("wsdi_statustd").style.backgroundColor = "#ff4040";
458 document.getElementById("wsdi_status").textContent = " websocket connection CLOSED ";
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]459 }
460 } catch(exception) {
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]461 alert('<p>Error' + exception);
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]462 }
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]463
464 var socket_status, jso, s;
465
466 if (typeof MozWebSocket != "undefined") {
467 socket_status = new MozWebSocket(get_appropriate_ws_url(),
468 "lws-status");
469 } else {
470 socket_status = new WebSocket(get_appropriate_ws_url(),
471 "lws-status");
472 }
473
474
475 try {
476 socket_status.onopen = function() {
477 document.getElementById("s_statustd").style.backgroundColor = "#40ff40";
478 document.getElementById("s_status").innerHTML =
479 " <b>websocket connection opened</b><br>" +
480 san(socket_di.extensions);
481 }
482
483 socket_status.onmessage =function got_packet(msg) {
484 jso = JSON.parse(msg.data);
485
486 document.getElementById("servinfo").innerHTML =
487 "<table><tr><td class=l>Build info</td><td>"+
488 san(jso.version) + "</td></tr>" +
489 "<tr><td class=l>Server info</td><td>" +
490 san(jso.hostname) + "</td></tr>" +
491 "</table>";
492 s="<table>";
493 var n;
494 for (n = 0; n < jso.conns.length; n++)
495 s = s + "<tr><td class=l>client " + (n + 1) +
496 "</td><td><b>" + san(jso.conns[n].peer) +
497 "</b><br>" + san(jso.conns[n].time) +
498 "<br>" + san(jso.conns[n].ua) +
499 "</td></tr>";
500 s = s + "</table>";
501
502 document.getElementById("conninfo").innerHTML = s;
503 }
504
505 socket_status.onclose = function(){
506 document.getElementById("s_statustd").style.backgroundColor = "#ff4040";
507 document.getElementById("s_status").textContent = " websocket connection CLOSED ";
508 }
509 } catch(exception) {
510 alert('<p>Error' + exception);
511 }
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]512
513function reset() {
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]514 socket_di.send("reset\n");
Andy Greenab7d9332010-11-11 13:19:19 +0000[diff] [blame]515}
516
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]517var socket_ot;
518
519function ot_open() {
520 if (typeof MozWebSocket != "undefined") {
521 socket_ot = new MozWebSocket(get_appropriate_ws_url(),
522 "dumb-increment-protocol");
523 } else {
524 socket_ot = new WebSocket(get_appropriate_ws_url(),
525 "dumb-increment-protocol");
526 }
527 try {
528 socket_ot.onopen = function() {
529 document.getElementById("ot_statustd").style.backgroundColor = "#40ff40";
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]530 document.getElementById("ot_status").innerHTML = " <b>websocket connection opened</b><br>" + san(socket_di.extensions);
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]531 document.getElementById("ot_open_btn").disabled = true;
532 document.getElementById("ot_close_btn").disabled = false;
Andy Green1fb95e82015-12-26 17:20:34 +0800[diff] [blame]533 document.getElementById("ot_req_close_btn").disabled = false;
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]534 }
535
Andy Green1fb95e82015-12-26 17:20:34 +0800[diff] [blame]536 socket_ot.onclose = function(e){
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]537 document.getElementById("ot_statustd").style.backgroundColor = "#ff4040";
Andy Green1fb95e82015-12-26 17:20:34 +0800[diff] [blame]538 document.getElementById("ot_status").textContent = " websocket connection CLOSED, code: " + e.code +
539 ", reason: " + e.reason;
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]540 document.getElementById("ot_open_btn").disabled = false;
541 document.getElementById("ot_close_btn").disabled = true;
Andy Green1fb95e82015-12-26 17:20:34 +0800[diff] [blame]542 document.getElementById("ot_req_close_btn").disabled = true;
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]543 }
544 } catch(exception) {
545 alert('<p>Error' + exception);
546 }
547}
548
Andy Green1fb95e82015-12-26 17:20:34 +0800[diff] [blame]549/* browser will close the ws in a controlled way */
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]550function ot_close() {
Andy Green066a7a12015-12-26 15:47:06 +0800[diff] [blame]551 socket_ot.close(3000, "Bye!");
Andy Green974bed42015-11-15 09:24:25 +0800[diff] [blame]552}
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]553
Andy Green1fb95e82015-12-26 17:20:34 +0800[diff] [blame]554/* we ask the server to close the ws in a controlled way */
555function ot_req_close() {
556 socket_ot.send("closeme\n");
557}
558
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]559/* lws-mirror protocol */
560
561 var down = 0;
562 var no_last = 1;
Andy Green51959682010-11-12 14:12:13 +0000[diff] [blame]563 var last_x = 0, last_y = 0;
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]564 var ctx;
Andy Green188d8962011-09-25 10:01:02 +0100[diff] [blame]565 var socket_lm;
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]566 var color = "#000000";
567
David Galeanob42dcc72013-01-09 15:39:50 +0800[diff] [blame]568 if (typeof MozWebSocket != "undefined") {
Andy Green188d8962011-09-25 10:01:02 +0100[diff] [blame]569 socket_lm = new MozWebSocket(get_appropriate_ws_url(),
570 "lws-mirror-protocol");
571 } else {
572 socket_lm = new WebSocket(get_appropriate_ws_url(),
573 "lws-mirror-protocol");
574 }
575
576
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]577 try {
578 socket_lm.onopen = function() {
Andy Green51959682010-11-12 14:12:13 +0000[diff] [blame]579 document.getElementById("wslm_statustd").style.backgroundColor = "#40ff40";
Andy Green0ad1a6e2016-02-20 14:05:55 +0800[diff] [blame^]580 document.getElementById("wslm_status").innerHTML =
581 " <b>websocket connection opened</b><br>" +
582 san(socket_di.extensions);
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]583 }
584
585 socket_lm.onmessage =function got_packet(msg) {
Andy Green90c7cbc2011-01-27 06:26:52 +0000[diff] [blame]586 j = msg.data.split(';');
587 f = 0;
588 while (f < j.length - 1) {
589 i = j[f].split(' ');
590 if (i[0] == 'd') {
591 ctx.strokeStyle = i[1];
592 ctx.beginPath();
593 ctx.moveTo(+(i[2]), +(i[3]));
594 ctx.lineTo(+(i[4]), +(i[5]));
595 ctx.stroke();
596 }
597 if (i[0] == 'c') {
598 ctx.strokeStyle = i[1];
599 ctx.beginPath();
600 ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true);
601 ctx.stroke();
602 }
603
604 f++;
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]605 }
606 }
607
608 socket_lm.onclose = function(){
Andy Green51959682010-11-12 14:12:13 +0000[diff] [blame]609 document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
610 document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]611 }
612 } catch(exception) {
613 alert('<p>Error' + exception);
614 }
615
616 var canvas = document.createElement('canvas');
617 canvas.height = 300;
618 canvas.width = 480;
619 ctx = canvas.getContext("2d");
620
621 document.getElementById('wslm_drawing').appendChild(canvas);
622
623 canvas.addEventListener('mousemove', ev_mousemove, false);
624 canvas.addEventListener('mousedown', ev_mousedown, false);
625 canvas.addEventListener('mouseup', ev_mouseup, false);
626
Andy Green51959682010-11-12 14:12:13 +0000[diff] [blame]627 offsetX = offsetY = 0;
628 element = canvas;
629 if (element.offsetParent) {
630 do {
631 offsetX += element.offsetLeft;
632 offsetY += element.offsetTop;
633 } while ((element = element.offsetParent));
634 }
635
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]636function update_color() {
637 color = document.getElementById("color").value;
638}
639
640function ev_mousedown (ev) {
641 down = 1;
642}
643
644function ev_mouseup(ev) {
645 down = 0;
646 no_last = 1;
647}
648
649function ev_mousemove (ev) {
650 var x, y;
651
Andy Green51959682010-11-12 14:12:13 +0000[diff] [blame]652 if (ev.offsetX) {
653 x = ev.offsetX;
654 y = ev.offsetY;
655 } else {
656 x = ev.layerX - offsetX;
657 y = ev.layerY - offsetY;
658
659 }
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]660
661 if (!down)
662 return;
663 if (no_last) {
664 no_last = 0;
665 last_x = x;
666 last_y = y;
667 return;
668 }
Andy Green90c7cbc2011-01-27 06:26:52 +0000[diff] [blame]669 socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y + ';');
Andy Greenfe2a0d22010-11-12 13:10:40 +0000[diff] [blame]670
671 last_x = x;
672 last_y = y;
673}
674
675
Andy Green775c0dd2010-10-29 14:15:22 +0100[diff] [blame]676</script>
677
678</body>
679</html>