Is it possible to proxy websocket connections within the webpack dev server? I know how to proxy regular HTTP requests to another backend but it's not working for websockets, presumably because the target in the proxy configuration starts with http://...
3 Answers
Version 1.15.0 of the webpack-dev-server supports proxying websocket connections. Add the following to your configuration:
devServer: {
proxy: {
'/api': {
target: 'ws://[address]:[port]',
ws: true
},
},
}
2 Comments
p7adams
They should put this bolded into the documentation. I wasted a few hours right now to figure out why socket.io is using polling instead of web sockets.
MartianMartian
got it working. stackoverflow.com/questions/42611926/…
@Mr. Spice's answer is correct. But it can be further simplified, check http-proxy-middleware, it can be set as following, i.e. just add ws: true and keep other settings as usual.
// proxy middleware options
var options = {
target: 'http://www.example.org', // target host
changeOrigin: true, // needed for virtual hosted sites
ws: true, // proxy websockets
...
3 Comments
Greg Veres
Sorry @Quilang, but I find your example insufficient to answer the question. The OP was looking for something in the context webpack-dev-server. I can't understand from your answer how that relates to a node.js middleware for proxying. What do the devServer: options look like?
rosencreuz
webpack-dev-server uses http-proxy-middleware, so basically proxy settings of the webpack-dev-server is actually http-proxy-middleware options. They're same. I didn't get what he means by 'further simplified' though
glexey
@rosencreuz - I guess the simplification is that you don't have to specify both target: 'ws://' and ws: true - one of those is enough, according to the docs. This is useful when you want to proxy both http and ws, so you can just leave target: 'http://'
Webpack dev server does not support proxying ws connections yet.
Until then, you can implement proxying manually, by adding additional http-proxy to webpack server:
Add new dependency to
package.json:"http-proxy": "^1.11.2"Proxy websocket connections manually by listening to
upgradeevents// existing webpack-dev-server setup // ... var server = new WebpackDevServer(...); proxy = require('http-proxy').createProxyServer(); server.listeningApp.on('upgrade', function(req, socket) { if (req.url.match('/socket_url_to_match')) { console.log('proxying ws', req.url); proxy.ws(req, socket, {'target': 'ws://localhost:4000/'}); } }); //start listening server.listen(...)
NOTE (after using this for some time)
There is an issue with proxying websockets as socket.io is used by WebpackDevServer to notify browser of code changes. socket.io may conflict with proxying websockets; in my case, connections were being dropped before handshake was returned from my server unless it responded very quickly.
At that point, I just ditched WebpackDevServer and used custom implementation based on react-hot-boilerplate
devServer.publicnot suffice (seems like it would send all your WDS requests to that public domain/host)?