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