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

Let's get real (time): SSE, WebSockets and WebRTC for the soul

Let's get real (time): SSE, WebSockets and WebRTC for the soul

A guided tour on modern browser networking.

Swanand Pagnis

March 22, 2014
Tweet

More Decks by Swanand Pagnis

Other Decks in Technology

Transcript

  1. Let’s get real (time): Server-Sent
    Events, WebSockets and WebRTC for
    the soul
    A guided tour of modern browser networking
    Swanand Pagnis

    [email protected]

    View full-size slide

  2. Yours truly
    • Originally from Krypton, often mistaken as the last
    survivor

    • Sent to earth in a spaceship while still a baby

    • A few useful superpowers

    • Suspiciously good at hiding in plain sight

    View full-size slide

  3. Yours truly
    • Originally from Krypton, often mistaken as the last
    survivor

    • Sent to earth in a spaceship while still a baby

    • A few useful superpowers

    • Suspiciously good at hiding in plain sight

    View full-size slide

  4. Yours truly
    • Bangalore RUG, Mysore RUG, Garden City
    RubyConf

    • Hack code at Simplero for a living

    • Twitter @_swanand

    • Github @swanandp

    View full-size slide

  5. What’s in store for us

    View full-size slide

  6. 1. Why bother ?
    What’s in store for us

    View full-size slide

  7. 1. Why bother ?
    2. The Zen of Real Time Communication
    What’s in store for us

    View full-size slide

  8. 1. Why bother ?
    2. The Zen of Real Time Communication
    3. Concepts and app Integration with:
    What’s in store for us

    View full-size slide

  9. 1. Why bother ?
    2. The Zen of Real Time Communication
    3. Concepts and app Integration with:
    1. SSE
    What’s in store for us

    View full-size slide

  10. 1. Why bother ?
    2. The Zen of Real Time Communication
    3. Concepts and app Integration with:
    1. SSE
    2. WebSockets
    What’s in store for us

    View full-size slide

  11. 1. Why bother ?
    2. The Zen of Real Time Communication
    3. Concepts and app Integration with:
    1. SSE
    2. WebSockets
    3. WebRTC
    What’s in store for us

    View full-size slide

  12. 1. Why bother ?
    2. The Zen of Real Time Communication
    3. Concepts and app Integration with:
    1. SSE
    2. WebSockets
    3. WebRTC
    4. Further reading and open source opportunities
    What’s in store for us

    View full-size slide

  13. Problems with traditional approaches
    Why Bother ?

    View full-size slide

  14. 1. Poor performance because of high latency

    2. Neither truly async nor truly real time, often
    limited to Text transfer only

    3. Either additional complexity and inconvenience
    or hacky methods

    View full-size slide

  15. Problems with traditional approaches
    The Zen of Real Time
    Communication

    View full-size slide

  16. • Escape from Request-Response cycle

    • Do not be bound to HTTP

    • It may or may not always REST

    View full-size slide

  17. Also known as the EventSource API
    Server-Sent Events

    View full-size slide

  18. Server-Sent Events : Introduction

    View full-size slide

  19. Server-Sent Events : Introduction
    1. Designed for Server to Client
    communication

    View full-size slide

  20. Server-Sent Events : Introduction
    1. Designed for Server to Client
    communication
    2. Single long lived connection;
    hence low latency

    View full-size slide

  21. Server-Sent Events : Introduction
    1. Designed for Server to Client
    communication
    2. Single long lived connection;
    hence low latency
    3. Simple cross browser API

    View full-size slide

  22. Server-Sent Events : Use cases
    • Activity feeds like Twitter, Facebook,
    Stock Tickers

    • Analytics, Dashboards, Monitoring

    • Chats, Instant Messaging *,
    Collaborative editing like Google Docs

    View full-size slide

  23. Server-Sent Events : The Server

    View full-size slide

  24. Server-Sent Events : Summary
    1. Simple Protocol that builds on top of HTTP

    2. Truly async

    3. Perfect for “notifying” the client

    4. Great cross browser support, but no binary
    support

    View full-size slide

  25. 1. Traditional Rack based app are a slight misfit because
    of response buffering ( Remember our first Zen ? )

    2. Evented architecture works in our favour ( Think of
    EM::Deferrable or Thin )

    3. Long running connection means long running
    process on the server
    Server-Sent Events : App Integration

    View full-size slide

  26. 1. ActionController::Live

    2. Sinatra’s Streaming API

    3. Faye

    4. Cramp

    5. Pusher
    Server-Sent Events : App Integration

    View full-size slide

  27. 1. Streaming and SSE support baked right into Rails
    ( > 4.0 )

    2. You keep the full context ( current_user etc )

    3. Integration friendly, almost a drop-in feature into
    existing Rails apps
    ActionController::Live

    View full-size slide

  28. EDGE
    ActionController::Live

    View full-size slide

  29. Sinatra’s Streaming API

    View full-size slide

  30. 1. You only need Sinatra,
    Thin and some Javascript

    2. So simple, you will cry
    with happiness

    3. No app context

    4. So simple, you will beg
    for more features
    Sinatra’s Streaming API

    View full-size slide

  31. 1. You only need Sinatra,
    Thin and some Javascript

    2. So simple, you will cry
    with happiness

    3. No app context

    4. So simple, you will beg
    for more features
    Sinatra’s Streaming API

    View full-size slide

  32. 1. Running a separate process that acts as a server, and
    your server and client act as clients to this server

    2. Pub / sub model, drop-in integration with your app

    3. Graceful degradation

    4. No app context
    Faye + Your App

    View full-size slide

  33. Faye + Your App

    View full-size slide

  34. Apps that have more traditional components than
    real time

    1. Use a separate process / service / app for the
    real time part ( e.g. Faye or Pusher or BYOT )

    2. Use existing infrastructure for non real time
    aspects of the app
    Recommended approach
    Rant

    View full-size slide

  35. WebSockets
    When Server-Sent Events are just not enough

    View full-size slide

  36. WebSockets : Introduction

    View full-size slide

  37. WebSockets : Introduction
    1. Standalone Bidirectional protocol

    View full-size slide

  38. WebSockets : Introduction
    1. Standalone Bidirectional protocol
    2. Message oriented, supports events by design

    View full-size slide

  39. WebSockets : Introduction
    1. Standalone Bidirectional protocol
    2. Message oriented, supports events by design
    3. Reliable text and binary transfers

    View full-size slide

  40. WebSockets : Introduction
    1. Standalone Bidirectional protocol
    2. Message oriented, supports events by design
    3. Reliable text and binary transfers
    4. HTTP Compatible

    View full-size slide

  41. 1. All the use cases of SSEs, plus:

    2. Multiplayer games, Multi-media chat *

    3. Remote pair programming, Online contests, Live
    interviews, Screen sharing, Remote Desktop etc.
    WebSockets : Use Cases

    View full-size slide

  42. WebSockets : The Browser

    View full-size slide

  43. WebSockets : Upgrade Handshake

    View full-size slide

  44. 1. Faye + Your app

    2. Cramp + Your app

    3. websocket-rails

    4. em-websocket, em-websocket-rails

    5. Pusher
    WebSocket
    WebSockets : App Integration

    View full-size slide

  45. Cramp + Your App

    View full-size slide

  46. Cramp + Your App

    View full-size slide

  47. Recommended approach

    View full-size slide

  48. http://www.personal.psu.edu/afr3/blogs/siowfa13/yawning.jpg

    View full-size slide

  49. Modern Day Kazaa, in an Iron Man Suit
    WebRTC

    View full-size slide

  50. WebRTC : Introduction

    View full-size slide

  51. WebRTC : Introduction

    View full-size slide

  52. WebRTC : Introduction

    View full-size slide

  53. WebRTC : Introduction

    View full-size slide

  54. WebRTC : Typical Workflow - Phase 1

    View full-size slide

  55. WebRTC : Typical Workflow - Phase 1

    View full-size slide

  56. WebRTC : Typical Workflow - Phase 1
    Incomplete
    Code

    View full-size slide

  57. WebRTC : Typical Workflow - Phase II

    View full-size slide

  58. WebRTC : Typical Workflow - Phase II

    View full-size slide

  59. WebRTC : Typical Workflow - Phase II

    View full-size slide

  60. – Oscar Wilde
    “Consistency is the last refuge of the unimaginative”

    View full-size slide

  61. WebRTC : Use Cases

    View full-size slide

  62. WebRTC : Dive in

    View full-size slide

  63. Further Reading

    View full-size slide

  64. • HTML5Rocks ( it’s a website, not a collection of
    rocks )

    • http://studio.html5rocks.com/

    • WebRTC official website

    • Mozilla Developer Network

    • http://simpl.info/
    Websites

    View full-size slide

  65. • Ilya Grigorik

    • Sam Dutton

    • Paul Irish

    • Eric Bidelman

    • Your own blog, one year from now
    Blogs

    View full-size slide

  66. • High Performance Browser Networking

    • Getting Started with WebRTC

    • HTML5: Up and Running
    Books

    View full-size slide

  67. Open Source
    Opportunities

    View full-size slide

  68. • Help out Faye, Cramp and other libraries
    mentioned so far

    • Open source all your throw-away code written
    during learning ( Mine is on Github )

    • Async-proof versions of commonly needed ruby
    gems ( e.g. github.com/rkh/async-rack )

    View full-size slide

  69. • Helper Libraries for Cramp, e.g.

    • To easily build simple board games

    • To write calendar based real time apps

    • Augment the testing libraries to test real time stuff

    • Write and make your benchmarks available

    View full-size slide