Peter Lubbers - Pro HTML 5 Programming

156
CHAPTER 6 ■ USING THE HTML5 WEBSOCKET API
That’s it. Bi-directional browser communication made simple. For completeness, Listing 6-8 shows
the entire HTML page with the WebSocket code.
Listing 6-8. websocket.html code
WebSocket Test Page
var log = function(s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("output").innerHTML += (s + "\n");
}
}
log.buffer = [];
url = "ws://localhost:8080/echo";
w = new WebSocket(url);
w.onopen = function() {
log("open");
w.send("thank you for accepting this WebSocket request");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
window.onload = function() {
log(log.buffer.join("\n"));
document.getElementById("sendButton").onclick = function() {
w.send(document.getElementById("inputMessage").value);
}
}
Send
Running the WebSocket Page
To test the websocket.html page that contains the WebSocket code, open a command prompt, navigate
to the folder that contains the WebSocket code, and issue the following command to host the HTML file:
python -m SimpleHTTPServer 9999