socket.io - 使用 socket.io 和 webpack-dev-server 时出错

Question

快速提问伙计们，我正在尝试将 webpack-dev-server 与 socketio 一起使用，但是在尝试了不同的事情之后，我发现两个客户端都在监听同一个端口“3000”，我最终遇到了某种握手错误如果我不在同一个端口上使用 webpack-dev-server 就离开.. 这是我的服务器配置

const PORT = process.env.PORT || 3000;

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true,
  setup(app) {

    const server = require('http').Server(app);
    let onlineUsers = 0;
    const io = require('socket.io')(server);

    io.on('connection', (socket) => {
      console.log(`A client is connected:${socket.id}`);
      onlineUsers++;
      io.sockets.emit('onlineUsers', {
        onlineUsers
      });
    });

    server.listen(3000, () => {
      console.log('listening on *:3000');
    });
  }
}).listen(PORT, 'localhost', (err) => {
  if (err) {
    console.log(err);
  }
  console.log(`Listening at localhost: ${PORT}`);
});

和 webpack 配置

  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    './src/app.js'
  ],

这些是错误

WebSocket connection to 'ws://localhost:3000/sockjs-
node/608/jsbr0a0r/websocket' failed: Connection closed 
before receiving a handshake response

T http://localhost:3000/sockjs-node/225/qvolyk2n/eventsource 
iframe.js?ea3f:102 GET http://localhost:3000/sockjs-node/iframe.html 404 (Not Found)
createIframe @ iframe.js?ea3f:102
IframeTransport @ iframe.js?7dcb:42
IframeWrapTransport @ iframe-wrap.js?7e29:11
SockJS._connect @ main.js?45b8:219
SockJS._transportClose @ main.js?45b8:299
g @ emitter.js?927b:30
EventEmitter.emit @ emitter.js?927b:50
(anonymous) @ sender-receiver.js?620a:28
g @ emitter.js?927b:30
EventEmitter.emit @ emitter.js?927b:50
(anonymous) @ polling.js?97d6:41
g @ emitter.js?927b:30
EventEmitter.emit @ emitter.js?927b:50
(anonymous) @ eventsource.js?d407:58
VM776:66[HMR] Waiting for update signal from WDS...
VM1157:49Warning: [react-router] Location "/sockjs-node/225/ucoowxum/htmlfile?c=_jp.alfvbqm" did not match any routes

我试图将请求代理到不同的端口

proxy: {
  "http://localhost:3000": "http://localhost:4000"
}

然后在配置中听

  entry: [
    'webpack-dev-server/client?http://localhost:4000',
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    './src/app.js'
  ],

但我不知道这是否是要走的路，有人知道如何解决这个问题吗？

Answer 1

问题是您的代理未正确配置。默认情况下，当您调用 socket.io构造函数，这一行
const io = require('socket.io')(server);
所有 socket.io 请求都会发送到你的 webpack 开发服务器 http://localhost:3000/socket.io (请注意 URL 的结尾 - 重要)在您的情况下。你要代理那些对 http://localhost:4000/socket.io 的请求, 不是每个命中 http://localhost:3000 的请求.您还缺少 ws: true线。所以实际上正确的配置如下:

proxy: {
    '/api': {
        target: 'http://localhost:4000',
        pathRewrite: {"^/api": ""}
    },
    '/socket.io': {
        target: 'http://localhost:4000',
        ws: true
    }
}

您不需要第一个 '/api'如果您没有正在监听其他请求的后端 API，则部分。我只是假设你这样做。您可能只有所有套接字，在这种情况下您可以忽略该行。在大多数情况下，人们会有套接字和其他 http 请求。

希望这对尝试设置 webpack-dev-server 的任何人有所帮助和 socket.io与代理。