CODEWITHSUNDEEP
javascriptfrontendserver-sent-eventsconnection-timeout
Sanket Karandikar
Sanket Karandikar

Reputation: 123

Event Source timeout in 45 seconds

I am working on eventSource where I get percentage from backend. To implement that I have used Event source pollyfill

My problem is backend is taking some time(2 to 3 mins) to respond. But at the front end the eventSource API is failing stating -

No activity within 45000 milliseconds. Reconnecting

To fix that I tried this solution. But no matter what changes I make in eventSource.js in node_modules they are not reflecting.

Can somebody please look.

Thanks in advance!

Upvotes: 2

Views: 6383

Answers (2)

Narek Grigoryan
Narek Grigoryan

Reputation: 449

put two minutes instead of 45 seconds, you need to add heartbeatTimeout: 120000, in your options

 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();
                            }

Upvotes: 2

Darren Cook
Darren Cook

Reputation: 28938

Set options.hearbeatTimeout to a very large number. E.g. 10 * 60 * 1000 would make it 10 minutes. (The 45000 is just the default.)

To show it is possible, I found an example for doing that in Vue here: https://github.com/tserkov/vue-sse/issues/35#issuecomment-986807802

BTW, there should be no need to hack the source, when an option is already supplied. I've had mixed luck modifying the files in node_modules - they risk getting replaced without notice. Better is to make a branch on github, modify it there, and change your entry in package.json to link to that:

"the_package": "github:YourName/the_package#master",

Upvotes: 2

Related Questions