EventSource not working

[jmls]

I don't know if this is a http-proxy-middleware problem or a browser-sync problem (reported there as well BrowserSync/browser-sync#872) but I can't get EventSource to work when using this combination.

I am trying to use EventSource from my node-js app and push events to the client -

Has anyone managed to get this working ? I have no errors, no messages on the console but also no events. :(

If I run an example app just using node, things work fine so I know it's a problem with the combination of browser-sync and http-proxy-middleware

thanks

[chimurai]

@jmls Could you provide a sample setup showing this issue? Debugging it will be much faster.

Did you tried your setup with express + http-proxy-middleware to check if the same issue occurs. If it doesn't than it might be an issue browser-sync. If it also happens in that setup it might be an issue in http-proxy-middleware.

[chimurai]

Don't think this is a http-proxy-middleware issue.

Feel free to re-open this issue if you think it is a bug.

[doejon]

Just out of curiosity: Is there any way to set the keep alive timeout for proxy within webpack config?
When using SSE (EventSource) in combination with http-proxy-middleware, proxy disconnects SSE after 2 minutes (I assume it's the proxy's default keep-alive timeout).

Is there any flag I can set to avoid a SSE keep-alive-related disconnect?

devServer: {
    proxy: {
      '/api/*': {
        target: 'XYZ',
        secure: false,
        changeOrigin: true
      },[...]

[chimurai]

I never used SSE...

But you can try to configure a custom agent and set the timeout accordingly.
https://nodejs.org/api/http.html#http_class_http_agent

You'll something like this:

const http = require('http');
var keepAliveAgent = new http.Agent({ keepAlive: true });

devServer: {
    proxy: {
      '/api/*': {
        target: 'XYZ',
        secure: false,
        changeOrigin: true,
        agent: keepAliveAgent
      },[...]

[isabolic]

any example for SSE ?

[orszaczky]

@chimurai Why is this closed? SSE is definitely not working over http-proxy-middleware.
I tested with a simple barebone setup (https://dev.to/4shub/building-with-server-sent-events-13j - only with express and http-proxy-middleware) and it's working without the middleware, but not working when I try to proxy.

Also every time the connection times out node logs out this message:
[HPM] Error occurred while trying to proxy request /stream-random-numbers from localhost:4000 to http://localhost:4040 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I can setup an example repo if needed, to demonstrate that messages are not arriving to the client

[johnwebbcole]

Has anyone made progress using eventSource requests through httlp-proxy-middleware? For my tests, the request works, but reconnection fails, even with the agent set as above.

[andrecrimb]

Same problem.

[chimurai]

Here is an issue #371 in which compression module is causing issues. Maybe it's related to that.

A dozen of (mis)configuration can lead to a non-working setup.
Without a minimal working example (server + client) there is little to investigate.

[chimurai]

Verified proxying SSE is working with:
http://express-eventsource.herokuapp.com

const app = express();

app.use(createProxyMiddleware({
  target: 'http://express-eventsource.herokuapp.com',
  changeOrigin: true,
}));

app.listen(3000);

[cherrydev]

@chimurai I've verified that it works when you disable compression, but what it does not do is close the connection to the server when the client disconnects from an EventStream. I've tried it both with just closing the browser window and with cleaning up with eventStream.close(). I'm using http-proxy-middleware through the webpack dev server.

[andrecrimb]

I'm using http-proxy-middleware in a React environment and I found out that the problem wasn't really with http-proxy-middleware, but somehow with how react is handling proxying by default with setupProxy.js.
I was able to bypass this EventSource "problem", creating a separated dev proxy file and proxying the React dev environment there.

      const express = require('express')
      const app = express()
      const { createProxyMiddleware } = require('http-proxy-middleware')
      
      app.use(
        '/api',
        createProxyMiddleware({
          secure: true,
          changeOrigin: true,
          target: 'http://your-api-url'
        })
      )
      
      const wsProxy = createProxyMiddleware({
        changeOrigin: true,
        target: 'http://localhost:3000',
        ws: true
      })
      app.use('/sockjs-node', wsProxy)
      
      app.use(
        '/',
        createProxyMiddleware({
          changeOrigin: true,
          target: 'http://localhost:3000'
        })
      )
      
      const server = app.listen(3001)
      
      server.on('upgrade', wsProxy.upgrade)