Websockets can be proxied, but the method is undocumented

[dceddia]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes

Description

I was trying to proxy Websockets through the "proxy" feature built into CRA. With a proxy setting of "http://localhost:4000" (an express server), the Websocket doesn't work. However, with a URL of "ws://localhost:4000", the Websockets do work! 😄 (along with regular HTTP requests). According to the underlying http-proxy-middleware library, this is supported.

This is great. So why file this issue? There are 2 conflicting pieces of info in CRA:

• This comment in start.js implies Websockets are supported.
• The README / User Guide says "Currently the proxy option only handles HTTP requests, and it won’t proxy WebSocket connections."

I'd be happy to submit a PR with these changes.

Expected behavior

The README should advertise Websocket proxying with the "ws://" prefix, and the comment in start.js should probably be updated to mention the prefix too.

Actual behavior

The current docs about Websockets undersell the actual functionality 😄

Environment

This isn't environment-related.

[dceddia]

Ok, so, unfortunately this stopped working shortly after posting this issue. I think it's got something to do with the websocket "upgrade" request.

But! If I add a ws: true to the httpProxyMiddleware config in start.js, it does work:

httpProxyMiddleware(pathname => mayProxy.test(pathname), { 
  target: proxy,
  logLevel: 'debug',
  onError: onProxyError(proxy),
  secure: false,
  changeOrigin: true,
  ws: true  // <-- add this
})

Is there a reason CRA doesn't already set this flag?

[cloudmu]

Just additional data points. The following work over CRA dev proxy for me:

• socket.io
• EventSource

Unless you have a hard requirement for ws, socket.io is a great alternative.

[dceddia]

Socket.io works for me too. I'm using that in the meantime.

From reading around the web it seems like most browsers support real websockets these days (and have for a few years), and the posts I found recommended using pure websockets to avoid adding an extra library.

EventSource looks nice but isn't as widely supported (EventSource vs Websockets @ caniuse).

[gaearon]

What is the conclusion? Anything we need to do on our side?

[gaearon]

Is there a reason CRA doesn't already set this flag?

I couldn't figure out a way to test it. I think I was even testing it but couldn't make it work.
No other reason.

[dceddia]

I can make a PR for the ws: true flag, just as soon as I get my create-react-app clone working again... after re-cloning it, when I run "npm start" the browser comes up and renders a data url string instead of the app. I might be doing something wrong though, will try again after sleep.

[dceddia]

See PR #1090 -- test plan is in there too.

I added the ws: true flag to turn on proxying websockets. Strangely, that did not turn them on immediately: http-proxy-middleware waits for an initial HTTP request before it will upgrade the connection to enable websockets. So the change also includes listening for that "upgrade" event and upgrading the connection, so users don't need to issue that dummy request.

[gaearon]

Strangely, that did not turn them on immediately: http-proxy-middleware waits for an initial HTTP request before it will upgrade the connection to enable websockets. So the change also includes listening for that "upgrade" event and upgrading the connection, so users don't need to issue that dummy request.

Maybe that's why I couldn't confirm that option's working, and didn't include it.

[frontsideair]

I think #1090 enabled this. I can confirm it works. (I mean it always worked with socket.io since if falls back to long polling if websocket can't be established but after the release with this PR it works over websocket as well, without falling back to long polling.) The doc can be safely changed to reflect this.

[gaearon]

@frontsideair Want to send a PR to the doc?

[frontsideair]

A little bit late, but here it is.