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>
118