Big Delays and Sends Messages in Bulk Instead of Streaming

[kheireddinebou]

@EmilJunker When using our SSE endpoint with timeout, interval, and times, the client experiences a long delay before connecting. Once connected, all messages are delivered at once rather than at the specified interval. The expected behavior is that the client connects quickly and receives one message per interval until the timeout is reached, at which point the connection closes.

Steps to Reproduce:

1. Call the SSE endpoint with these params (example):
   • timeout=10000 (10s)
   • interval=1000 (1s)
   • times=5
2. Observe that the connection takes a while to open.
3. Once open, messages arrive in bulk instead of at each interval.

Expected Behavior:

• Quick connection to the SSE stream.
• Each message arrives separately according to the set interval.
• Connection closes automatically at the end of the timeout.

Actual Behavior:

• Delayed connection.
• All messages are sent simultaneously instead of per interval.

Stack:

• Expo : "~51.0.39"
• react-native-sse: "^1.2.1",
• react-native: "0.74.5"

This testing endpoint also gets a big delay to connect !
https://stream.wikimedia.org/v2/stream/recentchange

My Code:

useEffect(() => {
const url = ${API_URL}/sse/test/${currentUserId}?timeout=10000&interval=1000&times=5;
eventSource = new EventSource(url);
eventSource.addEventListener("open", () => {
console.log("connected");
});

eventSource.addEventListener("message", event => {
  console.log("event.data", event.data);
});

eventSource.addEventListener("close", () => {
  console.log("close");
});

});

[EmilJunker]

I can't reproduce this. Using the Wikimedia testing endpoint, I don't notice any initial connection delay, and there is a constant stream of messages coming in each second.

My code:

useEffect(() => {
    console.log('sse init');

    const url = 'https://stream.wikimedia.org/v2/stream/recentchange';
    const eventSource = new EventSource(url);

    eventSource.addEventListener('open', () => {
        console.log('sse connected');
    });

    eventSource.addEventListener('message', (event) => {
        console.log('sse message', event.data?.substring(0, 100));
    });

    eventSource.addEventListener('close', () => {
        console.log('sse closed');
    });

    return () => eventSource.close();
}, []);

Stack:

"react-native": "0.76.1",
"react-native-sse": "^1.2.1",
(no expo)

@kheireddinebou If it helps, you can pass the debug: true option when initalizing the EventSource to see internal logs from react-native-sse. This might help you to figure out the problem on your end.

[jaswinprakash]

@EmilJunker When using our SSE endpoint with timeout, interval, and times, the client experiences a long delay before connecting. Once connected, all messages are delivered at once rather than at the specified interval. The expected behavior is that the client connects quickly and receives one message per interval until the timeout is reached, at which point the connection closes.

Steps to Reproduce:

1. Call the SSE endpoint with these params (example):

   • timeout=10000 (10s)
   • interval=1000 (1s)
   • times=5

2. Observe that the connection takes a while to open.

3. Once open, messages arrive in bulk instead of at each interval.

Expected Behavior:

• Quick connection to the SSE stream.
• Each message arrives separately according to the set interval.
• Connection closes automatically at the end of the timeout.

Actual Behavior:

• Delayed connection.
• All messages are sent simultaneously instead of per interval.

Stack:

• Expo : "~51.0.39"
• react-native-sse: "^1.2.1",
• react-native: "0.74.5"

This testing endpoint also gets a big delay to connect ! https://stream.wikimedia.org/v2/stream/recentchange

My Code:

useEffect(() => { const url = ${API_URL}/sse/test/${currentUserId}?timeout=10000&interval=1000&times=5; eventSource = new EventSource(url); eventSource.addEventListener("open", () => { console.log("connected"); });

eventSource.addEventListener("message", event => {
  console.log("event.data", event.data);
});

eventSource.addEventListener("close", () => {
  console.log("close");
});

});

I have exact same issue in my app, streaming works in postman but in app bulk response with too much delay, did you find a fix for this?

[symbol-for]

@EmilJunker When using our SSE endpoint with timeout, interval, and times, the client experiences a long delay before connecting. Once connected, all messages are delivered at once rather than at the specified interval. The expected behavior is that the client connects quickly and receives one message per interval until the timeout is reached, at which point the connection closes.

Steps to Reproduce:

Call the SSE endpoint with these params (example):

timeout=10000 (10s)
interval=1000 (1s)
times=5
Observe that the connection takes a while to open.

Once open, messages arrive in bulk instead of at each interval.

Expected Behavior:

Quick connection to the SSE stream.
Each message arrives separately according to the set interval.
Connection closes automatically at the end of the timeout.
Actual Behavior:

Delayed connection.
All messages are sent simultaneously instead of per interval.
Stack:

Expo : "~51.0.39"
react-native-sse: "^1.2.1",
react-native: "0.74.5"
This testing endpoint also gets a big delay to connect ! https://stream.wikimedia.org/v2/stream/recentchange

My Code:

useEffect(() => { const url = ${API_URL}/sse/test/${currentUserId}?timeout=10000&interval=1000&times=5; eventSource = new EventSource(url); eventSource.addEventListener("open", () => { console.log("connected"); });

eventSource.addEventListener("message", event => {
console.log("event.data", event.data);
});

eventSource.addEventListener("close", () => {
console.log("close");
});
});

I have exact same issue in my app, streaming works in postman but in app bulk response with too much delay, did you find a fix for this?

[418442040]

I'm experiencing the same issue @EmilJunker

[phanvanphuhn]

Should add "Accept: "text/event-stream" with "Content-Type": "application/json"

E.g:
headers: {
Authorization: Bearer ${process.env.EXPO_PUBLIC_AWS_BEARER_TOKEN},
Accept: "text/event-stream",
"Cache-Control": "no-cache",
"Content-Type": "application/json",
"x-requested-with": "XMLHttpRequest",
"x-thread-id": threadId,
},

[kheireddinebou]

Should add "Accept: "text/event-stream" with "Content-Type": "application/json"

E.g: headers: { Authorization: Bearer ${process.env.EXPO_PUBLIC_AWS_BEARER_TOKEN}, Accept: "text/event-stream", "Cache-Control": "no-cache", "Content-Type": "application/json", "x-requested-with": "XMLHttpRequest", "x-thread-id": threadId, },

I think there is no need to add them. I didn't add them in my case

[slimane777]

Same issue here, any solution @kheireddinebou ?

[kheireddinebou]

Same issue here, any solution @kheireddinebou ?

No, It works well sometimes especially in production, but in dev 99% no, and many users face issues with it, so we are deciding to move to websockets in the next days