Let WebSockets hit that
for you
Slides:
http://goo.gl/YH6lDp
(YH6…lowercase “L”…Dp)
Demo:
http://goo.gl/7ecjYY
About me
● Born and raised in MD
● Developer at Teaching Strategies, LLC
○ Early childhood education resources
● Past: UMD...
● HTML5 WebSockets
● Pusher
● CFWebSocket tag
Topics for today
Poll
Want real-time features now?
Have already implemented real-time features?
WebSockets
Real-time Web
Real-time Web
“Realtime refers to the timely nature between an event’s occurrence and our
being made aware of it.”
-Jason ...
Real-time
Real-time
Real-time
Use cases
● System-wide alerts
● CRUD forms
● Live grids
● Real-time graphs
● Real-time maps
● Business collaboration
● Id...
Demos
Before WebSockets
● Java applets
● ActiveX
● Flash
● Ajax
Polling
Long polling
2-year old’s approach
Dad are we there yet?
Dad are we there yet?
Dad are we there yet?
No
No
Yes!
HTTP headers are inefficient
Request URL:
http://help.adobe.com/en_US/ColdFusion/10.0/Developing/terms.js
Request Method:
...
Streaming
● Is in fact a duplex connection
● HTTP headers still included
● Full duplex connection
○ Client and server maintain an open connection
● Light on bandwidth
● Ability to broadcast messa...
WebSockets URIs
ws://echo.websocket.org
wss://echo.websocket.org
WebSocket request
GET /echo HTTP/1.1
Host: echo.websocket.org
Origin: http://www.websocket.org
Sec-WebSocket-Key: 7+C600xY...
WebSockets response
101 Switching Protocols
Connection: Upgrade
Date: Wed, 20 Jun 2012 03:39:49 GMT
Sec-WebSocket-Accept:
...
WebSockets events
onopen : connection opened
onmessage : message received from server
onclose : connection closed (normall...
HTML5 WebSockets API
Server-side Solutions
Server-side Libraries
Python
● Tornado
● Pywebsocket
● Autobahn
● txWS
● WebSocket for Python
Ruby
● Php-websocket
● Rache...
Solutions
Pusher
ColdFusion 10+
CFWebSocket
Pusher
Web page
Pusher.cfc
Pusher API
Client 1 Client 3Client 2 Client 4
(form post)
(Many thanks to Ben Nadel)
Channels
Pusher
Client 1 Client 3Client 2 Client 4 Client 5
Carousel Channel Emergency Alerts Channel DB Updates Channel
Unlimited Channels
Pusher
Channel 1 Channel (n)Channel 2 Channel 3 Channel 4 …
Unlimited Event Types
Channel
Event 1 Event (n)Event 2 Event 3 Event 4 …
Pusher.cfc
Code Walkthrough
Disadvantages
1. It costs $$$ based on traffic
(e.g. 500 connections per month
= $50)
2. Information goes through an
exter...
CFWebSocket
Application.cfc
CFWebSocket
CFWebSocket
CFWebSocket
Disadvantages
1. Need to upgrade to CF10+
2. Can’t add channels
dynamically (see Application.
cfc)
3. Global JavaScript va...
Security
Security
● Denial of service
● Cross-site scripting (XSS)
● Man in the Middle
● Authentication
Client Server
Always use
ws...
DDOS
XSS
Fallbacks
● Flash
● Ajax Polling
● Graceful WebSocket (jQuery plug-in)
● Portal
● DataChannel
● Atmosphere
● web-socket-js...
Realtime Web Apps (Apress)
The Definitive Guide to HTML5 WebSocket (Apress)
Getting Started with HTML5 WebSocket Programmi...
The End
Contact Me
Twitter: @joseGaldamez
GitHub: http://github.com/galdamez
E-mail: galdamez@gmail.com
Let web sockets hit that f5 for you
Let web sockets hit that f5 for you
Let web sockets hit that f5 for you
Let web sockets hit that f5 for you
Let web sockets hit that f5 for you
Upcoming SlideShare
Loading in …5
×

Let web sockets hit that f5 for you

883 views

Published on

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
883
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Let web sockets hit that f5 for you

  1. 1. Let WebSockets hit that for you Slides: http://goo.gl/YH6lDp (YH6…lowercase “L”…Dp) Demo: http://goo.gl/7ecjYY
  2. 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. 3. ● HTML5 WebSockets ● Pusher ● CFWebSocket tag Topics for today
  4. 4. Poll Want real-time features now? Have already implemented real-time features?
  5. 5. WebSockets
  6. 6. Real-time Web
  7. 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. 8. Real-time
  9. 9. Real-time
  10. 10. Real-time
  11. 11. Use cases ● System-wide alerts ● CRUD forms ● Live grids ● Real-time graphs ● Real-time maps ● Business collaboration ● Idle time sign off ● CMS updates
  12. 12. Demos
  13. 13. Before WebSockets ● Java applets ● ActiveX ● Flash ● Ajax
  14. 14. Polling
  15. 15. Long polling
  16. 16. 2-year old’s approach Dad are we there yet? Dad are we there yet? Dad are we there yet? No No Yes!
  17. 17. 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
  18. 18. Streaming ● Is in fact a duplex connection ● HTTP headers still included
  19. 19. ● Full duplex connection ○ Client and server maintain an open connection ● Light on bandwidth ● Ability to broadcast messages ● A brand new protocol What we want
  20. 20. WebSockets URIs ws://echo.websocket.org wss://echo.websocket.org
  21. 21. 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
  22. 22. 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
  23. 23. WebSockets events onopen : connection opened onmessage : message received from server onclose : connection closed (normally or abruptly) onerror : error
  24. 24. HTML5 WebSockets API
  25. 25. Server-side Solutions
  26. 26. 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
  27. 27. Solutions Pusher ColdFusion 10+ CFWebSocket
  28. 28. Pusher Web page Pusher.cfc Pusher API Client 1 Client 3Client 2 Client 4 (form post) (Many thanks to Ben Nadel)
  29. 29. Channels Pusher Client 1 Client 3Client 2 Client 4 Client 5 Carousel Channel Emergency Alerts Channel DB Updates Channel
  30. 30. Unlimited Channels Pusher Channel 1 Channel (n)Channel 2 Channel 3 Channel 4 …
  31. 31. Unlimited Event Types Channel Event 1 Event (n)Event 2 Event 3 Event 4 …
  32. 32. Pusher.cfc
  33. 33. Code Walkthrough
  34. 34. 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
  35. 35. CFWebSocket Application.cfc
  36. 36. CFWebSocket
  37. 37. CFWebSocket
  38. 38. CFWebSocket
  39. 39. 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
  40. 40. Security
  41. 41. Security ● Denial of service ● Cross-site scripting (XSS) ● Man in the Middle ● Authentication Client Server Always use wss:// on production systems!!!
  42. 42. DDOS
  43. 43. XSS
  44. 44. Fallbacks ● Flash ● Ajax Polling ● Graceful WebSocket (jQuery plug-in) ● Portal ● DataChannel ● Atmosphere ● web-socket-js ● Kaazing WebSocket Gateway
  45. 45. 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?
  46. 46. The End Contact Me Twitter: @joseGaldamez GitHub: http://github.com/galdamez E-mail: galdamez@gmail.com

×