javascript - Webpack 开发服务器和 WebSockets

Question

三个简单问题:

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

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

3) 如果我可以使用单个 webpack-dev-server 实例和 native WebSockets，那么到底如何配置 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 接口(interface)。

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只是一个传输协议(protocol)。

奖励:socket.io 通常已经失宠，因为所有主要浏览器现在都支持 websockets 并且不需要后备行为。