webpack-dev-server中的代理websockets连接

Question

是否可以在webpack开发服务器中代理websocket连接?我知道如何将常规HTTP请求代理到另一个后端，但它不适用于websockets，大概是因为代理配置中的目标以http://..开始。

Answer 1

1.15.0版本的webpack-dev-server支持代理websocket连接。将以下内容添加到您的配置中:

devServer: {
  proxy: {
    '/api': {
       target: 'ws://[address]:[port]',
       ws: true
    },
  },
}

Answer 2

Webpack开发服务器还不支持代理ws连接。

在此之前，您可以手动实现代理，通过添加额外的http-proxy到webpack服务器:

• 添加新的依赖到package.json:

  "http-proxy": "^1.11.2"
  

• 通过监听upgrade事件手动代理websocket连接

  // 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(...)   
  

说明(使用一段时间后)

有一个问题，代理websockets作为socket.io被WebpackDevServer用来通知浏览器的代码更改。socket.io可能与代理websockets冲突;在我的例子中，连接在握手从我的服务器返回之前就被丢弃了，除非它响应非常快。

那时，我抛弃了WebpackDevServer，使用基于react-hot-boilerplate的自定义实现

Answer 3

@Mr。Spice的答案是正确的。但是可以进一步简化，检查http-proxy-middleware，可以这样设置，即只添加ws: true，其他设置保持不变。

// proxy middleware options
var options = {
        target: 'http://www.example.org', // target host
        changeOrigin: true,               // needed for virtual hosted sites
        ws: true,                         // proxy websockets
        ...