joshua
/
beats-website
Archived
1
0
Fork 0
Code Releases Activity
Browse Source

Created nice observer

master
Joshua Moerman 12 years ago
parent
c9128789c1
commit
aaa00ff806
1 changed files with 49 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 51
      observer.html

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>