Witness the Power of This Fully Armed and Operational Website

The Emerging Power of WebSockets

Tony Thomas (@truetone)

Who Am I?

Tony w/ ice beard.

(Beardcicles) ↑

(Not a Jedi) →

WebSocket is a protocol

RFC 6455
tools.ietf.org/html/rfc6455

Can be a transport layer for higher level protocols like XMPP & STOMP.

(Protocol Droid) →

flickr.com/photos/theshadowknows/2632911477/

HTTP

push to talk.

HTTP

Half-duplex

push to talk.

HTTP

Half-duplex

  • Request
  • Response
push to talk.

HTTP

Half-duplex

  • Request
  • Response
  • Uni-directional
push to talk.

Alternatives

Client sends requests at regular intervals.

Comet

Also called...

Streaming

Streaming

Client Request

("Are you the droids I'm looking for?" ↓)

flickr.com/photos/ahnmyrrh/3614424232

Streaming

Server Response

(Yes...)

flickr.com/photos/ahnmyrrh/3614424232

Cons

flickr.com/photos/nhanusek/415210671/

Cons

flickr.com/photos/nhanusek/415210671/

Cons

flickr.com/photos/nhanusek/415210671/

Cons

flickr.com/photos/nhanusek/415210671/

WebSocket

flickr.com/photos/borkurdotnet/5168835597/

WebSocket

flickr.com/photos/borkurdotnet/5168835597/

WebSocket

flickr.com/photos/borkurdotnet/5168835597/

WebSocket

flickr.com/photos/borkurdotnet/5168835597/

WebSocket

flickr.com/photos/borkurdotnet/5168835597/

WebSocket

flickr.com/photos/borkurdotnet/5168835597/

Back End Options

Node.js

Socket IO
socket.io

PHP

Ratchet
socketo.me

Python

Autobahn
autobahn.ws

Ruby

Faye
faye.jcoglan.com

Browser Support

Missing...

Android Browser

Polyfills

Graceful Websocket (No Flash)
z.umn.edu/gws
websocket.js (Flash fallback)
z.umn.edu/wsjs
Modernizr's list
z.umn.edu/mpf

WebSocket API

WebSocket API

  1. Create new WebSocket instance

WebSocket API

  1. Create new WebSocket instance
  2. Provide a URL for a new WebSocket connection

WebSocket API

  1. Create new WebSocket instance
  2. Provide a URL for a new WebSocket connection
  3. HTTP connection is upgraded to WebSocket

WebSocket API

  1. Create new WebSocket instance
  2. Provide a URL for a new WebSocket connection
  3. HTTP connection is upgraded to WebSocket
  4. Start TEH AWESOME!

Checking For Support

				
if (window.WebSocket) {

	console.log("Just like Beggar's Canyon back home!");

} else {

	console.log("Don't get cocky, kid!");

}
				
			

Constructor

				
/* Create new instance */
var socket = new WebSocket("ws://localhost:9000");

/* Create new instance via secure connection. */
var secure_socket = new WebSocket("wss://localhost:9000");
				
			

Constructor & Protocol

				
/* Pass an optional protocol parameter */
var socket = new WebSocket("ws://localhost:9000", "net.fighter.tie");

/* Pass multiple protocols */
var socket = new WebSocket("ws://localhost:9000", "com.fullyarmedandoperational.laser", "org.wing.x");
				
			

Events: Open

Fires as soon as the server responds.

				
socket.onopen = function(msg) {   

  console.log('The force is strong with this one.');

}
				
			

Events: Message

Fires upon receiving a message.

				
socket.onmessage = function(msg) {
  if (msg == "Help me Obi Wan. You're my only hope.") {

  	console.log('Get a ride to Mos Eisley.');

  }
}
				
			

Events: Error

Fires when there is an unexpected failure.

				
socket.onerror = function(e) {

  console.log("That's no moon!");

}
				
			

Events: Close

Fires when the connection closes.

				
socket.onclose = function() {

  console.log("as if millions of voices suddenly cried out in terror, and were suddenly silenced...");

}
				
			

Methods: Send

Sends a message to the server.

				
var msg = 'Use The Force Luke!';

socket.send(msg);
				
			

Methods: Close

Closes the connection.

				
/* Optional arguments */
var code = 1000;
var msg = "These are not the droids you're looking for.";

socket.close(code, msg);
				
			

Methods: Close Codes

CodeDescription
1000Normal Close
1001Going Away
1002Protocol Error
1003Unacceptable Data Type
1004Reserved
1005Reserved
1006Reserved
1007Invalid Data
1008Message Violates Policy

Attributes: readyState

				
var state = socket.readyState;

switch (state) {
  case 0:
    console.log('Connecting');
  case 1:
    console.log('Open');
  case 2:
    console.log('Closing');
  case 3:
    console.log('Closed');
} 
				
			

Attributes: bufferedAmount

Data in bytes queued to send to the server.

				
var buffer_size = socket.bufferedAmount;
				
			

Attributes: Protocol

The sub-protocol chosen by the server.

				
var protocol = socket.protocol;
				
			

Graceful Websocket

				

var gws = $.gracefulWebSocket("ws://127.0.0.1:9000/");

				
			

Graceful Websocket

				

gws.send("I am your father!");

				
			

Graceful Websocket

				

gws.onmessage = function (event) {
  var messageFromServer = event.data;   
};
				
			

Demo

Applications

The End

The Definitive Guide to HTML5 WebSocket (Wang, Salim & Moskovits)
z.umn.edu/dgtws
This Presentation
z.umn.edu/websocket
All Presentation Links
z.umn.edu/websocketlinks

Thanks Ben!