I am using eventSource API and added the addEventListener() to the eventsouce. The event source is activated till only 45 seconds. I want to keep the connection alive until the server send the response back to client.

Now, I am getting the below exception because there is no response back from the server till 45 secs.

EXCEPTION: No activity within 300000 milliseconds. Reconnecting.

Please give me some pointers to make the connection alive/ any other approach to achieve it.

I am using eventSource API and added the addEventListener() to the eventsouce. The event source is activated till only 45 seconds. I want to keep the connection alive until the server send the response back to client.

Now, I am getting the below exception because there is no response back from the server till 45 secs.

EXCEPTION: No activity within 300000 milliseconds. Reconnecting.

Please give me some pointers to make the connection alive/ any other approach to achieve it.

• javascript
• server-sent-events
• polyfills
• server-push
• eventsource

3 Answers 3

The solution is to send data periodically, even null bytes work and will keep the connection alive.

If the connection can not be established and you want to retry connecting, it is possible to use setTimeout set for instance to 45 seconds.

Once the connection is established use clearTimeout to stop trying.

I using EventSourcePolyfill and I managed to extend the time from 45000 milliseconds to 2 minutes using heartbeatTimeout: 120000,

const sse = new EventSourcePolyfill(`yourURL`,
                    {
                        headers: {
                            'Content-Type': 'text/event-stream',
                            'Cache-Control': 'no-cache',
                            'Connection': 'keep-alive',
                            'X-Accel-Buffering': 'no',
                            Authorization: `Bearer ${access_token}`,
                        },
                        heartbeatTimeout: 120000,
                        withCredentials: true,
                    });
    
                        sse.onmessage = (e) => {
                            console.log(e);
                        }
                        sse.onerror = (event) => {
                            console.log(event);
                            sse.close();
                        }

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