Win the Day with WebSockets

An introduction to WebSockets for developers

1. WIN THE DAY WITH WEBSOCKETS THEY'RE A PART OF HTML5, SO THEY MUST BE COOL.
2. ME. Jackson Murtha Dev @
3. YOU? WORKED WITH WEBSOCKETS? Front-end or back-end dev? Interested in Browser testing Interested in ops? Interested in Linux?
4. ONCE UPON A TIME...
5. COOL PEOPLE
7. ROCKPAPERSCISSORS
12. OLD SOLUTIONS TO THE PROBLEM polling long-polling comet streaming hacks flash sockets
13. DRAWBACKS TO OLD METHODS hacks to get around one-directional communication complicated non-standard inefficient slow difficult to implement for some data types
14. THE NEW WAY: WEBSOCKETS A browser API, part of HTML5, standard maintained by W3C A protocol based on TCP, defined by IETF, RFC #6455
15. FULLDUPLEX
16. MULTIPLE DATA TYPES messages can be text or binary (arrayBuffer or blob data) unlike TCP, websockets comprehend text as text
17. BROWSER API constructor takes url in ws:// or wss:// form optional argument to pass in supported protocols Listeners: onopen onmessage onerror onclose
18. BROWSER API: CONTINUED Methods: send() : sends message; works only after onopen and before onclose (ws.readyState must match WebSocket.OPEN) close() : terminates connection (send may still work until onclose). Two optional params, status code and reason
19. INITIALIZING WEBSOCKET H T T P R e q u e s t f r o m t h e C l i e n t G E T / e c h o H T T P / 1 . 1 H o s t : e c h o . w e b s o c k e t . o r g O r i g i n : h t t p : / / w w w . w e b s o c k e t . o r g S e c - W e b S o c k e t - K e y : 7 + C 6 0 0 x Y y b O v 2 z m J 6 9 R Q s w = = S e c - W e b S o c k e t - V e r s i o n : 1 3 U p g r a d e : w e b s o c k e t H T T P R e s p o n s e f r o m t h e S e r v e r 1 0 1 S w i t c h i n g P r o t o c o l s C o n n e c t i o n : U p g r a d e D a t e : W e d , 2 0 J u n 2 0 1 2 0 3 : 3 9 : 4 9 G M T S e c - W e b S o c k e t - A c c e p t : f Y o q i H 1 4 D g I + 5 y l E M w M 2 s O L z O i 0 = S e r v e r : K a a z i n g G a t e w a y U p g r a d e : W e b S o c k e t
20. Optional Headers INITIALIZING WEBSOCKET Sec-WebSocket-Protocol (Server or Client) Sec-WebSocket-Extensions (Server or Client) Sec-Websocket-Origin (Client) Cookie (Client)
21. ANATOMY OF A WEBSOCKET MESSAGE
22. WHAT DOES THIS MEAN? Example:
23. BROWSER SUPPORT
24. SERVER SOFTWARE SUPPORT Node - socket.io, ws, websocket-node, SockJS Java - Jetty, Netty, jWebsocket, GlassFish, Tomcat, vert.x, Caucho Resin .NET - Nugget, SuperWebSocket, XSockets PHP - EWSS, Ratchet, phpdaemon Python - pywebsockets, tornado, websockify most active open source MQ's in all languages
25. LIVE DEMO TIME!
26. APPLICATION DESIGN CONSIDERATIONS inherently event-driven encourage message queueing and brokering better separation of application components less application waiting and looping while waiting for potential actions
27. CAVEATS support is still not 100% full-duplex creates extra security considerations protocol-based auth is still a bit complicated extra connections for server communication simplified API / some features aren't exposed handshake still initiated by browser addressing is still one-directional problems for document-centric web? indexing? accessibility?
28. ALTERNATIVES / COMPANION TOOLS polyfills (socket.io, web-socket-js, SockJS, atmosphere JQuery plugin, XSockets) HTML5 Server-Sent Events WebRTC HTML5 Web Messaging (postMessage) Server Origin / Cross-site resource sharing policy PubSubHubBub (server to server) third party client services (e.g. Kaazing)
29. RESOURCES
30. QUESTIONS AND FEEDBACK