test-server/test.html

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