|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>WebSocket Test</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
body {
|
|
|
|
|
font-size: 16pt;
|
|
|
|
|
}
|
|
|
|
|
#screen {
|
|
|
|
|
background-color: #fda;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
width: 1280px;
|
|
|
|
|
height: 800px;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
#svgscreen {
|
|
|
|
|
background-color: #adf;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
#svgscreen line {
|
|
|
|
|
stroke: rgb(255,0,0);
|
|
|
|
|
stroke-width: 2;
|
|
|
|
|
}
|
|
|
|
|
.user {
|
|
|
|
|
border: 3px solid #0af;
|
|
|
|
|
text-align: right;
|
|
|
|
|
position: absolute;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
.user .name {
|
|
|
|
|
padding: 4px;
|
|
|
|
|
background-color: #0af;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript" src="connection.js"></script>
|
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
|
|
|
var websocket;
|
|
|
|
|
var svgscreen;
|
|
|
|
|
var peoplescreen;
|
|
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
|
svgscreen = document.getElementById("svgscreen");
|
|
|
|
|
peoplescreen = document.getElementById("people");
|
|
|
|
|
testWebSocket();
|
|
|
|
|
}
|
|
|
|
|
function testWebSocket() {
|
|
|
|
|
websocket = new WebSocket(wsURI, "observer");
|
|
|
|
|
websocket.onopen = function (evt) { onOpen(evt) };
|
|
|
|
|
websocket.onclose = function (evt) { onClose(evt) };
|
|
|
|
|
websocket.onmessage = function (evt) { onMessage(evt) };
|
|
|
|
|
websocket.onerror = function (evt) { onError(evt) };
|
|
|
|
|
}
|
|
|
|
|
function onOpen(evt) {
|
|
|
|
|
document.getElementById("status").innerHTML = "CONNECTED";
|
|
|
|
|
// needs to be non-empty
|
|
|
|
|
websocket.send("a");
|
|
|
|
|
}
|
|
|
|
|
function onMessage(evt) {
|
|
|
|
|
var ret = JSON.parse(evt.data);
|
|
|
|
|
|
|
|
|
|
var lines = ret.lines;
|
|
|
|
|
for (var i = lines.length - 1; i >= 0; i--) {
|
|
|
|
|
addLine(lines[i], svgscreen);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var people = ret.people;
|
|
|
|
|
peoplescreen.innerHTML = '';
|
|
|
|
|
for (var i = people.length - 1; i >= 0; i--) {
|
|
|
|
|
var name = document.createElement('span');
|
|
|
|
|
name.className = "name";
|
|
|
|
|
name.innerText = people[i].name;
|
|
|
|
|
|
|
|
|
|
var user = document.createElement('div');
|
|
|
|
|
user.className = 'user';
|
|
|
|
|
user.appendChild(name);
|
|
|
|
|
user.style.width = people[i].size.width + "px";
|
|
|
|
|
user.style.height = people[i].size.height + "px";
|
|
|
|
|
|
|
|
|
|
peoplescreen.appendChild(user);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
//websocket.send("a");
|
|
|
|
|
}, 500);
|
|
|
|
|
}
|
|
|
|
|
function onError(evt) {
|
|
|
|
|
document.getElementById("status").innerHTML = 'ERROR: ' + evt.data;
|
|
|
|
|
}
|
|
|
|
|
function onClose(evt) {
|
|
|
|
|
document.getElementById("status").innerHTML = "DISCONNECTED";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addLine(line, sgvelement){
|
|
|
|
|
var svgline = document.createElementNS('http://www.w3.org/2000/svg','line');
|
|
|
|
|
svgline.setAttribute('x1', line.starting_point.x);
|
|
|
|
|
svgline.setAttribute('y1', line.starting_point.y);
|
|
|
|
|
svgline.setAttribute('x2', line.end_point.x);
|
|
|
|
|
svgline.setAttribute('y2', line.end_point.y);
|
|
|
|
|
|
|
|
|
|
sgvelement.appendChild(svgline);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener("load", init, false);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<p>Status: <span id="status">unknown</span>
|
|
|
|
|
|
|
|
|
|
<div id="screen">
|
|
|
|
|
|
|
|
|
|
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
|
|
|
|
|
<div id="people"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</html>
|
