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