Real Time Web

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 = newEventSource(‘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\ndata: second line\n\n

6. Sending JSON Data • Event Format • data: {\ndata: “msg”: “hello world”,\ndata: “id”: 1234\ndata: }\n\n source.addEventListener(‘message’, function(e) { vardata = JSON.parse(e.data); console.log(data.id, data.msg); }, false);

7. Event Ids • Event Format: • id: 54321\ndata: 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\nevent: userLogon\ndata: {“username”: “Foo123”}\n\nevent: update\ndata: {“username”: “Foo123”, “emotion”: “happy”}\n\n source.addEventListener(‘message’, function(e) { vardata = JSON.parse(e.data); console.log(data.id, data.msg); }, false); source.addEventListener(‘userLogon’, function(e) { vardata = JSON.parse(e.data); console.log(‘User login: ‘ + data.username); }, false); source.addEventListener(‘update’, function(e) { vardata = 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’); • functionsendMsg($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; } vardata = JSON.parse(e.data); console.log(data.id, data.msg); }, false);