LWPG: The Future Is Realtime

A slightly more technical version of the The Future Is Realtime talk I've been doing recently.

Transcript

1. Micheil Smith - @miksago The future is realtime
2. I work at Pusher BUILDING THE REALTIME WEB
3. • Part 1: Background & History • Part 2: Using the Realtime Web
4. • Part 1: Background & History • Part 2: Using the Realtime Web
5. • Part 1: Background & History • Overview of the past • The Shift to Realtime • Realtime Web in Action
6. • Overview of the past • The Shift to Realtime • Realtime Web in Action
7. • Early web • PHP / LAMP Stack • MVC • Social Web Overview of the past
8. http://www.mikealrogers.com/posts/a-new- direction-for-web-applications-.html Overview of the past
9. • Overview of the past • The Shift to Realtime • Realtime Web in Action
10. The Shift to Realtime • The web has become more interactive • Users expect things to be “now” • And why should they have to wait?
11. • We researched page-load time • We used AJAX to decrease wait-time on interactions • We then tried to simulate “realtime” with AJAX and related technologies The Shift to Realtime
12. The Simulations of Realtime • HTTP Polling • LiveConnect • Forever iFrame • XHR Long-polling • XHR Streaming
13. A more complete history http://blog.pusher.com/2011/8/10/what- came-before-websockets
14. Going Properly Realtime • HTML5 Introduces many new API’s • One of those is WebSockets
15. What are WebSockets? • Bi-directional socket connection between browser and server • API is fairly low level • Low-latency/high-frequency messaging
16. The Uses of WebSockets • Progressively Realtime Applications • Entirely Realtime Applications • Multiplayer HTML5 Gaming
17. • Overview of the past • The Shift to Realtime • Realtime in Action
18. Progressively Realtime Apps CloudApp Tastebuds
19. Collaborative Editing Codr.cc Google Docs
20. Realtime Analytics Guag.es
21. Realtime HTML5 Gaming Rawkets Metris
22. There’s a lot more uses...
23. ...and even more that we haven’t thought of yet.
24. • Part 1: Background & History • Part 2: Using the Realtime Web
25. var socket = new WebSocket('ws://localhost:8080/') socket.onopen = function() { /*...*/ }; socket.onmessage = function(messageEvent) { /*...*/ }; socket.onclose = function(closeEvent) { /*...*/ }; socket.onerror = function() { /*...*/ }; socket.send('my data'); The WebSocket API
26. var socket = new WebSocket(url, protocol) var socket = new WebSocket(url, [protocol1, protocol2]) socket.addEventListener('open', function() { /*...*/ }); socket.addEventListener('message', /*...*/ ); socket.addEventListener('close', /*...*/ ); socket.addEventListener('error', /*...*/ ); The WebSocket API (alt)
27. WebSocket Servers • worlize/WebSocket-node • miksago/node-websocket-server • oberstet/Autobahn (python) • igrigorik/em-websocket (ruby) • Jetty/7.5.2 (java) • ostinelli/misultin (erlang)
28. Warning! There are currently multiple versions of WebSockets supported by Browsers, not all of the previously listed Servers support all the versions.
29. Extra’s!
30. Portland, OR 7th & 8th November http://krtconf.com Keeping It Realtime Conference
31. Questions?
32. Thanks for listening! @miksago on Twitter / Github / Geekli.st