Server Sent Events

LIVE UPDATES WITH

JavaScript community

Agenda

Server Sent Events standard
How it works
Compare with WebSocket / Long Polling
Browser Support
Use cases
EventSource API
Example using Node.js (Express) and Vue.js

Wait, Vue ?

Why Vue ?

46 % developers want to learn it, but didn't try

Server Sent Events standard

whatwg doc

w3c specification

Server-Sent Events (SSE) is a server push technology enabling a browser to receive automatic updates from a server via HTTP/2 (HTTP/1.1) connection.

Server Sent Events

Is this a WebSocket ?

How it works

The server receives a regular HTTP request from the client.

Every time that the server writes an event to the HTTP response, the client will receive it and process it in a listener callback function

The client creates a new JavaScript EventSource object, passing it the URL of an endpoint which is expected to return a stream of events over time.

1

2

3 Benefits of HTTP/2

HTTP/2 is backwards compatible with HTTP/1
Multiplexing — Multiple Requests per Connection
Prioritization — Loading Essential Resources First
HPACK Compression — Reducing Junk in Headers

Compare with other Approaches

WebSocket

No reconnection by default
Custom authentication logic
Scaling problems
More app complexity

SSE

Reconnection out of the box
HTTP authentication
No scaling problems
Easy to use

Except one thing...

SSE is unidirectional. When you open a SSE connection, only the server can send data to the client (browser, etc.). The client cannot send any data.

Solution: HTTP requests + EventSource

“I don’t care about your “Server-Sent stuff”, I will request every half a second!”

HTTP Polling

SSE

Simpler implementation and Data efficiency
It is automatically multiplexed over HTTP/2 out of the box
Limits the number of connections for data on the client to one
SSE provides a memory-efficient implementation of XHR streaming. Unlike a raw XHR connection, which buffers the full received response until the connection is dropped, an SSE connection can discard processed messages without accumulating all of them in memory.

Polling responses can’t really be in sync
Polling requiring 3 round-trips (TCP SIN, SSL, and Data)
Timeouts (Connection getting closed by the proxy server if it remains idle for too long)

Browser Support

Can I Use ...

Make it work on IE & Edge !

Use Cases

A few simple examples of applications that could make use of Server-Sent Events:

A real-time chart of streaming stock prices
Real-time news coverage of an important event (posting links, tweets, and images)
A live Github / Twitter dashboard wall fed by Twitter’s streaming API
A monitor for server statistics like uptime, health, and running processes.

EventSource API

The EventSource interface

To enable servers to push data to Web pages over HTTP or using dedicated server-push protocols, this specification introduces the EventSource interface.

  created() {
    const receiveMessage = this.receiveMessage;
    const eventSource = new EventSource("http://localhost:3000/event-stream");
    eventSource.onmessage = function(event) {
      console.log("New message", event.data);
      receiveMessage(JSON.parse(event.data));
    };
  }

Client-side implementation

Note: event.data is a string, so we need to parse it and convert to object

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();

app.use(cors());
app.use(bodyParser.json());

app.get('*', (req, res) => res.send('OK'));

app.get('/sse', (req, res) => {
    // create SSE connection
});

app.listen(3000, () => console.log('server started...'));

Server-side implementation

app.get('/sse', (req, res) => {
    // SSE Setup
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
    });
    
    res.write('\n');

    let messageId = 0;

    const intervalId = setInterval(() => {
        res.write(`id: ${messageId}\n`);
        res.write(`data: Test Message -- ${Date.now()}\n\n`);
        messageId += 1;
    }, 1000);

    req.on('close', () => {
        clearInterval(intervalId);
    });
});

SSE Controller

function createConnections() {
    let list = [];

    return {
        send(message) {
            messageId++;
            list.forEach(({ id, req, res }) => {
                console.log('Sending for: ', id)
                res.write(`id: ${messageId}\n`);
                res.write(`data: ${JSON.stringify(message)}\n\n`);
            });
        },
        add(id, req, res) {
            list.push({ id, req, res })
        },
        remove(id) {
            list = list.filter(item => item.id !== id);
        }
    }
}

How to manage connections ?

Or you can use events.js

Live Coding

Thank you!

https://slides.com/vladimirvyshko/sse

Link to slides:

https://github.com/vyshkov/sse