Class SseDriver

Example

Client-side code (browser with SSE support):

const publisherJwtKey = "mercure-publisher-jwt-key";
const driver = new SseDriver({
  url: "http://localhost:8080/.well-known/mercure",
  publisher: {
    headers: {
      Authorization: `Bearer ${publisherJwtKey}`,
    },
  },
});
Copy

You can use this JWT publisher key with the Mercure server's default configuration for testing purposes:

eyJhbGciOiJIUzI1NiJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdLCJzdWJzY3JpYmUiOlsiKiJdfX0.bVXdlWXwfw9ySx7-iV5OpUSHo34RkjUdVzDLBcc6l_g
Copy

Running a local Mercure server for testing:

docker run --rm -p 8080:80 \
  -e SERVER_NAME=':80' \
  -e MERCURE_PUBLISHER_JWT_KEY='!ChangeThisMercureHubJWTSecretKey!' \
  -e MERCURE_SUBSCRIBER_JWT_KEY='!ChangeThisMercureHubJWTSecretKey!' \
  dunglas/mercure:latest caddy run --config /etc/caddy/dev.Caddyfile
Copy

Instead of using Mercure, you can use a Node.js server:

const express = require("express");
const cors = require("cors");

const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(cors({ origin: true, credentials: true }));

const namespaces = new Map();

// route for outgoing messages (subscribe/stream)
app.get("/.well-known/mercure", (req, res) => {
  const { topic } = req.query;
  if (!topic) return res.status(400).end();
  // support multiple topics in a single request
  const topics = Array.isArray(topic) ? topic : [topic];
  for (const t of topics) {
    const clients = namespaces.get(t) || new Set();
    namespaces.set(t, clients);
    clients.add(res);
  }
  // set headers to establish the SSE stream
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");
  res.flushHeaders();
  // clean up if the browser closes the page or disconnects
  req.on("close", () => {
    for (const t of topics) {
      const clients = namespaces.get(t);
      if (clients) {
        clients.delete(res);
        if (!clients.size) namespaces.delete(t);
      }
    }
    res.end();
  });
});

// route for incoming messages (publish)
app.post("/.well-known/mercure", (req, res) => {
  const { topic, data = "" } = req.body || {};
  if (topic) {
    const topics = Array.isArray(topic) ? topic : [topic];
    for (const t of topics) {
      const clients = namespaces.get(t);
      if (clients) {
        for (const client of clients) {
          client.write(`data: ${data}\n\n`);
        }
      }
    }
  }
  res.status(200).end();
});

app.listen(8080);
Copy