<!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; } .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"> var websocket; var the_screen; function init() { the_screen = document.getElementById("screen"); testWebSocket(); } function testWebSocket() { websocket = new WebSocket("ws://127.0.0.1:7681", "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 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) { document.getElementById("status").innerHTML = 'ERROR: ' + evt.data; } function onClose(evt) { document.getElementById("status").innerHTML = "DISCONNECTED"; } window.addEventListener("load", init, false); </script> <p>Response of server: <span id="people"></span> <p>Status: <span id="status">unknown</span> <div id="screen"> </div> </html>