Server-Sent Events Luigi Montanez RealtimeConf 2012 For a good realtime...

No content

Overview Part 1: Why Server-Sent Events? Part 2: Implementing in the browser Part 3: Implementing on the server

SPOILER ALERT Server-sent events are the right tool for the job in many scenarios. Try ‘em! You’ll like ‘em!

Part 1: Why Server-Sent Events?

Problem: Realtime updates on the Web. No page refresh.

“Classic” Realtime Solutions AJAX AJAX Polling COMET (Long Polling)

“Classic” Realtime Solutions AJAX AJAX Polling COMET (Long Polling)

Enter the W3C

WebSockets TCP Socket between browser and server Bi-directional

Just TCP A lower level than HTTP Developer de!nes protocol Support XMPP, IRC, AMQP, VNC Some proxy servers not compatible

No JS Poly!ll Flash-based fallback Socket.IO falls back using di"erent methods

Bi-directional communication can be overkill.

Server-Sent Events Forgotten little sister of WebSockets

The Jan Brady of realtime technologies

Server-Sent Events Forgotten little sister of WebSockets Downstream, server to browser push

More Bene!ts Just HTTP Browser handles reconnections Pure JS Poly!lls

Use Cases Stock ticker Live analytics visualization Twitter-style social feed Triggering noti!cations

Part 2: Implementing in the browser

A very simple spec

In the Browser var source = new EventSource('/stream'); source.addEventListener('message', function(e) { console.log(e.data); }); source.addEventListener('open', function(e) { ... }); source.addEventListener('error', function(e) { ... });

Data data: first line data: second line --- data: { data: "id": 12345, data: "msg": "hello world" data: } source.addEventListener('message', function(e) { var obj = JSON.parse(e.data); console.log(obj.id, obj.msg); });

ID, Retry, Event id: 123 retry: 10000 data: AAPL data: 572.44 --- data: {"msg": "First message"} event: userlogon data: {"username": "John123"} event: update data: {"username": "John123", "emotion": "happy"} source.addEventListener('userlogon', function(e) { ... source.addEventListener('update', function(e) { ...

That’s the entire spec!

Browser Support Yes: Firefox, Chrome, Safari, Opera No: Android Browser, Internet Explorer

Poly!lls github.com/remy/poly!lls github.com/Ya#e/EventSource github.com/rwldrn/jquery.eventsource

CORS Coming Soon var source = new EventSource('elsewhere.com/stream'); Spec in Draft @ W3C Implemented in Firefox & Opera Patch submitted for Webkit

Part 3: Implementing on the server

Node.js, part 1 var http = require('http'); var sys = require('sys'); var fs = require('fs'); http.createServer(function(req, res) { if (req.headers.accept && req.headers.accept == 'text/event-stream') { if (req.url == '/events') { sendSSE(req, res); } else { res.writeHead(404); res.end(); } } }).listen(8000);

Node.js, part 2 function sendSSE(req, res) { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); setInterval(function() { constructSSE(res, ‘time’, (new Date()).toLocaleTimeString()); }, 5000); } function constructSSE(res, event, data) { res.write('event: ' + event + '\n'); res.write("data: " + data + '\n\n'); }

Rails 4, part 1 require 'json' class SSE def initialize(io) @io = io end def write(object, options = {}) options.each do |k,v| @io.write "#{k}: #{v}\n" end @io.write "data: #{JSON.dump(object)}\n\n" end def close @io.close end end

Rails 4, part 2 require 'sse' class BrowserController < ApplicationController include ActionController::Live def index response.headers['Content-Type'] = 'text/event-stream' sse = SSE.new(response.stream) begin loop do sse.write({ :time => Time.now }) sleep 5 end rescue IOError # When the client disconnects, we'll get an IOError on write ensure sse.close end end end

In Closing... When you need a sprinkling of realtime Server-to-browser push Simple, easy-to-implement spec Anti-complexity philosophy

Thanks! @LuigiMontanez upworthy.com