Introduction to HTML5 and WebSockets

HTML5 MARKUP CONNECTIVITY DEVICE ACCESS GRAPHICS STYLE SHEETS OFFLINE & STORAGE HTML5 is an umbrella term that covers the large number of improvements and changes happening in web technologies

HTTP 101 - The Way It Used to Be Server Client

WebSockets PERFORMANCE - communication is more efficient SIMPLICITY - avoids complexities of HTTP that have to manage stateless requests STANDARDS - Supports hierarchical protocols part of HTML5 - provides secure TCP-style networking over the Web

RFC 6455 - The WebSocket Protocol The WebSocket Protocol enables two-way communication between a client running untrusted code in a controlled environment to a remote host that has opted-in to communications from that code. The security model used for this is the origin-based security model commonly used by web browsers. The protocol consists of an opening handshake followed by basic message framing, layered over TCP. The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections (e.g., using XMLHttpRequest or <iframe>s and long polling). http://www.rfc-base.org/rfc-6455.html

WebSocket API The WebSocket constructor takes one required argument, URL (the URL to which you want to connect) and one optional argument, protocols (either a single protocol name or an array of protocol names that the server must include in its response to establish the connection). Examples of protocols you can use in the protocols argument are XMPP - (Extensible Messaging and Presence Protocol), SOAP (Simple Object Access Protocol), or a custom protocol. // Create new WebSocket connection var ws = new WebSocket("ws://www.websocket.org"); // Connecting to the server with one protocol called myProtocol var ws = new WebSocket(" ws://echo.websocket.org ", "myProtocol");

Sample WebSocket Constructor with Protocol Support // Connecting to the server with multiple protocol choices var echoSocket = new WebSocket("ws://echo.websocket.org", ["com.kaazing.echo", "example.imaginary.protocol"]) echoSocket.onopen = function(e) { // Check the protocol chosen by the server console.log(echoSocket.protocol); } The WebSocket server at ws://echo.websocket.org only understands the com.kaazing.echo protocol and not example.imaginary.protocol, therefore the server chooses the com.kaazing.echo protocol when the WebSocket open event fires. Using an array gives you flexibility in enabling your application to use different protocols with different servers

WebSocket Events The WebSocket API is purely event driven. Your application code listens for events on WebSocket objects in order to handle incoming data and changes in connection status. WebSocket programming follows an asynchronous programming model, which means that as long as a WebSocket connection is open, your application simply listens for events. Your client does not need to actively poll the server for more information. To start listening for the events, you simply add callback functions to the WebSocket object. Alternatively, you can use the addEventListener() DOM method to add event listeners to your WebSocket objects. A WebSocket object dispatches four different events: Open - fires to establish a connection Message - contains the data from the server Error - fires in response to an unexpected event (failure) Close - fires when the WebSocket connection is closed As with all web APIs, you can listen for these events using on<eventname> handler properties, as well as using the addEventListener(); method.

WebSocket Methods WebSocket objects have two methods: send() - send messages from your client to the server close() - After sending you can leave the connection open or call the close() method // Send a text message ws.send("Hello WebSocket!"); // Open a connection and try to send a message. (This will not work!) var ws = new WebSocket("ws://echo.websocket.org") ws.send("Initial data"); // Wait until the open event before calling send(). var ws = new WebSocket(" ws://echo.websocket.org ") ws.onopen = function(e) { }

Sending a Binary Message Over WebSocket // Send a Blob var blob = new Blob("blob contents"); ws.send(blob); // Send an ArrayBuffer var a = new Uint8Array([8,6,7,5,3,0,9]); ws.send(a.buffer);

WebSocket Attributes

Putting It All Together <!DOCTYPE html> <title>WebSocket Echo Client</title> <h2>Websocket Echo Client</h2> <div id="output"></div> <script> // Initialize WebSocket connection and event handlers function setup() { output = document.getElementById("output"); ws = new WebSocket("ws://echo.websocket.org/echo"); // Listen for the connection open event then call the sendMessage function ws.onopen = function(e) { log("Connected"); sendMessage("Hello WebSocket!") } // Listen for the close connection event ws.onclose = function(e) { log("Disconnected: " + e.reason);

// Listen for connection errors ws.onerror = function(e) { log("Error "); } // Listen for new messages arriving at the client ws.onmessage = function(e) { log("Message received: " + e.data); // Close the socket once one message has arrived. ws.close(); // Send a message on the WebSocket. function sendMessage(msg){ ws.send(msg); log("Message sent");

// Display logging information in the document. function log(s) { var p = document.createElement("p"); p.style.wordWrap = "break-word"; p.textContent = s; output.appendChild(p); // Also log information on the javascript console console.log(s); } // Start running the example. setup(); </script>

Output from Should Look Similar to... ws://echo.websocket.org/echo