Webpack 开发服务器和 WebSockets答案

【问题标题】：Webpack dev server and WebSocketsWebpack 开发服务器和 WebSockets
【发布时间】：2019-09-03 09:37:29
【问题描述】：

三个快速问题：

1) 完全了解 Socket.io 的好处，我仍然想知道是否可以运行一个可以同时服务 http 和 ws 的 webpack-dev-server。网上的一切都是以使用Socket.io和为http/ws运行双服务器为导向的。

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

3) 如果我可以使用单个 webpack-dev-server 实例和本机 WebSockets，那么如何配置 devServer 来服务 ws？所有在线示例都围绕 Socket.io 双服务器设置，所以我没有快速获得。

谢谢！！

【问题讨论】：

标签： javascript webpack webpack-dev-server

【解决方案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 已普遍失宠，因为所有主流浏览器现在都支持 websockets 并且不需要后备行为。

【讨论】：

非常感谢格雷格！这是完美的！

【解决方案2】：

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

不好

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

好！

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

【讨论】：