Can't proxy websocket request using proxy option

[chalkbit]

The webpack-dev-server does not explicitly handle websockets through the proxy option. I would expect an entry like this to correctly proxy websocket requests:

proxy : [{path: /ws, target: ws://localhost:8080/, ws: true}]

After inspecting the Server.js file, it seem that there would need to be explicit handling of websockets. Something like this perhaps:

options.proxy.forEach(function (proxyOptions) {
    app.all(proxyOptions.path, function (req, res) {
        if(typeof proxyOptions.rewrite === 'function') proxyOptions.rewrite(req, proxyOptions);
        if (proxyOptions.host) {
            req.headers.host = proxyOptions.host;
        }
        if (proxyOptions.ws) {
            proxy.ws(req, res, proxyOptions, errorCb.bind(this));
        } else {
            proxy.web(req, res, proxyOptions, errorCb.bind(this));
        }
        function errorCb(err){
            var msg = "cannot proxy to " + proxyOptions.target + " (" + err.message + ")";
            this.io.sockets.emit("proxy-error", [msg]);
            res.statusCode = 502;
            res.end();
        }

        if (proxyOptions.configure) {
            proxyOptions.configure(proxy);
        }
    }.bind(this));
}.bind(this));

or add a new listener for websocket connections:

proxyServer.on('upgrade', function (req, socket, head) {
  proxy.ws(req, socket, head);
});

[jedwards1211]

@gymb321 I'd recommend using iframe mode (i.e. put a contentBase in your dev server config and go to localhost:port/webpack-dev-server/index.html in your browser). This is the only way I know of to connect to a backend server via websocket.

I'm still learning about web sockets but as far as I can tell there's no simple or standard way to proxy websocket traffic that's not intended for webpack-dev-server to the backend server.

[mingfang]

+1

[Jarema]

👍 Lack of websocket proxy support makes using dev-server with "real" backend servers that are based on ws impossible.

[readme42]

👍

[andreasvoigt]

👍

[geddski]

+1

[thomasboyt]

Looks to me that the issue with either of the suggested code snippets is that app.all(path, cb) in express doesn't fire for websocket connections, since express only listens for traditional HTTP(S) connections.

There are various middleware modules out there that try to solve this issue, such as express-ws, but I've had trouble getting them to work (possibly because the webpack-dev-server SockJS server is interfering?).

[thomasboyt]

Hacked together a quick solution, can turn into a PR if it seems like the right route: thomasboyt@f2fceae

[jedwards1211]

Hey @thomasboyt, thanks so much for that!!! I've been dying to be able to proxy websockets!

I had to make one change to get it to work; if you don't add an error handler to proxy, if it fires an 'error' event, the default error handler will throw the error, which seems to break something (I'm not sure what, the process just seems to hang, but since the error is probably getting thrown in the middle of stream communication it's probably not good). So if you simply add this underneath the requires:

proxy.on('error', function(err) {
    console.error(err.stack);
});

It fixes that issue. My sockets were sometimes hanging up so it was a major issue for me.

[geddski]

web sockets support will be very nice. I currently proxy them manually with a separate server.

Thanks to @sokra and @SpaceK33z (and perhaps others?) web socket proxying (with socket.io) has been working for at least a couple of weeks now, since resolution #302. This is the config which is working (for me):

I have a socket.io server running on localhost:8001, on path /napi:

var io = require('socket.io')(http, { path: '/napi' })

In webpack config:

devServer: {
        proxy: {
            '/napi/*': {
                target: 'ws://localhost:8001',
                ws: true,
            },
        },
    },

In socket.io client:

var socket = io({ path: '/napi' })

I'm launching with:
webpack-dev-server --inline --hot

[jedwards1211]

@apotropaix are you saying that websocket proxying should work without @thomasboyt's patch?

@jedwards1211 Yes. confirm. I have webpack-dev-server@1.14.0 installed.

[jedwards1211]

@apotropaix I see...I'm confused though, how is that possible when there aren't any proxy.ws() calls in that version's Server.js?

[jedwards1211]

@apotropaix nevermind, I see how it works looking at node-http-proxy documentation. Thanks for enlightening us!