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