バージョン: 4.x

管理UI

Socket.IO 管理UI は、Socket.IO デプロイの状態の概要を確認するために使用できます。

ソースコードはこちらにあります: https://github.com/socketio/socket.io-admin-ui/

ホストされているバージョンのリンク: https://admin.socket.io/

現在の機能

現在接続されているサーバーとクライアントの概要

Screenshot of the dashboard

各ソケットインスタンスの詳細（アクティブなトランスポート、ハンドシェイク、ルームなど）

Screenshot of the page displaying the details of a socket

各ルームの詳細

Screenshot of the page displaying the details of a room

サーバーによって送受信されたすべてのイベントの詳細

Screenshot of the page displaying the list of events

管理操作（参加、退出、切断）

フィードバック/ご提案がありましたら、お気軽にご連絡ください！

インストール

サーバーサイド

最初に、@socket.io/admin-uiパッケージをインストールします。

npm i @socket.io/admin-ui

次に、Socket.IOサーバーでinstrumentメソッドを呼び出します。

const { createServer } = require("http");
const { Server } = require("socket.io");
const { instrument } = require("@socket.io/admin-ui");

const httpServer = createServer();

const io = new Server(httpServer, {
  cors: {
    origin: ["https://admin.socket.io"],
    credentials: true
  }
});

instrument(io, {
  auth: false,
  mode: "development",
});

httpServer.listen(3000);

このモジュールは、以下と互換性があります。

Socket.IO v4 サーバー
Socket.IO v3 サーバー（>= 3.1.0）、ただしルームでの操作（参加、退出、切断）はできません。

NestJS の例

import { instrument } from "@socket.io/admin-ui";

@WebSocketGateway()
export class MyGateway {
    // ...
    afterInit() {
        instrument(this.server, {
            auth: false,
            mode: "development",
        });
    }
}

クライアントサイド

https://admin.socket.io にアクセスするか、ui/distフォルダにあるファイルをホストできます。こちら。

重要な注記: https://admin.socket.io のウェブサイトは完全に静的です（Vercel でホストされています）。ユーザーまたはブラウザに関する情報は一切保存しません（トラッキングなし、分析なしなど）。そのため、ご自身でファイルをホストしても問題ありません。

次のモーダルが表示されます。

サーバーのURL（例：http://localhost:3000またはhttps://example.com）と必要に応じて認証情報を入力してください（authオプション下記を参照）。

使用可能なオプション

`auth`

デフォルト値: -

このオプションは必須です。認証を無効にすることができます（注意して使用してください）。

instrument(io, {
  auth: false
});

または、ベーシック認証を使用します。

instrument(io, {
  auth: {
    type: "basic",
    username: "admin",
    password: "$2b$10$heqvAkYMez.Va6Et2uXInOnkCT6/uQj1brkrbyG3LpopDklcq7ZOS" // "changeit" encrypted with bcrypt
  },
});

注意

bcryptパッケージは現在、一部のBCrypt実装（例：https://bcrypt-generator.com/またはhttps://www.bcrypt.fr/）で使用されている $2y$ プレフィックスで始まるハッシュをサポートしていません。ハッシュの有効性を確認するには、

$ node
> require("bcryptjs").compareSync("<the password>", "<the hash>")
true

有効なハッシュを生成するには、

$ node
> require("bcryptjs").hashSync("changeit", 10)
'$2b$10$LQUE...'

こちらも参照してください。

`namespaceName`

デフォルト値: /admin

管理タスクを処理するために作成される名前空間の名前。

instrument(io, {
  namespaceName: "/custom"
});

この名前空間は従来のSocket.IO名前空間であり、以下を使用してアクセスできます。

const adminNamespace = io.of("/admin");

詳細はこちらこちら。

`readonly`

デフォルト値: false

管理UIを読み取り専用モードにするかどうか（参加、退出、切断は許可されません）。

instrument(io, {
  readonly: true
});

`serverId`

デフォルト値: require("os").hostname()

指定されたサーバーのID。同じマシン上に複数のSocket.IOサーバーがある場合は、それぞれに異なるIDを付ける必要があります。

instrument(io, {
  serverId: `${require("os").hostname()}#${process.pid}`
});

`store`

デフォルト値: new InMemoryStore()

ストアはセッションIDを保存するために使用され、ユーザーは再接続時に認証情報を再入力する必要がありません。

マルチサーバー設定でベーシック認証を使用する場合は、カスタムストアを提供する必要があります。

const { instrument, RedisStore } = require("@socket.io/admin-ui");

instrument(io, {
  store: new RedisStore(redisClient)
});

`mode`

デフォルト値: development

本番モードでは、サーバーはソケットインスタンスとルームに関するすべての詳細を送信しないため、インストゥルメンテーションのメモリフットプリントが削減されます。

instrument(io, {
  mode: "production"
});

本番モードは、NODE_ENV環境変数でも有効にできます。

NODE_ENV=production node index.js

動作方法

ソースコードはこちらにあります: https://github.com/socketio/socket.io-admin-ui/

instrumentメソッドは、単に

名前空間を作成し、必要に応じて認証ミドルウェアを追加します。
既存の名前空間ごとにconnectionおよびdisconnectイベントのリスナーを登録して、ソケットインスタンスを追跡します。
サーバーからUIに定期的に統計情報を送信するタイマーを登録します。
UIから送信されたjoin、leave、_disconnectコマンドのハンドラーを登録します。

現在の機能​

インストール​

サーバーサイド​

クライアントサイド​

使用可能なオプション​

auth​

namespaceName​

readonly​

serverId​

store​

mode​

動作方法​

最新のリリース​