joshua/beats-website
Archived
1
Fork 0
Code Activity

Created nice observer

Browse source
This commit is contained in:
Joshua Moerman 2013-03-05 10:19:02 +01:00
parent c9128789c1
commit aaa00ff806
1 changed files with 49 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
observer.html
View file

@ -1,11 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>WebSocket Test</title> <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;
}
.user {
border: 3px solid #0af;
text-align: right;
position: absolute;
opacity: 0.5;
}
.user .name {
padding: 4px;
background-color: #0af;
}
</style>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var websocket; var websocket;
var list_of_people; var the_screen;
function init() { function init() {
the_screen = document.getElementById("screen");
testWebSocket(); testWebSocket();
} }
function testWebSocket() { function testWebSocket() {
@ -21,7 +46,26 @@
websocket.send("a"); websocket.send("a");
} }
function onMessage(evt) { function onMessage(evt) {
list_of_people = JSON.parse(evt.data); var people = JSON.parse(evt.data);
the_screen.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].width + "px";
user.style.height = people[i].height + "px";
the_screen.appendChild(user);
};
setTimeout(function(){
websocket.send("a");
}, 500);
} }
function onError(evt) { function onError(evt) {
document.getElementById("status").innerHTML = 'ERROR: ' + evt.data; document.getElementById("status").innerHTML = 'ERROR: ' + evt.data;
@ -36,4 +80,7 @@
<p>Response of server: <span id="people"></span> <p>Response of server: <span id="people"></span>
<p>Status: <span id="status">unknown</span> <p>Status: <span id="status">unknown</span>
<div id="screen">
</div>
</html> </html>