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 Click the button to send the server a websocket message to
  41 reset the number.
  42 </td></tr></table>
  43 </section>
  44 <br>
  45 <section id="mirror" class="group2">
  46 <div class="title">libwebsockets "lws-mirror-protocol"</div>
  47 <div class="explain">
  48 Use the mouse to draw on the canvas below -- all other browser windows open
  49 on this page see your drawing in realtime and you can see any of theirs as
  50 well.
  51 <br/><br/>
  52 The lws-mirror protocol doesn't interpret what is being sent to it, it just
  53 re-sends it to every other websocket it has a connection with using that
  54 protocol, including the guy who sent the packet.
  55 <br/><br/>
  56 <b>libwebsockets-test-client</b> joins in by spamming circles on to this shared canvas when
  57 run.
  58 </div>
  59 <table class="content">
  60         <tr>
  61                 <td>Drawing color:
  62                 <select id="color" onchange="update_color();">
  63                         <option value=#000000>Black</option>
  64                         <option value=#0000ff>Blue</option>
  65                         <option value=#20ff20>Green</option>
  66                         <option value=#802020>Dark Red</option>
  67                 </select>
  68                 </td>
  69                 <td id=wslm_statustd align=center class="explain"><div id=wslm_status>Not initialized</div></td>
  70         </tr>
  71         <tr>
  72                 <td colspan=2 width=500 class="content">
  73                 <div id="wslm_drawing">
  74                 </div></td>
  75         </tr>
  76 </table>
  77 </section>
  78
  79 </td></tr><tr><td>
  80 Looking for support? <a href="http://libwebsockets.org">http://libwebsockets.org</a><br/>
  81 Join the mailing list: <a href="http://ml.libwebsockets.org/mailman/listinfo/libwebsockets">http://ml.libwebsockets.org/mailman/listinfo/libwebsockets</a>
  82
  83 </td></tr></table>
  84
  85 </article>
  86
  87 <script>
  88
  89 /* BrowserDetect came from http://www.quirksmode.org/js/detect.html */
  90
  91 var BrowserDetect = {
  92         init: function () {
  93                 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  94                 this.version = this.searchVersion(navigator.userAgent)
  95                         || this.searchVersion(navigator.appVersion)
  96                         || "an unknown version";
  97                 this.OS = this.searchString(this.dataOS) || "an unknown OS";
  98         },
  99         searchString: function (data) {
 100                 for (var i=0;i<data.length;i++) {
 101                         var dataString = data[i].string;
 102                         var dataProp = data[i].prop;
 103                         this.versionSearchString = data[i].versionSearch || data[i].identity;
 104                         if (dataString) {
 105                                 if (dataString.indexOf(data[i].subString) != -1)
 106                                         return data[i].identity;
 107                         }
 108                         else if (dataProp)
 109                                 return data[i].identity;
 110                 }
 111         },
 112         searchVersion: function (dataString) {
 113                 var index = dataString.indexOf(this.versionSearchString);
 114                 if (index == -1) return;
 115                 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
 116         },
 117         dataBrowser: [
 118                 {
 119                         string: navigator.userAgent,
 120                         subString: "Chrome",
 121                         identity: "Chrome"
 122                 },
 123                 {       string: navigator.userAgent,
 124                         subString: "OmniWeb",
 125                         versionSearch: "OmniWeb/",
 126                         identity: "OmniWeb"
 127                 },
 128                 {
 129                         string: navigator.vendor,
 130                         subString: "Apple",
 131                         identity: "Safari",
 132                         versionSearch: "Version"
 133                 },
 134                 {
 135                         prop: window.opera,
 136                         identity: "Opera",
 137                         versionSearch: "Version"
 138                 },
 139                 {
 140                         string: navigator.vendor,
 141                         subString: "iCab",
 142                         identity: "iCab"
 143                 },
 144                 {
 145                         string: navigator.vendor,
 146                         subString: "KDE",
 147                         identity: "Konqueror"
 148                 },
 149                 {
 150                         string: navigator.userAgent,
 151                         subString: "Firefox",
 152                         identity: "Firefox"
 153                 },
 154                 {
 155                         string: navigator.vendor,
 156                         subString: "Camino",
 157                         identity: "Camino"
 158                 },
 159                 {               // for newer Netscapes (6+)
 160                         string: navigator.userAgent,
 161                         subString: "Netscape",
 162                         identity: "Netscape"
 163                 },
 164                 {
 165                         string: navigator.userAgent,
 166                         subString: "MSIE",
 167                         identity: "Explorer",
 168                         versionSearch: "MSIE"
 169                 },
 170                 {
 171                         string: navigator.userAgent,
 172                         subString: "Gecko",
 173                         identity: "Mozilla",
 174                         versionSearch: "rv"
 175                 },
 176                 {               // for older Netscapes (4-)
 177                         string: navigator.userAgent,
 178                         subString: "Mozilla",
 179                         identity: "Netscape",
 180                         versionSearch: "Mozilla"
 181                 }
 182         ],
 183         dataOS : [
 184                 {
 185                         string: navigator.platform,
 186                         subString: "Win",
 187                         identity: "Windows"
 188                 },
 189                 {
 190                         string: navigator.platform,
 191                         subString: "Mac",
 192                         identity: "Mac"
 193                 },
 194                 {
 195                            string: navigator.userAgent,
 196                            subString: "iPhone",
 197                            identity: "iPhone/iPod"
 198             },
 199                 {
 200                         string: navigator.platform,
 201                         subString: "Linux",
 202                         identity: "Linux"
 203                 }
 204         ]
 205
 206 };
 207 BrowserDetect.init();
 208
 209 document.getElementById("brow").textContent = " " + BrowserDetect.browser + " "
 210         + BrowserDetect.version +" " + BrowserDetect.OS +" ";
 211
 212         var pos = 0;
 213
 214 function get_appropriate_ws_url()
 215 {
 216         var pcol;
 217         var u = document.URL;
 218
 219         /*
 220          * We open the websocket encrypted if this page came on an
 221          * https:// url itself, otherwise unencrypted
 222          */
 223
 224         if (u.substring(0, 5) == "https") {
 225                 pcol = "wss://";
 226                 u = u.substr(8);
 227         } else {
 228                 pcol = "ws://";
 229                 if (u.substring(0, 4) == "http")
 230                         u = u.substr(7);
 231         }
 232
 233         u = u.split('/');
 234
 235         return pcol + u[0];
 236 }
 237
 238
 239 document.getElementById("number").textContent = get_appropriate_ws_url();
 240
 241 /* dumb increment protocol */
 242
 243         var socket_di;
 244
 245         if (typeof MozWebSocket != "undefined") {
 246                 socket_di = new MozWebSocket(get_appropriate_ws_url(),
 247                                    "dumb-increment-protocol");
 248         } else {
 249                 socket_di = new WebSocket(get_appropriate_ws_url(),
 250                                    "dumb-increment-protocol");
 251         }
 252
 253
 254         try {
 255                 socket_di.onopen = function() {
 256                         document.getElementById("wsdi_statustd").style.backgroundColor = "#40ff40";
 257                         document.getElementById("wsdi_status").textContent = " websocket connection opened ";
 258                 }
 259
 260                 socket_di.onmessage =function got_packet(msg) {
 261                         document.getElementById("number").textContent = msg.data + "\n";
 262                 }
 263
 264                 socket_di.onclose = function(){
 265                         document.getElementById("wsdi_statustd").style.backgroundColor = "#ff4040";
 266                         document.getElementById("wsdi_status").textContent = " websocket connection CLOSED ";
 267                 }
 268         } catch(exception) {
 269                 alert('<p>Error' + exception);
 270         }
 271
 272 function reset() {
 273         socket_di.send("reset\n");
 274 }
 275
 276
 277 /* lws-mirror protocol */
 278
 279         var down = 0;
 280         var no_last = 1;
 281         var last_x = 0, last_y = 0;
 282         var ctx;
 283         var socket_lm;
 284         var color = "#000000";
 285
 286         if (typeof MozWebSocket != "undefined") {
 287                 socket_lm = new MozWebSocket(get_appropriate_ws_url(),
 288                                    "lws-mirror-protocol");
 289         } else {
 290                 socket_lm = new WebSocket(get_appropriate_ws_url(),
 291                                    "lws-mirror-protocol");
 292         }
 293
 294
 295         try {
 296                 socket_lm.onopen = function() {
 297                         document.getElementById("wslm_statustd").style.backgroundColor = "#40ff40";
 298                         document.getElementById("wslm_status").textContent = " websocket connection opened ";
 299                 }
 300
 301                 socket_lm.onmessage =function got_packet(msg) {
 302                         j = msg.data.split(';');
 303                         f = 0;
 304                         while (f < j.length - 1) {
 305                                 i = j[f].split(' ');
 306                                 if (i[0] == 'd') {
 307                                         ctx.strokeStyle = i[1];
 308                                         ctx.beginPath();
 309                                         ctx.moveTo(+(i[2]), +(i[3]));
 310                                         ctx.lineTo(+(i[4]), +(i[5]));
 311                                         ctx.stroke();
 312                                 }
 313                                 if (i[0] == 'c') {
 314                                         ctx.strokeStyle = i[1];
 315                                         ctx.beginPath();
 316                                         ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true);
 317                                         ctx.stroke();
 318                                 }
 319
 320                                 f++;
 321                         }
 322                 }
 323
 324                 socket_lm.onclose = function(){
 325                         document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
 326                         document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
 327                 }
 328         } catch(exception) {
 329                 alert('<p>Error' + exception);
 330         }
 331
 332         var canvas = document.createElement('canvas');
 333         canvas.height = 300;
 334         canvas.width = 480;
 335         ctx = canvas.getContext("2d");
 336
 337         document.getElementById('wslm_drawing').appendChild(canvas);
 338
 339         canvas.addEventListener('mousemove', ev_mousemove, false);
 340         canvas.addEventListener('mousedown', ev_mousedown, false);
 341         canvas.addEventListener('mouseup', ev_mouseup, false);
 342
 343         offsetX = offsetY = 0;
 344         element = canvas;
 345       if (element.offsetParent) {
 346         do {
 347           offsetX += element.offsetLeft;
 348           offsetY += element.offsetTop;
 349         } while ((element = element.offsetParent));
 350       }
 351
 352 function update_color() {
 353         color = document.getElementById("color").value;
 354 }
 355
 356 function ev_mousedown (ev) {
 357         down = 1;
 358 }
 359
 360 function ev_mouseup(ev) {
 361         down = 0;
 362         no_last = 1;
 363 }
 364
 365 function ev_mousemove (ev) {
 366         var x, y;
 367
 368         if (ev.offsetX) {
 369                 x = ev.offsetX;
 370                 y = ev.offsetY;
 371         } else {
 372                 x = ev.layerX - offsetX;
 373                 y = ev.layerY - offsetY;
 374
 375         }
 376
 377         if (!down)
 378                 return;
 379         if (no_last) {
 380                 no_last = 0;
 381                 last_x = x;
 382                 last_y = y;
 383                 return;
 384         }
 385         socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y + ';');
 386
 387         last_x = x;
 388         last_y = y;
 389 }
 390
 391
 392 </script>
 393
 394 </body>
 395 </html>