Koa SSE connection reconnecting

Question

I have set up an SSE connection using Koa like so:

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

// Sets up the HTTP header and sends a message via SSE
function writeSSE(ctx, message) {
  ctx.res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    Connection: 'keep-alive',
    'Access-Control-Allow-Origin': '*',
  });

  ctx.res.write(`id: 01\n`);
  ctx.res.write(`data: ${message}\n\n`);
}

// Router Middleware
router.get('/stream', (ctx, next) => {
  writeSSE(ctx, 'Stream reached.');
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(8080);

Where my React components starts the connection like so:

new EventSource("http://localhost:8080/stream")

The component then receives the answer sent by the writeSSE method on the backend.

But for some reason the /stream endpoint is reached every 3 seconds or so, as if the connection was being reestablished.

And my error listener on the front-end catches a CONNECTING event every time.

this.state.source.onerror = (e) => {         
   if (e.target.readyState == EventSource.CONNECTING) {
     console.log("Connecting...");
   }
};

And on the back-end, ctx.response equals { status: 404, message: 'Not Found', header: {} }.

Would anyone know the cause of this issue? Is it linked to the way I use Koa?

Answer 1

this is a bit too late, but I will write my experience with sse using Koa.

• First of all using ctx.res directly is not much appreciated by Koa, if you still want to use it make sure to put ctx.respond = false to bypass koa response mecanism.

• In my experience a stream is the best way to use SSE with Koa you can do something like :

const stream = require('stream');
const koa = require('koa');


const app = new koa();

app.use(async ctx => {
  ctx.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
    });
  ctx.status = 200;
  const stream = new stream.PassThrough()
  ctx.body = stream; // here koa will pipe the ctx.res to stream and end the ctx.res when ever the stream ends.
  let counter = 5;
  const t = setInterval(() => {
    stream.write(`data: hi from koa sse ${counter}`);
    counter--;
    if (counter === 0) {
        stream.end();
      clearInterval(t);
    }
  }, 1000);
});

Hope this help anyone will play with SSE on koa.

PS: I wrote this on hurry if there is anything wrong with code tell me and I will correct it.

Answer 2

I'm in the process of implementing a Koa-based server for SSE. I've been running into the same problem, and here are my thoughts / working solution:

As far as I can tell, the reason why onmessage and onerror keep getting called is because the EventSource object on the client side is emitting an error event. This is causing the connection to be disconnected, which causes the client to send another request to initialize the stream to the server. From here, the process repeats itself indefinitely.

Based on my own testing, EventSource is emitting an error due to the data that is being sent back from the server. Per the docs, a 200 response that has as Content-Type other than 'text/event-stream' will cause a failure.

In your example, you have declared your response as 'text/event-stream' and are passing a string into the ctx.res.write method. While this looks correct, and in fact works when using comparable code and Express, it seems that it doesn't work in Koa. However, if you change the 'data' you are writing to your response to a stream, such as this example here, you'll find that the connection establishes correctly.

Maybe try the following:

//require Passthrough
const PassThrough = require('stream').PassThrough;

//then, in your writeSSE function, try this:
let stream = new PassThrough();
stream.write(`data: ${message}\n\n`);
ctx.res.write(stream);

I'm not 100% sure why this change works. My best guess is that there is something about Koa's ctx object that prevents a plain string or template literal from being viewed as valid text/event-stream data, but this is entirely supposition (this begs the question as to why it works in Express, but hopefully someone more knowledgeable can answer this for both of us). From what I've seen of other snippets published online, the stream approach is the one to take in Koa.

I'm not sure what your results will be, as it looks like you may be using a different version of Koa than I am, but I'd give it a shot. I was able to get my connection established correctly making this small change.