rauschma/README.md

## README.md

      
    Raw
  

              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);
  }
}
	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);
	});
	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);
	}
	}