SSE

SSE is a mechanism that allows servers to push data to clients in real-time over an HTTP connection. It's a simple, lightweight protocol that builds upon HTTP.

The EventSource API in the browser provides a straightforward way to handle SSE events. Here is how it works:

We create an EventSource object and specifies the URL of the SSE endpoint. The server then keeps the connection, and write events to it. The browser receives the events and trigger the onmessage on the EventSource object, now we can handle those events.

SSE is an underevaluated technology. Only in recent years, due to the slowness of LLM inference, has the adoption of SSE increased.

A minimal Implementation

const http = require('http')

const clients = []

const server = http.createServer((req, res) => {
  if (req.headers.accept !== 'text/event-stream') {
    res.writeHead(200, { 'Content-Type': 'text/html'})
    res.end(`<!DOCTYPE html><html><script>
  const es = new EventSource('/');
  es.onmessage = e => console.log(e)
</script>Open console to see the logs!</html>`)
    return
  }

  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  })

  res.on('close', () => {
    console.log('Client disconnected')
    clients.splice(clients.indexOf(res), 1)
  })
  clients.push(res)
})

function sendToAll(eventName, payload) {
  clients.forEach((res) => {
    res.write(`data: ${JSON.stringify(payload)}\n\n`)
  })
}

setInterval(() => {
  sendToAll('timer', { message: `time is ${new Date}` })
}, 3000)

server.listen(3000, () => {
  console.log(`http://localhost:3000`)
})

Run it with Node.js and open the url in browser to see it in action.

The Little Book of Web Development

SSE

A minimal Implementation