1. Let WebSockets hit that
for you
Slides:
http://goo.gl/YH6lDp
(YH6…lowercase “L”…Dp)
Demo:
http://goo.gl/7ecjYY

2. About me
● Born and raised in MD
● Developer at Teaching Strategies, LLC
○ Early childhood education resources
● Past: UMD, UMUC, NASA, MD Archives, NIST
● First time presenting at conference
● Project: CFScript Converter

3. ● HTML5 WebSockets
● Pusher
● CFWebSocket tag
Topics for today

4. Poll
Want real-time features now?
Have already implemented real-time features?

5. WebSockets

6. Real-time Web

7. Real-time Web
“Realtime refers to the timely nature between an event’s occurrence and our
being made aware of it.”
-Jason Lengstdorf and Phil Leggeter

8. Real-time

9. Real-time

10. Real-time

12. Use cases
● System-wide alerts
● CRUD forms
● Live grids
● Real-time graphs
● Real-time maps
● Business collaboration
● Idle time sign off
● CMS updates

13. Demos

14. Before WebSockets
● Java applets
● ActiveX
● Flash
● Ajax

15. Polling

16. Long polling

17. 2-year old’s approach
Dad are we there yet?
Dad are we there yet?
Dad are we there yet?
No
No
Yes!

18. HTTP headers are inefficient
Request URL:
http://help.adobe.com/en_US/ColdFusion/10.0/Developing/terms.js
Request Method:
GET
Status Code:
200 OK
Request Headersview source
Accept:
*/*
Accept-Encoding:
gzip,deflate,sdch
Accept-Language:
en-US,en;q=0.8
Cache-Control:
max-age=0
Connection:
keep-alive
Cookie:
topicId=WSe61e35da8d31851852cc9f7d1353e88b409-7fff.html;kal3ljKFQLEkldekaaeka;kLEKELKFLiadaoeldoapkekEpakd

19. Streaming
● Is in fact a duplex connection
● HTTP headers still included

20. ● Full duplex connection
○ Client and server maintain an open connection
● Light on bandwidth
● Ability to broadcast messages
● A brand new protocol
What we want

21. WebSockets URIs
ws://echo.websocket.org
wss://echo.websocket.org

22. WebSocket request
GET /echo HTTP/1.1
Host: echo.websocket.org
Origin: http://www.websocket.org
Sec-WebSocket-Key: 7+C600xYybOv2zmJ69RQsw==
Sec-WebSocket-Version: 13
Upgrade: websocket

23. WebSockets response
101 Switching Protocols
Connection: Upgrade
Date: Wed, 20 Jun 2012 03:39:49 GMT
Sec-WebSocket-Accept:
fYoqiH14DgI+5ylEMwM2sOLzOi0=
Server: Kaazing Gateway
Upgrade: WebSocket

24. WebSockets events
onopen : connection opened
onmessage : message received from server
onclose : connection closed (normally or abruptly)
onerror : error

25. HTML5 WebSockets API

26. Server-side Solutions

27. Server-side Libraries
Python
● Tornado
● Pywebsocket
● Autobahn
● txWS
● WebSocket for Python
Ruby
● Php-websocket
● Rachet
● Hoar
JavaScript
● Socket IO
● WebSocket-Node
.NET
● IIS8
● Fleck
PHP
● Php-websocket
● Rachet
● Hoar
Java
● Tomcat
● JBoss
● GlassFish
● Jetty

28. Solutions
Pusher
ColdFusion 10+
CFWebSocket

29. Pusher
Web page
Pusher.cfc
Pusher API
Client 1 Client 3Client 2 Client 4
(form post)
(Many thanks to Ben Nadel)

30. Channels
Pusher
Client 1 Client 3Client 2 Client 4 Client 5
Carousel Channel Emergency Alerts Channel DB Updates Channel

31. Unlimited Channels
Pusher
Channel 1 Channel (n)Channel 2 Channel 3 Channel 4 …

32. Unlimited Event Types
Channel
Event 1 Event (n)Event 2 Event 3 Event 4 …

34. Pusher.cfc

36. Code Walkthrough

37. Disadvantages
1. It costs $$$ based on traffic
(e.g. 500 connections per month
= $50)
2. Information goes through an
external service (privacy)
Pusher
Advantages
1. Highly scalable
2. Add new channels at any
time
3. Custom events
4. Will work on any platform,
even static HTML files
5. One less thing to worry
about

38. CFWebSocket
Application.cfc

39. CFWebSocket

40. CFWebSocket

41. CFWebSocket

42. Disadvantages
1. Need to upgrade to CF10+
2. Can’t add channels
dynamically (see Application.
cfc)
3. Global JavaScript vars
4. Load balanced environment?
CFWebSocket
Advantages
1. Supports channel paradigm
2. Can integrate with internal
authentication
3. Integrates with existing
CFLogin/Authentication

43. Security

44. Security
● Denial of service
● Cross-site scripting (XSS)
● Man in the Middle
● Authentication
Client Server
Always use
wss://
on production
systems!!!

45. DDOS

46. XSS

49. Fallbacks
● Flash
● Ajax Polling
● Graceful WebSocket (jQuery plug-in)
● Portal
● DataChannel
● Atmosphere
● web-socket-js
● Kaazing WebSocket Gateway

50. Realtime Web Apps (Apress)
The Definitive Guide to HTML5 WebSocket (Apress)
Getting Started with HTML5 WebSocket Programming (PacktPub)
*Echo test service
How can I get started?

51. The End
Contact Me
Twitter: @joseGaldamez
GitHub: http://github.com/galdamez
E-mail: galdamez@gmail.com