--- /dev/null
+<!DOCTYPE HTML>\r
+<html xmlns="http://www.w3.org/1999/xhtml">\r
+<head>\r
+ <meta charset="UTF-8"></meta>\r
+ <title>Websocket test</title>\r
+ <style type="text/css" media="screen">\r
+ body { background:#eee; margin:0 }\r
+ .main {\r
+ display:block; border:1px solid #ccc; position:absolute;\r
+ top:5%; left:5%; width:90%; height:90%; background:#fff;\r
+ }\r
+ </style>\r
+</head>\r
+<body>\r
+ <script type="text/javascript"><![CDATA[\r
+\r
+ var connection;\r
+ var websock_text_field;\r
+ var hand_hour;\r
+ var hand_min;\r
+\r
+ function queryStringElem(name, idx) {\r
+ if (typeof(queryStringElem_Table) != "object") {\r
+ queryStringElem_Table = {};\r
+ window.location.search.slice(1).split('&').forEach(\r
+ function(keyValuePair) {\r
+ keyValuePair = keyValuePair.split('=');\r
+ if (typeof(queryStringElem_Table[keyValuePair[0]]) != "object") {\r
+ queryStringElem_Table[keyValuePair[0]] = [];\r
+ }\r
+ var idx = queryStringElem_Table[keyValuePair[0]].length+1;\r
+ queryStringElem_Table[keyValuePair[0]][idx] = keyValuePair[1] || '';\r
+ }\r
+ );\r
+ }\r
+ idx = idx || 1;\r
+ if (queryStringElem_Table[name]) {\r
+ return queryStringElem_Table[name][idx];\r
+ }\r
+ return null;\r
+ }\r
+\r
+ function webSockKeepAlive() {\r
+ if (keepAlive) {\r
+ connection.send('client still alive');\r
+ console.log('send keep alive')\r
+ setTimeout("webSockKeepAlive()", 10000);\r
+ }\r
+ }\r
+\r
+ function load() {\r
+ var wsproto = (location.protocol === 'https:') ? "wss:" : "ws:";\r
+ connection = new WebSocket(wsproto + "//" + window.location.host + "/websocket.lua");\r
+ websock_text_field = document.getElementById('websock_text_field');\r
+ hand_min = document.getElementById('hand_min');\r
+ hand_hour = document.getElementById('hand_hour');\r
+\r
+ var ka = queryStringElem("keepAlive");\r
+ if (ka) {\r
+ ka = ka.toLowerCase();\r
+ use_keepAlive = (ka!="false") && (ka!="f") && (ka!="no") && (ka!="n") && (ka!=0);\r
+ } else {\r
+ use_keepAlive = true;\r
+ }\r
+\r
+ connection.onopen = function () {\r
+ keepAlive = use_keepAlive;\r
+ webSockKeepAlive();\r
+ };\r
+\r
+ // Log errors\r
+ connection.onerror = function (error) {\r
+ keepAlive = false;\r
+ alert("WebSocket error");\r
+ connection.close();\r
+ };\r
+\r
+ // Log messages from the server\r
+ connection.onmessage = function (e) {\r
+ var lCmd = e.data.substring(0,3);\r
+ if (lCmd == "-->") {\r
+ console.log(e.data);\r
+ var lDirection = Number(e.data.substring(5));\r
+ if (e.data[3] == 'h') {\r
+ hand_hour.setAttribute("transform", "rotate(" + lDirection + " 800 600)");\r
+ }\r
+ if (e.data[3] == 'm') {\r
+ hand_min.setAttribute("transform", "rotate(" + lDirection + " 800 600)");\r
+ }\r
+ } else {\r
+ websock_text_field.textContent = e.data;\r
+ }\r
+ };\r
+\r
+ console.log("load");\r
+ }\r
+\r
+ ]]></script>\r
+\r
+<svg class="main"\r
+ xmlns="http://www.w3.org/2000/svg"\r
+ xmlns:svg="http://www.w3.org/2000/svg"\r
+ version="1.1"\r
+ xmlns:xlink="http://www.w3.org/1999/xlink"\r
+ viewBox="0 0 1600 1200" preserveAspectRatio="xMinYMin meet"\r
+ onload="load()"\r
+ >\r
+\r
+ <circle id="line_a" cx="800" cy="600" r="500" style="stroke:rgb(255,0,0); stroke-width:5; fill:rgb(200,200,200)"/>\r
+ <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"/>\r
+ <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"/>\r
+ <text id="websock_text_field" x="800" y="600" text-anchor="middle" font-size="50px" fill="red">No websocket connection yet</text>\r
+\r
+</svg>\r
+\r
+</body>\r
+</html>\r
projects / ceph.git / blobdiff