mirror of
https://github.com/lammertb/libhttp.git
synced 2025-08-16 11:21:57 +03:00
86 lines
2.7 KiB
HTML
86 lines
2.7 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 webSockKeepAlive() {
|
|
if (keepAlive) {
|
|
connection.send('client still alive');
|
|
setTimeout("webSockKeepAlive()", 10000);
|
|
}
|
|
}
|
|
|
|
function load() {
|
|
connection = new WebSocket("ws://" + 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');
|
|
|
|
connection.onopen = function () {
|
|
keepAlive = true;
|
|
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;
|
|
}
|
|
};
|
|
}
|
|
|
|
]]></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>
|