README.md

Using server-sent events

Why and how?

• Documentation: https://web.dev/articles/eventsource-basics
• Use case: broadcasting data from server to browsers
• Benefits:
  • Easy to understand and implement (only a few lines of code)
  • No library is needed
  • Can use same HTTP(S) authentication as elsewhere in the app (which can’t be done with websockets)
• Caveat – not supported on some older browsers: https://caniuse.com/#feat=eventsource

Important gotcha

• The server sends a stream to the browser. Conceptually, that stream is infinite: the server never closes it, only the client, by breaking the connection.
• If the stream is ever closed by the server (restart etc.), then the client immediately tries to reconnect.

Sketch: hot-reloading via server-sent events

• The server watches a directory and server-sends timestamps when something changes.
• The current timestamp is embedded in each HTML file that is served.
• A script in each HTML file listens to the server-sent events.
  • If the embedded timestamp is different from the received data: location.reload()

Acknowledgement

Thanks for feedback:

• https://twitter.com/qubyte

server-sent-events-browser.js

const evtSource = new EventSource('/server-sent-events');
// - 'message' is the default event
// - Servers can create other events via an `event:` field before one or more `data:` fields
evtSource.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log(data);
});

server-sent-events-server-fastify.js

const readables = new Set();

function startServer() {
  // ···

  server.get('/server-sent-events', async (request, reply) => {
    reply.type('text/event-stream').code(200);
    const readable = new SimpleReadable();
    // Optional: send the current full status
    
    // The server closes the readable for us – if the connection is broken
    readable.addListener('close', () => {
      readables.delete(readable);
    });
    
    // This is how we send incremental updates:
    readables.add(readable);
    
    return readable; // send to client
  });

  // ···
}

function sendIncrementalUpdate(date) {
  const data = {
    dateString: date.toISOString(),
  };
  // Must not contain newlines (apart from those at the end)!
  const chunk = `data: ${JSON.stringify(data)}\n\n`;
  for (const readable of readables) {
    readable.push(chunk);
  }
}

//========== Helper class

/**
 * Use `.push()` to add data chunks to instances of this class.
 */
class SimpleReadable extends stream.Readable {
  _read() {
    // do nothing
  }
  closeSimpleReadable() {
    this.push(null);
  }
}

Where should SimpleReadable.closeSimpleReadable() be called?
I assume inside the CloseListener.

BTW it looks really nice and awesome lean.

@mtrefzer The server closes the Readables for us; we don’t have to close them ourselves in this case.