fetchEventSource() repeats request indefinitely

[Blabter]

I have SSE-endpoint http://localhost/sse-endpoint that returns next data:

data:{text: "He"}
id:0

data:{text: "ll"}
id:2

data:{text: "o,"}
id:4

data:{text: " u"}
id:6

data:{text: "se"}
id:8

data:{text: "r!"}
id:10

I use this client code to fetch data:

import { fetchEventSource } from "@microsoft/fetch-event-source";

console.log('Start');
fetchEventSource("http://localhost/sse-endpoint"), {
  method: "POST",
  onmessage(ev) {
    console.log('Received data');
    console.log(ev.data);
  }
});

Expected output:

Start
Received data
{text: "He"}
Received data
{text: "ll"}
Received data
{text: "o,"}
Received data
{text: " u"}
Received data
{text: "se"}
Received data
[{text: "r!"}

Actual output:

Start
Received data
{text: "He"}
Received data
{text: "ll"}
Received data
{text: "o,"}
Received data
{text: " u"}
Received data
{text: "se"}
Received data
[{text: "r!"}
Received data
{text: "He"}
Received data
{text: "ll"}
Received data
{text: "o,"}
Received data
{text: " u"}
Received data
{text: "se"}
Received data
[{text: "r!"}
// Output continues infinitely

In devtools tab "Network" I can see that requests to /sse-endpoint continues indefinitely

[sahilhaslani]

make sure your server code is responding with:

  res.setHeader('Cache-Control', 'no-cache, no-transform');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Content-Type', 'text/event-stream');
  res.flushHeaders();

[Blabter]

make sure your server code is responding with:

  res.setHeader('Cache-Control', 'no-cache, no-transform');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Content-Type', 'text/event-stream');
  res.flushHeaders();

It's external server and I can't control it, but it has following HTTP response headers:

Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Type: text/event-stream

[sameert89]

This will only happen when server keeps sending you events. On message only fires when server sends events. To mitigate this (since you don't have control over the server): call abort using an AbortController once you get a set of messages you need and reconnect when you need them again.

[ningxiner0201]

Set the "openWhenHidden" true and can be solved.
fetchEventSource(API, { openWhenHidden: true })

[congjinruo]

vConsole may cause this issue, remove it.