<!DOCTYPE html>
< meta charset = "utf-8" / >
< head >
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
< meta name = "viewport" content = "user-scalable=no, width=device-width" / >
< title > WebSocket Test< / title >
< style type = "text/css" >
body {
font-size: 16pt;
margin: 0px;
overflow: hidden;
height: 100%;
}
#circle_of_people {
position: absolute;
background-color: #fda;
width: 320px;
height: 480px;
opacity: 0.1;
border: 1px solid black;
}
.user {
-webkit-transition: left 0.5s linear, top 0.5s linear;
position: absolute;
}
.user .bullet {
width: 10px;
height: 10px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 5px;
background-color: #f00;
}
.user .name {
border-radius: 2px;
font-size: 12px;
padding: 2px;
background-color: #0af;
}
#svgscreen {
background-color: #adf;
position: absolute;
width: 320px;
height: 480px;
}
#svgscreen line {
stroke: rgb(255,0,0);
stroke-width: 2;
}
< / style >
< script type = "text/javascript" src = "connection.js" > < / script >
< script type = "text/javascript" src = "websocket.js" > < / script >
< script type = "text/javascript" src = "drawing.js" > < / script >
< script type = "text/javascript" src = "rendering.js" > < / script >
< script language = "javascript" type = "text/javascript" >
var myName = Math.random().toString(36).substring(7);
var websocket;
var circle;
var svgscreen;
var current_svgline;
function init() {
var statusbar = document.getElementById('status');
circle = document.getElementById("circle_of_people");
document.getElementById("myName").innerHTML = myName;
svgscreen = document.getElementById("svgscreen");
if ("WebSocket" in window){
init_drawing(circle, drawStart, drawMove, drawEnd, drawRemove);
init_websocket(statusbar, onOpen, onMessage);
} else {
statusbar.innerHTML = 'No websockets :(. This means that you either use < em > Internet Explorer< / em > or < em > Android< / em > . In both cases, I suggest that you use < a href = "http://www.google.com/chrome/" > Chrome< / a > or < a href = "http://www.getfirefox.net/" > Firefox< / a > !';
}
}
function onOpen(evt) {
doSend();
}
function onMessage(evt) {
var people = JSON.parse(evt.data);
for (var i = people.length - 1; i >= 0; i--) {
var user = document.getElementById(people[i].name);
if(user){
user.style.left = people[i].position.x + "px";
user.style.top = people[i].position.y + "px";
} else {
var name = document.createElement('span')
name.className = "name";
name.innerText = people[i].name;
var user = document.createElement('div');
user.id = people[i].name;
user.className = 'user';
user.innerHTML = '< div class = "bullet" > < / div > ';
user.appendChild(name);
user.style.left = people[i].position.x + "px";
user.style.top = people[i].position.y + "px";
circle.appendChild(user);
}
}
var nodes = circle.childNodes;
for(var i = nodes.length -1; i >= 0; i--) {
var should_remove = true;
for (var j = people.length - 1; j >= 0; j--){
if(people[j].name == nodes[i].id) {
should_remove = false;
break;
}
}
if(should_remove){
circle.removeChild(nodes[i]);
}
}
setTimeout(function(){
doSend();
}, 500);
}
function drawStart(line){
current_svgline = addLine(line, svgscreen);
}
function drawMove(line){
updateLine(current_svgline, line);
}
function drawEnd(line){
console.log(JSON.stringify(line));
drawRemove(line);
}
function drawRemove(line){
if(current_svgline){
svgscreen.removeChild(current_svgline);
current_svgline = null;
}
}
function doSend(message) {
var myself = {
name: myName,
size: {width: window.innerWidth, height: window.innerHeight}
};
websocket.send(JSON.stringify(myself));
}
window.addEventListener("load", init, false);
setTimeout(function (){
window.scrollTo(0, 1);
}, 0);
< / script >
< / head >
< body ontouchmove = "prevent_scrolling(event);" >
< p > My name is: < span id = "myName" > < / span > < / p >
< p > Status: < span id = "status" > CONNECTING...< / span > < / p >
< svg id = "svgscreen" xmlns = "http://www.w3.org/2000/svg" version = "1.1" > < / svg >
< div id = "circle_of_people" > < / div >
< / body >
< / html >
