Slide 1

Slide 1 text

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]

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

Slide 28

Slide 28 text

1. ActionController::Live 2. Sinatra’s Streaming API 3. Faye 4. Cramp 5. Pusher Server-Sent Events : App Integration

Slide 29

Slide 29 text

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

Slide 39

Slide 39 text

WebSockets : Introduction

Slide 40

Slide 40 text

WebSockets : Introduction 1. Standalone Bidirectional protocol

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 45

Slide 45 text

WebSockets : The Browser

Slide 46

Slide 46 text

WebSockets : Upgrade Handshake

Slide 47

Slide 47 text

1. Faye + Your app 2. Cramp + Your app 3. websocket-rails 4. em-websocket, em-websocket-rails 5. Pusher WebSocket WebSockets : App Integration

Slide 48

Slide 48 text

Cramp + Your App

Slide 49

Slide 49 text

Cramp + Your App

Slide 50

Slide 50 text

Recommended approach

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Modern Day Kazaa, in an Iron Man Suit WebRTC

Slide 55

Slide 55 text

WebRTC : Introduction

Slide 56

Slide 56 text

WebRTC : Introduction

Slide 57

Slide 57 text

WebRTC : Introduction

Slide 58

Slide 58 text

WebRTC : Introduction

Slide 59

Slide 59 text

WebRTC : Typical Workflow - Phase 1

Slide 60

Slide 60 text

WebRTC : Typical Workflow - Phase 1

Slide 61

Slide 61 text

WebRTC : Typical Workflow - Phase 1 Incomplete Code

Slide 62

Slide 62 text

WebRTC : Typical Workflow - Phase II

Slide 63

Slide 63 text

WebRTC : Typical Workflow - Phase II

Slide 64

Slide 64 text

WebRTC : Typical Workflow - Phase II

Slide 65

Slide 65 text

– 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

Slide 75

Slide 75 text

Thank You !

Slide 76

Slide 76 text

Questions ?