Every 45000 milliseconds retry request again and again

[MrJimmyYi]

I met a problem: "No activity within 45000 milliseconds. Reconnecting" I use EventSourcePolyfill.But the background response time may take 5 minutes more than 45 seconds by default. I tried many methods, but they are all failed. How to set its reconnection time according to custom Settings？

[MrJimmyYi]

Hi! I found a solution in eventsource.js

>eventsource.js

function start(es, url, options){ ... var heartbeatTimeout = parseDuration(options.heartbeatTimeout, 45000); ... } Look! Our default 45000 and custom heartbeat times are here.

So, I tried to modify this line of code , Here is my modified code： var heartbeatTimeout = parseDuration(options.headers.heartbeatTimeout, 45000);

Then I added heartbeatTimeout in the header to specify 3 minutes： new EventSourcePolyfill(url,{ headers: { heartbeatTimeout: 180*1000 } })

Because I'm using Spring SseEmitter，the server also sets a timeout period of 10 minutes: SseEmitter sseEmitter = new SseEmitter(600000L);

This means I retry to connect to the server every 3 minutes during the 10-minute validity period

So, it worked，Won't retry to connect the server every 45 seconds, using a custom 5-minute time limit for requests instead. Perfect!

[udhayakumarcp]

[cwirz]

@udhayaas97 i switched to use this package instead: https://www.npmjs.com/package/eventsource

[udhayakumarcp]

@cwirz , Thank you for your reply. There I have raised three issues.

1. https://github.com/EventSource/eventsource/issues/234
2. https://github.com/EventSource/eventsource/issues/235
3. https://github.com/EventSource/eventsource/issues/236

Is there any working example for Angular?

[sanketkarandikar]

@MrJimmyYi I tried your solution, but no matter what changes I do in eventSource.js and pass heartbeatTimeout in headers, it is not reflecting. What could be wrong?

[raburuz]

Hi there.

This is my solution to this problem, I hope this code can help you

const yourXApiMethod = async ( req: Request, res: Response  ) => {

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

    keepAliveConnection(res)

    //Your business logic here

    res.write("event: log\n")
    res.write("data: hi\n\n")

  }

const keepAliveConnection = (res : Response ) => {
  res.write(": "+"sse-keep-alive\n")
  setTimeout(() =>  keepAliveConnection(res), 5000);
}

The keepAliveConnection function maintains the SSE connection, eliminating the need to retry connecting to the server every "X" minutes with a "heartbeatTimeout" value in the frontend.

Conclusion: The solution is to send data periodically from your server to your frontend