Initial websocket http request not upgrading

[Hamza141]

The initial websocket http request to the proxy never gets upgraded and is left hanging. However, any subsequent requests are upgraded properly. Why does listening to the upgrade event and handling it on the proxy side fix this issue? Is there a way to fix this issue without listening to that event because in my actual scenario, I don't have access to the server.

Steps to reproduce

Described in the demo section below.

Expected behavior

The initial request should get upgraded. However, if the initial one is failing, all subsequent ones should also fail.

Actual behavior

The initial request does not get upgraded but any subsequent ones get upgraded.

Setup

• http-proxy-middleware: 1.0.3
• http-proxy-middleware configuration:
  createProxyMiddleware({ target: 'http://localhost:8844', logLevel: 'debug', ws: true })
• server: express@4.16.4

client info

Issue occurring on Windows 10, Ubuntu 16.04 and RHEL 7

target server info

Basic http server with websocket support

Reproducible Demo

https://github.com/Hamza141/websocket-proxy-test

• Run npm install in each of the 3 folders
• Start server with node server.js
• Start proxy server with node proxy.js
• Run client with node client.js. Proxy will not upgrade request.
• Run client again but this time the request will get upgraded and data will transfer between the client and server.

[andyvanee]

I had the same problem and found that this issue is actually documented in the README, it just didn't occur to me that it applied to my situation.

https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade

The initial http request referred to there is a non-websocket request. In my case, I have multiple sub-apps proxied from a single routing app, and some of the sub-apps ONLY listen for websocket requests as well as automatically reconnecting if the backend restarts. Both of these use cases fail without using the code from the External WebSocket upgrade section, making it absolutely mandatory for me...

To make matters worse (in my case), all of my sub apps are defined in separate files as separate express apps, which means they don't have access to server to hook into upgrade event. I got around this by triggering a custom event in the listen callback which the sub apps can listen for.

server.js

const server = app.listen(process.env.HTTP_PORT || 80, () => {
    app.emit("LISTENING", server)
})

sub_app.js

const app = express()
const proxy = createProxyMiddleware(options);
app.use('/subapp/', proxy)

app.on("mount", parent => {
    parent.on("LISTENING", server => {
        server.on("upgrade", proxy.upgrade)
    })
})

[kellywang1234]

thanks for your solution! i have the same multiple sub-apps proxied structure as your. when i tried your sub_app.js code the app.on('mount') function is not triggered, do you have some ideas why it is not triggers? Thanks!!!

[andyvanee]

My example may not have been clear since I used the variable name app in both server and sub_app. These are separate instances of express, with the sub-app included in the main app with something like app.use(subapp). Here's an example of how that works: https://gist.github.com/andyvanee/21f58a514f5ab81854bb4e112ac4f08e

[Hamza141]

I was able to get access to the server and listen to the upgrade event but I agree that the docs aren't clear as to when to use the code from the External WebSocket upgrade section.

[kellywang1234]

do you still remember how you were able to get access to server and upgrade during initial load? Thanks!

[Hamza141]

The express server was always accessible from the js library I was using, I just didn't read the documentation thoroughly enough. Ended up asking someone more experienced for help who pointed that out to me.

Once I had the express server, I just did what Andy did above.
server.on('upgrade', proxy.upgrade)