This document discusses WebSockets and D3.js. It begins by explaining that WebSockets allow for bi-directional real-time communication over a single TCP connection without polling. It then provides an overview of how to implement WebSockets in ColdFusion and write the necessary JavaScript. The document also introduces D3.js, describing it as a way to bind arbitrary data to the DOM and manipulate it. It includes an example of using D3.js with ColdFusion to create interactive multi-user charts with real-time updates via WebSockets.

1. MY CHARTS CAN BEAT UP YOUR
CHARTS
@dfgrumpy
dave@dkferguson.com
www.cfhour.comDave Ferguson

2. I am an Adobe Community Professional
I started building web applications a long time ago
Contributor to Learn CF in a week
I have a ColdFusion podcast called
CFHour w/ Scott Stroz (@boyzoid)
(please listen)
Stuff about me…
cf.Objective() 2014 @dfgrumpy

3. Enabling the internet to work in real time.
WebSockets
cf.Objective() 2014 @dfgrumpy

4. A web what?
WebSocket is a web technology providing for bi-
directional, full-duplex communications channels over a
single TCP connection.
http://en.wikipedia.org/wiki/WebSocket
cf.Objective() 2014 @dfgrumpy

5. What I meant to say was….
WebSockets provide a way for a server to push data
to a connected client over a dedicated channel and
port.
cf.Objective() 2014 @dfgrumpy

6. What does this all mean?
 No more heartbeat JavaScript calls.
 setTimeout()
 No more long polling.
 BlazeDS
 Instantly update a client when server side changes
occur.
 Other fun cool tricks (more on this later)
cf.Objective() 2014 @dfgrumpy

7. What do I need to do?
 Define a channel in Application.cfc.
 Use a single tag to enable the client.
 Write a function to publish a message.
 Write some JavaScript to process the incoming
message.
 You will write LOTS of JavaScript.
cf.Objective() 2014 @dfgrumpy

8. Simple Websocket Demos
cf.Objective() 2014 @dfgrumpy

9. Enabling the internet to work in real time.
WebSockets
cf.Objective() 2014 @dfgrumpy

10. D3.js
 Bind arbitrary data (json, tsv, csv) to the DOM.
 Manipulate using data-driven transformations.
 Not a monolithic framework.
 Uses dynamic properties and selectors that somewhat
resemble jQuery.
 Highly efficient transitions and effects.
cf.Objective() 2014 @dfgrumpy

11. D3.js example
cf.Objective() 2014 @dfgrumpy

12. D3.js example
@dfgrumpycf.Objective() 2014

13. d3.js Demo
cf.Objective() 2014 @dfgrumpy

14. Using ColdFusion to power D3.js
 Easily create json data
 Use Websockets to push data
 Create multi-user interactive charts
cf.Objective() 2014 @dfgrumpy

15. D3 and CF Demo
cf.Objective() 2014 @dfgrumpy

16. D3 Resources
@dfgrumpycf.Objective() 2014
 d3js.org
 Loads of examples:
 bl.ocks.org/mbostock
 christopheviau.com/d3list/
 techslides.com/over-1000-d3-js-examples-and-demos/
 D3 charting API
 dimplejs.org

17. One more thing….
 WebSocket changes ColdFusion 11
 Can now use Port 80
 Can now be used over SSL
 Now supports clustering
 Including failover
cf.Objective() 2014 @dfgrumpy

18. THANKS
@dfgrumpy
dave@dkferguson.com
www.cfhour.comDave Ferguson