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!

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!

• javascript
• frontend
• server-sent-events
• connection-timeout

Share Improve this question Follow edited Mar 31, 2022 at 8:17 Sanket Karandikar asked Mar 31, 2022 at 7:28 Sanket KarandikarSanket Karandikar 12333 silver badges1515 bronze badges 9

• "My problem is backend is taking some time(2 to 3 mins) to respond." That is indeed your problem, so why are you trying to fix a symptom of that problem? Is someone else in charge of the backend? Are you doing extremely heavy calculations that makes it impossible to reduce the response time? Why is the response time so extremely long? – Emil Karlsson Commented Mar 31, 2022 at 7:40
• 1 You don't need any polyfills: all modern browsers have native support for SSE excepting IE, but I'm skeptical that you actually need to support IE11... – Dai Commented Mar 31, 2022 at 7:47
• 1 @EmilKarlsson operations are like fetching all the records from different tables to show in one table. (thats the requirement). It is difficult to reduce that time as of now. But how can I increase the timeout from 45 seconds to 3 mins or close to it? – Sanket Karandikar Commented Mar 31, 2022 at 8:14
• 1 @Dai I am using eventSourcePollyfill because it allows me to send Authorization header. I am not sure if simple eventSource allows us to send headers. – Sanket Karandikar Commented Mar 31, 2022 at 8:16
• 2 You shouldn't normally need to use the Authorization header with SSE endpoints - and cookies work just fine. – Dai Commented Mar 31, 2022 at 8:23

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 2

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./tserkov/vue-sse/issues/35#issuement-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",

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