test-server/test.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4  <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
   5  <title>Minimal Websocket test app</title>
   6 <style type="text/css">
   7         div.title { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; }
   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;}
   9         .group2 { width:600px; vertical-align:middle; text-align:center; background:#f0f0e0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
  10         .explain { vertical-align:middle; text-align:center; background:#f0f0c0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; color:#404000; }
  11         .content { vertical-align:top; text-align:center; background:#fffff0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
  12         .canvas { vertical-align:top; text-align:center; background:#efefd0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
  13 </style>
  14 </head>
  15
  16 <body>
  17 <header></header>
  18 <article>
  19
  20 <table><tr><td>
  21
  22 <table width="100%"><tr><td valign=middle align=center><a href="http://libwebsockets.org"><img src="/libwebsockets.org-logo.png"></a></td><td>
  23 <section class="browser">Detected Browser: <div id=brow>...</div></section></td></tr></table>
  24
  25 </td></tr><tr><td>
  26
  27 <section id="increment" class="group2">
  28 <div class="title">libwebsockets "dumb-increment-protocol"</div>
  29 <table><tr><td>
  30 <table class="content" width="200px">
  31                 <tr><td align=center><input type=button id=offset value="Reset counter" onclick="reset();" ></td></tr>
  32                 <tr><td width=200px align=center><div id=number> </div></td></tr>
  33                 <tr><td id=wsdi_statustd align=center class="explain"><div id=wsdi_status>Not initialized</div></td></tr>
  34         </tr>
  35 </table>
  36 </td><td class="explain">
  37 The incrementing number is coming from the server and is individual for
  38 each connection to the server... try opening a second browser window.
  39 <br/><br/>
  40 The button zeros just this connection's number.
  41 <br/><br/>
  42 Click <a href="/leaf.jpg" target="_blank">Here</a> to have the test server send a big picture by http.
  43 </td></tr></table>
  44 </section>
  45 <br>
  46 <section id="mirror" class="group2">
  47 <div class="title">libwebsockets "lws-mirror-protocol"</div>
  48 <div class="explain">
  49 Use the mouse to draw on the canvas below -- all other browser windows open
  50 on this page see your drawing in realtime and you can see any of theirs as
  51 well.
  52 <br/><br/>
  53 The lws-mirror protocol doesn't interpret what is being sent to it, it just
  54 re-sends it to every other websocket it has a connection with using that
  55 protocol, including the guy who sent the packet.
  56 <br/><br/>
  57 <b>libwebsockets-test-client</b> joins in by spamming circles on to this shared canvas when
  58 run.
  59 </div>
  60 <table class="content">
  61         <tr>
  62                 <td>Drawing color:
  63                 <select id="color" onchange="update_color();">
  64                         <option value=#000000>Black</option>
  65                         <option value=#0000ff>Blue</option>
  66                         <option value=#20ff20>Green</option>
  67                         <option value=#802020>Dark Red</option>
  68                 </select>
  69                 </td>
  70                 <td id=wslm_statustd align=center class="explain"><div id=wslm_status>Not initialized</div></td>
  71         </tr>
  72         <tr>
  73                 <td colspan=2 width=500 class="content">
  74                 <div id="wslm_drawing">
  75                 </div></td>
  76         </tr>
  77 </table>
  78 </section>
  79
  80 <section id="ot" class="group2">
  81 <div class="title">libwebsockets "open and close testing"</div>
  82 <table><tr><td>
  83 <table class="content" width="200px">
  84                 <tr>
  85                 <td align=center><input type=button id=ot_open_btn value="Open" onclick="ot_open();" ></td>
  86                 <td align=center><input type=button id=ot_close_btn disabled value="Close" onclick="ot_close();" ></td>
  87                 <td align=center><input type=button id=ot_req_close_btn disabled value="Request Server Close" onclick="ot_req_close();" ></td>
  88                 </tr>
  89                 <tr><td colspan="3" id=ot_statustd align=center class="explain"><div id=ot_status>Not initialized</div></td></tr>
  90         </tr>
  91 </table>
  92 </td><td class="explain">
  93 To help with open and close testing, you can open and close a connection by hand using
  94  the buttons.  "Request Server Close" sends a message asking the server to
  95 initiate the close.
  96 </td></tr></table>
  97 </section>
  98 <br>
  99
 100 </td></tr><tr><td>
 101 Looking for support? <a href="http://libwebsockets.org">http://libwebsockets.org</a><br/>
 102 Join the mailing list: <a href="http://ml.libwebsockets.org/mailman/listinfo/libwebsockets">http://ml.libwebsockets.org/mailman/listinfo/libwebsockets</a>
 103
 104 </td></tr></table>
 105
 106 </article>
 107
 108 <script>
 109
 110 /* BrowserDetect came from http://www.quirksmode.org/js/detect.html */
 111
 112 var BrowserDetect = {
 113         init: function () {
 114                 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
 115                 this.version = this.searchVersion(navigator.userAgent)
 116                         || this.searchVersion(navigator.appVersion)
 117                         || "an unknown version";
 118                 this.OS = this.searchString(this.dataOS) || "an unknown OS";
 119         },
 120         searchString: function (data) {
 121                 for (var i=0;i<data.length;i++) {
 122                         var dataString = data[i].string;
 123                         var dataProp = data[i].prop;
 124                         this.versionSearchString = data[i].versionSearch || data[i].identity;
 125                         if (dataString) {
 126                                 if (dataString.indexOf(data[i].subString) != -1)
 127                                         return data[i].identity;
 128                         }
 129                         else if (dataProp)
 130                                 return data[i].identity;
 131                 }
 132         },
 133         searchVersion: function (dataString) {
 134                 var index = dataString.indexOf(this.versionSearchString);
 135                 if (index == -1) return;
 136                 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
 137         },
 138         dataBrowser: [
 139                 {
 140                         string: navigator.userAgent,
 141                         subString: "Chrome",
 142                         identity: "Chrome"
 143                 },
 144                 {       string: navigator.userAgent,
 145                         subString: "OmniWeb",
 146                         versionSearch: "OmniWeb/",
 147                         identity: "OmniWeb"
 148                 },
 149                 {
 150                         string: navigator.vendor,
 151                         subString: "Apple",
 152                         identity: "Safari",
 153                         versionSearch: "Version"
 154                 },
 155                 {
 156                         prop: window.opera,
 157                         identity: "Opera",
 158                         versionSearch: "Version"
 159                 },
 160                 {
 161                         string: navigator.vendor,
 162                         subString: "iCab",
 163                         identity: "iCab"
 164                 },
 165                 {
 166                         string: navigator.vendor,
 167                         subString: "KDE",
 168                         identity: "Konqueror"
 169                 },
 170                 {
 171                         string: navigator.userAgent,
 172                         subString: "Firefox",
 173                         identity: "Firefox"
 174                 },
 175                 {
 176                         string: navigator.vendor,
 177                         subString: "Camino",
 178                         identity: "Camino"
 179                 },
 180                 {               // for newer Netscapes (6+)
 181                         string: navigator.userAgent,
 182                         subString: "Netscape",
 183                         identity: "Netscape"
 184                 },
 185                 {
 186                         string: navigator.userAgent,
 187                         subString: "MSIE",
 188                         identity: "Explorer",
 189                         versionSearch: "MSIE"
 190                 },
 191                 {
 192                         string: navigator.userAgent,
 193                         subString: "Gecko",
 194                         identity: "Mozilla",
 195                         versionSearch: "rv"
 196                 },
 197                 {               // for older Netscapes (4-)
 198                         string: navigator.userAgent,
 199                         subString: "Mozilla",
 200                         identity: "Netscape",
 201                         versionSearch: "Mozilla"
 202                 }
 203         ],
 204         dataOS : [
 205                 {
 206                         string: navigator.platform,
 207                         subString: "Win",
 208                         identity: "Windows"
 209                 },
 210                 {
 211                         string: navigator.platform,
 212                         subString: "Mac",
 213                         identity: "Mac"
 214                 },
 215                 {
 216                            string: navigator.userAgent,
 217                            subString: "iPhone",
 218                            identity: "iPhone/iPod"
 219             },
 220                 {
 221                         string: navigator.platform,
 222                         subString: "Linux",
 223                         identity: "Linux"
 224                 }
 225         ]
 226
 227 };
 228 BrowserDetect.init();
 229
 230 document.getElementById("brow").textContent = " " + BrowserDetect.browser + " "
 231         + BrowserDetect.version +" " + BrowserDetect.OS +" ";
 232
 233         var pos = 0;
 234
 235 function get_appropriate_ws_url()
 236 {
 237         var pcol;
 238         var u = document.URL;
 239
 240         /*
 241          * We open the websocket encrypted if this page came on an
 242          * https:// url itself, otherwise unencrypted
 243          */
 244
 245         if (u.substring(0, 5) == "https") {
 246                 pcol = "wss://";
 247                 u = u.substr(8);
 248         } else {
 249                 pcol = "ws://";
 250                 if (u.substring(0, 4) == "http")
 251                         u = u.substr(7);
 252         }
 253
 254         u = u.split('/');
 255
 256         /* + "/xxx" bit is for IE10 workaround */
 257
 258         return pcol + u[0] + "/xxx";
 259 }
 260
 261
 262 document.getElementById("number").textContent = get_appropriate_ws_url();
 263
 264 /* dumb increment protocol */
 265
 266         var socket_di;
 267
 268         if (typeof MozWebSocket != "undefined") {
 269                 socket_di = new MozWebSocket(get_appropriate_ws_url(),
 270                                    "dumb-increment-protocol");
 271         } else {
 272                 socket_di = new WebSocket(get_appropriate_ws_url(),
 273                                    "dumb-increment-protocol");
 274         }
 275
 276
 277         try {
 278                 socket_di.onopen = function() {
 279                         document.getElementById("wsdi_statustd").style.backgroundColor = "#40ff40";
 280                         document.getElementById("wsdi_status").innerHTML = " <b>websocket connection opened</b><br>" + socket_di.extensions;
 281                 }
 282
 283                 socket_di.onmessage =function got_packet(msg) {
 284                         document.getElementById("number").textContent = msg.data + "\n";
 285                 }
 286
 287                 socket_di.onclose = function(){
 288                         document.getElementById("wsdi_statustd").style.backgroundColor = "#ff4040";
 289                         document.getElementById("wsdi_status").textContent = " websocket connection CLOSED ";
 290                 }
 291         } catch(exception) {
 292                 alert('<p>Error' + exception);
 293         }
 294
 295 function reset() {
 296         socket_di.send("reset\n");
 297 }
 298
 299 var socket_ot;
 300
 301 function ot_open() {
 302         if (typeof MozWebSocket != "undefined") {
 303                 socket_ot = new MozWebSocket(get_appropriate_ws_url(),
 304                                    "dumb-increment-protocol");
 305         } else {
 306                 socket_ot = new WebSocket(get_appropriate_ws_url(),
 307                                    "dumb-increment-protocol");
 308         }
 309         try {
 310                 socket_ot.onopen = function() {
 311                         document.getElementById("ot_statustd").style.backgroundColor = "#40ff40";
 312                         document.getElementById("ot_status").innerHTML = " <b>websocket connection opened</b><br>" + socket_di.extensions;
 313                         document.getElementById("ot_open_btn").disabled = true;
 314                         document.getElementById("ot_close_btn").disabled = false;
 315                         document.getElementById("ot_req_close_btn").disabled = false;
 316                 }
 317
 318                 socket_ot.onclose = function(e){
 319                         document.getElementById("ot_statustd").style.backgroundColor = "#ff4040";
 320                         document.getElementById("ot_status").textContent = " websocket connection CLOSED, code: " + e.code +
 321                         ", reason: " + e.reason;
 322                         document.getElementById("ot_open_btn").disabled = false;
 323                         document.getElementById("ot_close_btn").disabled = true;
 324                         document.getElementById("ot_req_close_btn").disabled = true;
 325                 }
 326         } catch(exception) {
 327                 alert('<p>Error' + exception);
 328         }
 329 }
 330
 331 /* browser will close the ws in a controlled way */
 332 function ot_close() {
 333         socket_ot.close(3000, "Bye!");
 334 }
 335
 336 /* we ask the server to close the ws in a controlled way */
 337 function ot_req_close() {
 338         socket_ot.send("closeme\n");
 339 }
 340
 341 /* lws-mirror protocol */
 342
 343         var down = 0;
 344         var no_last = 1;
 345         var last_x = 0, last_y = 0;
 346         var ctx;
 347         var socket_lm;
 348         var color = "#000000";
 349
 350         if (typeof MozWebSocket != "undefined") {
 351                 socket_lm = new MozWebSocket(get_appropriate_ws_url(),
 352                                    "lws-mirror-protocol");
 353         } else {
 354                 socket_lm = new WebSocket(get_appropriate_ws_url(),
 355                                    "lws-mirror-protocol");
 356         }
 357
 358
 359         try {
 360                 socket_lm.onopen = function() {
 361                         document.getElementById("wslm_statustd").style.backgroundColor = "#40ff40";
 362                         document.getElementById("wslm_status").innerHTML = " <b>websocket connection opened</b><br>" + socket_di.extensions;
 363                 }
 364
 365                 socket_lm.onmessage =function got_packet(msg) {
 366                         j = msg.data.split(';');
 367                         f = 0;
 368                         while (f < j.length - 1) {
 369                                 i = j[f].split(' ');
 370                                 if (i[0] == 'd') {
 371                                         ctx.strokeStyle = i[1];
 372                                         ctx.beginPath();
 373                                         ctx.moveTo(+(i[2]), +(i[3]));
 374                                         ctx.lineTo(+(i[4]), +(i[5]));
 375                                         ctx.stroke();
 376                                 }
 377                                 if (i[0] == 'c') {
 378                                         ctx.strokeStyle = i[1];
 379                                         ctx.beginPath();
 380                                         ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true);
 381                                         ctx.stroke();
 382                                 }
 383
 384                                 f++;
 385                         }
 386                 }
 387
 388                 socket_lm.onclose = function(){
 389                         document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
 390                         document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
 391                 }
 392         } catch(exception) {
 393                 alert('<p>Error' + exception);
 394         }
 395
 396         var canvas = document.createElement('canvas');
 397         canvas.height = 300;
 398         canvas.width = 480;
 399         ctx = canvas.getContext("2d");
 400
 401         document.getElementById('wslm_drawing').appendChild(canvas);
 402
 403         canvas.addEventListener('mousemove', ev_mousemove, false);
 404         canvas.addEventListener('mousedown', ev_mousedown, false);
 405         canvas.addEventListener('mouseup', ev_mouseup, false);
 406
 407         offsetX = offsetY = 0;
 408         element = canvas;
 409       if (element.offsetParent) {
 410         do {
 411           offsetX += element.offsetLeft;
 412           offsetY += element.offsetTop;
 413         } while ((element = element.offsetParent));
 414       }
 415
 416 function update_color() {
 417         color = document.getElementById("color").value;
 418 }
 419
 420 function ev_mousedown (ev) {
 421         down = 1;
 422 }
 423
 424 function ev_mouseup(ev) {
 425         down = 0;
 426         no_last = 1;
 427 }
 428
 429 function ev_mousemove (ev) {
 430         var x, y;
 431
 432         if (ev.offsetX) {
 433                 x = ev.offsetX;
 434                 y = ev.offsetY;
 435         } else {
 436                 x = ev.layerX - offsetX;
 437                 y = ev.layerY - offsetY;
 438
 439         }
 440
 441         if (!down)
 442                 return;
 443         if (no_last) {
 444                 no_last = 0;
 445                 last_x = x;
 446                 last_y = y;
 447                 return;
 448         }
 449         socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y + ';');
 450
 451         last_x = x;
 452         last_y = y;
 453 }
 454
 455
 456 </script>
 457
 458 </body>
 459 </html>