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