mirror of
https://github.com/civetweb/civetweb
synced 2025-03-28 21:13:27 +00:00
118 lines
3.8 KiB
HTML
118 lines
3.8 KiB
HTML
<!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>
|