Webpack 開發服務器和 WebSockets

Question

三個快速問題：

1) 完全了解 Socket.io 的好處，我仍然想知道是否有可能運行一個 webpack-dev-server 可以同時服務 http 和 ws。 網上的一切都面向使用 Socket.io 並為 http/ws 運行雙服務器。

2) 如果確實必須使用 Socket.io，本地開發（http 服務器和 ws 服務器是分開的）與生產環境相比如何？ 生產環境通常有兩台服務器運行 http 和 ws，還是通常都是一台服務器？

3）如果我可以使用單個 webpack-dev-server 實例和本機 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 接口。

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 並且不需要回退行為。

Answer 2

對於到達這里的任何其他人，為什么他們的 WDS 代理配置似乎沒有代理 websockets，請注意您沒有犯以下配置錯誤。

壞的

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

好的！

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