如何在 express 中为 websocket 服务器设置路由？

Question

我有一个类似的设置：

var WebSocketServer = require("ws").Server,
    express = require("express"),
    http = require("http"),
    app = express(),
    server = http.createServer(app);

app.post("/login", login);
app.get("/...", callSomething);
// ...

server.listen(8000);


var wss = new WebSocketServer({server: server});

wss.on("connection", function(ws){
   // ...
});

我想把 WebSocketServer 放在一个特定的路径下，例如"...com/whatever"。问题是如何设置路径？有可能吗？

Answer 1

使用 express-ws： https://www.npmjs.com/package/express-ws

安装：

npm i express-ws -S

HTTP 服务器示例：

const express = require('express')
const enableWs = require('express-ws')

const app = express()
enableWs(app)

app.ws('/echo', (ws, req) => {
    ws.on('message', msg => {
        ws.send(msg)
    })

    ws.on('close', () => {
        console.log('WebSocket was closed')
    })
})

app.listen(80)

HTTPS 服务器示例：

注意 我强烈建议使用 NodeJS 和 Internet 之间的中间服务器（例如 Nginx）来制作 HTTPS、压缩和缓存等功能，它的工作效率更高，并且其配置更容易更改未来

const https     = require('https')
const fs        = require('fs')
const express   = require('express')
const expressWs = require('express-ws')

const serverOptions = {
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem')
}

const app       = express()
const server    = https.createServer(serverOptions, app)

expressWs(app, server)

app.ws('/echo', (ws, req) => {
    ws.on('message', msg => {
        ws.send(msg)
    })

    ws.on('close', () => {
        console.log('WebSocket was closed')
    })
})

server.listen(443)

浏览器客户端示例：

// wss: protocol is equivalent of https: 
// ws:  protocol is equivalent of http:
// You ALWAYS need to provide absolute address
// I mean, you can't just use relative path like /echo
const socketProtocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:')
const echoSocketUrl = socketProtocol + '//' + window.location.hostname + '/echo/'
const socket = new WebSocket(echoSocketUrl);

socket.onopen = () => {
  socket.send('Here\'s some text that the server is urgently awaiting!'); 
}

socket.onmessage = e => {
  console.log('Message from server:', event.data)
}

Answer 2

您需要使用path 选项：

var wss = new WebSocketServer({server: server, path: "/hereIsWS"});

查看完整文档here

Answer 3

UPDATE 路径在 ws 服务器选项中有效。

interface ServerOptions {
        host?: string;
        port?: number;
        backlog?: number;
        server?: http.Server | https.Server;
        verifyClient?: VerifyClientCallbackAsync | VerifyClientCallbackSync;
        handleProtocols?: any;
        path?: string;
        noServer?: boolean;
        clientTracking?: boolean;
        perMessageDeflate?: boolean | PerMessageDeflateOptions;
        maxPayload?: number;
    }

接受的答案不再有效，将引发Frame Header Invalid 错误。 Pull Request #885。

正如Lpinca 所说，WS 路径已被删除：

这里的问题是每个 WebSocketServer 都为 HTTP 服务器上的升级事件以及该事件何时发出， 在所有服务器上调用 handleUpgrade。

这里是解决方法：

const wss1 = new WebSocket.Server({ noServer: true });
const wss2 = new WebSocket.Server({ noServer: true });
const server = http.createServer();

server.on('upgrade', (request, socket, head) => {
  const pathname = url.parse(request.url).pathname;

  if (pathname === '/foo') {
    wss1.handleUpgrade(request, socket, head, (ws) => {
      wss1.emit('connection', ws);
    });
  } else if (pathname === '/bar') {
    wss2.handleUpgrade(request, socket, head, (ws) => {
      wss2.emit('connection', ws);
    });
  } else {
    socket.destroy();
  }
});

Answer 4

要以 Ivan Kolyhalov 的方法为基础，可以通过将 WebSocketServer（或其任何属性）分配给 app.locals 来从任何端点访问 WebSocketServer。因此，您只需管理处理与server.js 中的 WebSocketServer 的连接。

在下面的代码中，我们将 WebSocketServer 的 clients 属性分配给 app.locals，这允许我们通过向路由端点发出 HTTP 请求来向所有连接的客户端广播/推送自定义消息。

server.js

const { createServer } = require("http");
const express = require("express");
const WebSocket = require("ws");

const app = express();
app.use(express.json({ extended: false }));
app.use("/api/pets", require("./routes/api/pets"));

const port = process.env.PORT || 5000;
const server = createServer(app);
server.listen(port, () => console.info(`Server running on port: ${port}`));

const webSocketServer = new WebSocket.Server({ server });
webSocketServer.on("connection", (webSocket) => {

    console.info("Total connected clients:", webSocketServer.clients.size);

    app.locals.clients = webSocketServer.clients;
});

./routes/api/pets.js

const router = require("express").Router();
const WebSocket = require("ws");

const broadcast = (clients, message) => {

    clients.forEach((client) => {

        if (client.readyState === WebSocket.OPEN) {

            client.send(message);
        }
    });
};

router.get("/dog", (req, res) => {

    broadcast(req.app.locals.clients, "Bark!");

    return res.sendStatus(200);
});

router.get("/cat", (req, res) => {

    broadcast(req.app.locals.clients, "Meow!");

    return res.sendStatus(200);
});

module.exports = router;

Answer 5

您可以通过将传入的套接字请求作为中间件来使用这个简单的想法，我发现这非常有用

在您的 app.js 中

const server = http.createServer(app)
const WebSocket = require('ws');
const ws = new WebSocket.Server({server});

现在把中间件放在那里

app.use(function (req, res, next) {
    req.ws = ws;
    return next();
});

或者，这显然更简单，而是：

app.ws=ws;

现在您的 ws 构造在您的路由器中可用，例如：

// main user dashboard GET
router.get('/', async function(req, res) {

        let ws = req.ws

        ws.once('connection', function connection(wss) {
            wss.on('message', function incoming(message) {
                console.log('received: %s', message);
            });

            wss.send(JSON.stringify('it works! Yeeee! :))' ));
        });
});

或者如果您通过 app.ws 将其附加到您的应用：

// main user dashboard GET
router.get('/', async function(req, res) {
    req.app.ws.once('connection', (wss) => {
            console.log('connected:', req.app.ws.clients.size)
        });
});

请密切注意“ws.once”的使用，而不是“ws.on”，否则您将在每个请求的 websocket.server 的新实例上获得多个连接。

干杯！ :)