Question

三个快速问题：

1）完全了解Socket.io的好处，我仍然想知道是否有可能运行一个可以同时服务http和ws的webpack-dev-server。联机的所有内容都针对使用Socket.io并针对http / ws运行双服务器。

2）如果确实必须使用Socket.io，本地开发（http服务器和ws服务器是分开的）与生产环境相比如何？生产环境通常是为http和ws运行两台服务器，还是通常一台服务器？

3）如果我可以使用一个webpack-dev-server实例和本机WebSocket，那么如何配置devServer来服务于ws？所有在线示例均与Socket.io双服务器设置有关，因此我无法快速实现。

谢谢！

Answer 1

1）webpack-dev-server只能代理 Websocket连接，仅此而已。

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

2）不需要将服务器分为HTTP和WS部分。要在javascript中同时使用两者，可以使用express-ws。也可以使用其他语言（Spring支持，Django也支持）。

下面的代码段可提供静态文件（如webpack-dev-server），并为您提供websocket界面。

const express = require('express');
const expressWs = require('express-ws');

const app = express();
expressWs(app);

//serve static files, 'public/index.html' will be served as '/'
app.use(express.static('public'));

// normal express.js handler for HTTP GET
app.get('/hello', function(req, res, next){
  res.send('hello');
});

// websocket handler
app.ws('/websocket', function(ws, req) {
  ws.on('message', function(msg) {
    ws.send(msg);
  });
});

app.listen(3000);

3）同样，webpack-dev-server仅提供您的静态文件，没有等效的WS。您知道在请求GET /file.txt HTTP 1.1时会发生什么。 WS只是一种传输协议。

奖金：socket.io通常不受欢迎，因为所有主流浏览器现在都支持websocket，并且不需要回退行为。

Answer 2

对于到达这里的其他人来说，为什么他们的 WDS 代理配置似乎没有代理 websockets，请注意您没有犯以下配置错误。

不好

proxy: {
  '/api': process.env.PROXY_URI,
  ws: true,
},

好！

proxy: {
  '/api': {
    target: process.env.PROXY_URI,
    ws: true,
  },
},

Webpack开发服务器和WebSockets

2 个答案:

不好

好！