ceph/src/civetweb/test/websocket.xhtml

   1 <!DOCTYPE HTML>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4   <meta charset="UTF-8"></meta>
   5   <title>Websocket test</title>
   6   <style type="text/css" media="screen">
   7     body { background:#eee; margin:0 }
   8     .main {
   9       display:block; border:1px solid #ccc; position:absolute;
  10       top:5%; left:5%; width:90%; height:90%; background:#fff;
  11     }
  12   </style>
  13 </head>
  14 <body>
  15   <script type="text/javascript"><![CDATA[
  16
  17     var connection;
  18     var websock_text_field;
  19     var hand_hour;
  20     var hand_min;
  21
  22     function queryStringElem(name, idx) {
  23       if (typeof(queryStringElem_Table) != "object") {
  24         queryStringElem_Table = {};
  25         window.location.search.slice(1).split('&').forEach(
  26           function(keyValuePair) {
  27             keyValuePair = keyValuePair.split('=');
  28             if (typeof(queryStringElem_Table[keyValuePair[0]]) != "object") {
  29               queryStringElem_Table[keyValuePair[0]] = [];
  30             }
  31             var idx = queryStringElem_Table[keyValuePair[0]].length+1;
  32             queryStringElem_Table[keyValuePair[0]][idx] = keyValuePair[1] || '';
  33           }
  34         );
  35       }
  36       idx = idx || 1;
  37       if (queryStringElem_Table[name]) {
  38         return queryStringElem_Table[name][idx];
  39       }
  40       return null;
  41     }
  42
  43     function webSockKeepAlive() {
  44       if (keepAlive) {
  45         connection.send('client still alive');
  46         console.log('send keep alive')
  47         setTimeout("webSockKeepAlive()", 10000);
  48       }
  49     }
  50
  51     function load() {
  52       var wsproto = (location.protocol === 'https:') ? "wss:" : "ws:";
  53       connection = new WebSocket(wsproto + "//" + window.location.host + "/websocket.lua");
  54       websock_text_field = document.getElementById('websock_text_field');
  55       hand_min = document.getElementById('hand_min');
  56       hand_hour = document.getElementById('hand_hour');
  57
  58       var ka = queryStringElem("keepAlive");
  59       if (ka) {
  60         ka = ka.toLowerCase();
  61         use_keepAlive = (ka!="false") && (ka!="f") && (ka!="no") && (ka!="n") && (ka!=0);
  62       } else {
  63         use_keepAlive = true;
  64       }
  65
  66       connection.onopen = function () {
  67         keepAlive = use_keepAlive;
  68         webSockKeepAlive();
  69       };
  70
  71       // Log errors
  72       connection.onerror = function (error) {
  73         keepAlive = false;
  74         alert("WebSocket error");
  75         connection.close();
  76       };
  77
  78       // Log messages from the server
  79       connection.onmessage = function (e) {
  80         var lCmd = e.data.substring(0,3);
  81         if (lCmd == "-->") {
  82           console.log(e.data);
  83           var lDirection = Number(e.data.substring(5));
  84           if (e.data[3] == 'h') {
  85             hand_hour.setAttribute("transform", "rotate(" + lDirection + " 800 600)");
  86           }
  87           if (e.data[3] == 'm') {
  88             hand_min.setAttribute("transform", "rotate(" + lDirection + " 800 600)");
  89           }
  90         } else {
  91           websock_text_field.textContent = e.data;
  92         }
  93       };
  94
  95       console.log("load");
  96     }
  97
  98   ]]></script>
  99
 100 <svg class="main"
 101   xmlns="http://www.w3.org/2000/svg"
 102   xmlns:svg="http://www.w3.org/2000/svg"
 103   version="1.1"
 104   xmlns:xlink="http://www.w3.org/1999/xlink"
 105   viewBox="0 0 1600 1200" preserveAspectRatio="xMinYMin meet"
 106   onload="load()"
 107   >
 108
 109   <circle id="line_a" cx="800" cy="600" r="500" style="stroke:rgb(255,0,0); stroke-width:5; fill:rgb(200,200,200)"/>
 110   <polygon points="800,200 900,300 850,300 850,600 750,600 750,300 700,300" style="fill:rgb(100,0,0)" transform="rotate(0,800,600)" id="hand_hour"/>
 111   <polygon points="800,100 840,200 820,200 820,600 780,600 780,200 760,200" style="fill:rgb(0,100,0)" transform="rotate(0,800,600)" id="hand_min"/>
 112   <text id="websock_text_field" x="800" y="600" text-anchor="middle" font-size="50px" fill="red">No websocket connection yet</text>
 113
 114 </svg>
 115
 116 </body>
 117 </html>