Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LWPG: The Future Is Realtime

3300f69fcfb83589e73d86fcad57ff13?s=47 miksago
October 20, 2011

LWPG: The Future Is Realtime

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

3300f69fcfb83589e73d86fcad57ff13?s=128

miksago

October 20, 2011
Tweet

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