(1)

Real Time Web

(2)

Request – Response How would you create:

• A stock price ticker?

• A sports game cast app?

• A server status app?

1. Polling

2. Long polling

(3)

Server-Sent Events Part of HTML 5

Efficient

Server pushes data

Events are handled directly by the browser

Uses traditional HTTP

(4)

Client side Uses JavaScript API• EventSource

• EventSource.addEventListener(‘event’, function(event), false);- ‘message’, ‘open’, ‘error’

if (window.EventSource) { var source = new EventSource(‘sse.php’);} else { // use polling :(}

source.addEventListener(‘message’, function(e) { console.log(e.data);}, false);source.addEventListener(‘open’, function(e) { // connection was opened}, false);source.addEventListener(‘error’, function(e) { if (e.readyState == EventSource.CLOSED) { // Connection was closed }}, false);

(5)

Event Stream Format Plain text response with ‘text/event-stream’ Context-Type

Basic format:• data: The message\n\n

Multiline format:• data: first line\n

data: second line\n\n

(6)

Sending JSON Data Event Format• data: {\n

data: “msg”: “hello world”,\ndata: “id”: 1234\ndata: }\n\n

source.addEventListener(‘message’, function(e) { var data = JSON.parse(e.data); console.log(data.id, data.msg);}, false);

(7)

Event Ids Event Format:• id: 54321\n

data: Foo\ndata: 435\n\n

Browsers keep track of last event id If connection is dropped Send HTTP header with Last-Event-ID

(8)

Reconnection Browsers will try to reconnect ~3 seconds

Server can set that time using ‘retry: millisec’

• retry: 10000\ndata: hello world\n\n

(9)

Event Name Event Stream:• data: {“msg”: “First message”}\n\n

event: userLogon\ndata: {“username”: “Foo123”}\n\nevent: update\ndata: {“username”: “Foo123”, “emotion”: “happy”}\n\n

source.addEventListener(‘message’, function(e) { var data = JSON.parse(e.data); console.log(data.id, data.msg);}, false);source.addEventListener(‘userLogon’, function(e) { var data = JSON.parse(e.data); console.log(‘User login: ‘ + data.username);}, false);source.addEventListener(‘update’, function(e) { var data = JSON.parse(e.data); console.log(data.username + ‘ is now ‘ + data.emotion);}, false);

(10)

Server Side <?php header(‘Content-Type: text/event-stream’); header(‘Cache-Control: no-cache’);

function sendMsg($id, $msg) { echo “id: $id” . PHP_EOL; echo “data: $msg” . PHP_EOL; echo PHP_EOL; ob_flush(); flush(); } $serverTime = time(); sendMsg($serverTime, ‘server time: ‘ . date(“h:i:s”, time()));

(11)

Client Side Cancel an Event Stream• source.close();

Check the origin attribute of events

source.addEventListener(‘message’, function(e) { if (e.origin != ‘http://localhost’) { alert(‘Origin was not localhost’); return; } var data = JSON.parse(e.data); console.log(data.id, data.msg);}, false);