Let’s get real (time): Server-Sent
Events, WebSockets and WebRTC for
the soul
A guided tour of modern browser networking
Swanand Pagnis
swanand@pagnis.in
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Yours truly
• Bangalore RUG, Mysore RUG, Garden City
RubyConf
• Hack code at Simplero for a living
• Twitter @_swanand
• Github @swanandp
Slide 5
Slide 5 text
What’s in store for us
Slide 6
Slide 6 text
1. Why bother ?
What’s in store for us
Slide 7
Slide 7 text
1. Why bother ?
2. The Zen of Real Time Communication
What’s in store for us
Slide 8
Slide 8 text
1. Why bother ?
2. The Zen of Real Time Communication
3. Concepts and app Integration with:
What’s in store for us
Slide 9
Slide 9 text
1. Why bother ?
2. The Zen of Real Time Communication
3. Concepts and app Integration with:
1. SSE
What’s in store for us
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
Problems with traditional approaches
Why Bother ?
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Problems with traditional approaches
The Zen of Real Time
Communication
Slide 16
Slide 16 text
• Escape from Request-Response cycle
• Do not be bound to HTTP
• It may or may not always REST
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Also known as the EventSource API
Server-Sent Events
Slide 19
Slide 19 text
Server-Sent Events : Introduction
Slide 20
Slide 20 text
Server-Sent Events : Introduction
1. Designed for Server to Client
communication
Slide 21
Slide 21 text
Server-Sent Events : Introduction
1. Designed for Server to Client
communication
2. Single long lived connection;
hence low latency
Slide 22
Slide 22 text
Server-Sent Events : Introduction
1. Designed for Server to Client
communication
2. Single long lived connection;
hence low latency
3. Simple cross browser API
Slide 23
Slide 23 text
Server-Sent Events : Use cases
• Activity feeds like Twitter, Facebook,
Stock Tickers
• Analytics, Dashboards, Monitoring
• Chats, Instant Messaging *,
Collaborative editing like Google Docs
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Server-Sent Events : The Server
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
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
Slide 30
Slide 30 text
EDGE
ActionController::Live
Slide 31
Slide 31 text
Sinatra’s Streaming API
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
Faye + Your App
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
WebSockets
When Server-Sent Events are just not enough
WebSockets : Introduction
1. Standalone Bidirectional protocol
2. Message oriented, supports events by design
3. Reliable text and binary transfers
Slide 43
Slide 43 text
WebSockets : Introduction
1. Standalone Bidirectional protocol
2. Message oriented, supports events by design
3. Reliable text and binary transfers
4. HTTP Compatible
Slide 44
Slide 44 text
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
– Oscar Wilde
“Consistency is the last refuge of the unimaginative”
Slide 66
Slide 66 text
WebRTC : Use Cases
Slide 67
Slide 67 text
WebRTC : Dive in
Slide 68
Slide 68 text
Further Reading
Slide 69
Slide 69 text
• HTML5Rocks ( it’s a website, not a collection of
rocks )
• http://studio.html5rocks.com/
• WebRTC official website
• Mozilla Developer Network
• http://simpl.info/
Websites
Slide 70
Slide 70 text
• Ilya Grigorik
• Sam Dutton
• Paul Irish
• Eric Bidelman
• Your own blog, one year from now
Blogs
Slide 71
Slide 71 text
• High Performance Browser Networking
• Getting Started with WebRTC
• HTML5: Up and Running
Books
Slide 72
Slide 72 text
Open Source
Opportunities
Slide 73
Slide 73 text
• 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 )
Slide 74
Slide 74 text
• 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