(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”,\n data: “id”: 1234\n data: }\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\n data: 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\n data: hello world\n\n

(9) Event Name Event Stream: data: {“msg”: “First message”}\n\n event: userLogon\n data: {“username”: “Foo123”}\n\n event: update\n data: {“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 != ‘ { alert(‘Origin was not localhost’); return; } var data = JSON.parse(e.data); console.log(data.id, data.msg); }, false);