|
|
@@ -0,0 +1,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_not_found.xyz");
|
|
|
+ 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>
|
bel2125