使用 socket.io 和 webpack-dev-server 时出错 [英] Error using socket.io along with webpack-dev-server

问题描述

小伙伴们，我正在尝试将 webpack-dev-server 与 socketio 一起使用，但是在尝试了不同的方法之后，我发现两个客户端都在侦听同一个端口3000"，最终我进行了某种握手如果我不在同一个端口上使用 webpack-dev-server，错误就会消失.. 这是我的服务器配置

Quick question guys, I am trying to use webpack-dev-server with socketio, but after trying different things, i figured both of the clients are listening to the same port '3000' and I end up with some kind of handshake error that goes away if I dont use webpack-dev-server on the same port.. here is my server config

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 配置

and webpack config

  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

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

I was trying is to proxy the request to a different port

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'
  ],

但我不知道这是否可行，有人知道如何解决这个问题吗?

but I don't know if that is the way to go, anyone know how to fix this?

推荐答案

问题是您的代理配置不正确.默认情况下，当您调用 socket.io 构造函数时，这一行

The issue is your proxy is not correctly configured. By default when you call the socket.io constructor, this line

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 行.所以实际上正确的配置如下:

All socket.io requests will go to your webpack dev server http://localhost:3000/socket.io (note the end of the URL - important) in your case. You want to proxy those requests to http://localhost:4000/socket.io, not every request that hits http://localhost:3000. You're also missing the ws: true line. So actually the correct configuration is the following:

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

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

You don't need the first '/api' part if you don't have have a backend API that is listening to other requests. I'm just assuming you do. It's possible you just have all sockets in which case you can ignore that line. In most cases, people will have sockets and other http requests.

希望这可以帮助任何尝试使用代理设置 webpack-dev-server 和 socket.io 的人.

Hope this helps anyone trying to set up webpack-dev-server and socket.io with a proxy.

这篇关于使用 socket.io 和 webpack-dev-server 时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！