1. Introduction to
HTML5 and WebSockets

2. 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

3. HTTP 101 - The Way It Used to Be
Server
Client

5. 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

6. 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).

7. 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://
// Connecting to the server with one protocol called myProtocol
var ws = new WebSocket(" ws://echo.websocket.org ", "myProtocol");

8. 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

9. 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.

10. 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) { }

11. 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);

12. WebSocket Attributes

13. 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);

14. // 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");

15. // 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>

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