web-dev-qa-db-ja.com

Expressでwebsocketサーバーのルートを設定するにはどうすればよいですか？

私はこれに似たセットアップを持っています：

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"。問題は、どのようにパスを設定できますか？出来ますか？

javascriptnode.jsexpresswebsocket
28
0101

pathオプションを使用する必要があります。

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

完全なドキュメントを参照してください こちら

37
Aaron Dufour

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サーバーの例：

[〜＃〜] notice [〜＃〜]HTTPS、圧縮、キャッシュなどの機能をNodeJSとインターネット間の中間サーバーを使用して作成することを強くお勧めします。たとえば、Nginxは、はるかに効率的に機能し、その構成は将来変更しやすくなります

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)
}
21
ujeenator

受け入れられた回答は無効になり、Frame Header Invalidエラー。 プルリクエスト＃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();
  }
});
17
Quesofat

着信ソケットリクエストをミドルウェアとして置くことにより、この単純なアイデアを使用できます。

あなたの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.on」ではなく「ws.once」の使用に細心の注意を払うか、リクエストごとにwebsocket.serverの新しいインスタンスで複数の接続を取得します。

乾杯！ :)

5
Ivan Kolyhalov

Ivan Kolyhalovのアプローチに基づいて、エンドポイント（またはそのプロパティ）をapp.localsに割り当てることにより、エンドポイントからWebSocketServerにアクセスすることができます。したがって、WebSocketServerへの接続の処理を管理する必要があるのは、server.jsのみです。

以下のコードでは、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;
1
TheDarkIn1978