管理界面

Socket.IO 管理 UI 可用于概述 Socket.IO 部署的状态。

¥The Socket.IO admin UI can be used to have an overview of the state of your Socket.IO deployment.

源代码可以在这里找到：https://github.com/socketio/socket.io-admin-ui/

¥The source code can be found here: https://github.com/socketio/socket.io-admin-ui/

链接到托管版本：https://admin.socket.io/

¥Link to the hosted version: https://admin.socket.io/

当前特性

¥Current features

• 当前连接的服务器和客户端的概述

  ¥overview of the servers and the clients that are currently connected

• 每个套接字实例的详细信息（主动传输、握手、房间……）

  ¥details of each socket instance (active transport, handshake, rooms, ...)

• 每个房间的详细信息

  ¥details of each room

• 服务器触发或接收的每个事件的详细信息

  ¥details of every event emitted or received by the server

• 管理操作（加入、离开、断开连接）

  ¥administrative operations (join, leave, disconnect)

如果你有任何反馈/建议，请不要犹豫！

¥If you have any feedback / suggestions, do not hesitate!

安装

¥Installation

服务器端

¥Server-side

首先，安装 @socket.io/admin-ui 包：

¥First, install the @socket.io/admin-ui package:

npm i @socket.io/admin-ui

然后在 Socket.IO 服务器上调用 instrument 方法：

¥And then invoke the instrument method on your Socket.IO server:

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);

该模块兼容：

¥The module is compatible with:

• Socket.IO v4 服务器

  ¥Socket.IO v4 server

• Socket.IO v3 服务器（>= 3.1.0），但没有房间操作（加入、离开、断开连接）

  ¥Socket.IO v3 server (>= 3.1.0), but without the operations on rooms (join, leave, disconnection)

以 NestJS 为例：

¥Example with NestJS:

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

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

客户端

¥Client-side

然后，你可以前往 https://admin.socket.io，或托管在 ui/dist 文件夹 此处 中找到的文件。

¥You can then head up to https://admin.socket.io, or host the files found in the ui/dist folder here.

重要的提示：https://admin.socket.io 的网站是完全静态的（托管在 Vercel 上），我们不会（也永远不会）存储有关你或你的浏览器的任何信息（不跟踪、不分析……）。话虽这么说，自己托管文件是完全可以的。

¥Important note: the website at https://admin.socket.io is totally static (hosted on Vercel), we do not (and will never) store any information about yourself or your browser (no tracking, no analytics, ...). That being said, hosting the files yourself is totally fine.

你应该看到以下模式：

¥You should see the following modal:

请输入你的服务器的 URL（例如 http://localhost:3000 或 https://example.com）和凭据（如果适用）（请参阅 auth 选项 如下）。

¥Please enter the URL of your server (for example, http://localhost:3000 or https://example.com) and the credentials, if applicable (see the auth option below).

可用选项

¥Available options

auth

默认值：-

¥Default value: -

此选项是强制性的。你可以禁用身份验证（请谨慎使用）：

¥This option is mandatory. You can either disable authentication (please use with caution):

instrument(io, {
  auth: false
});

或者使用基本身份验证：

¥Or use basic authentication:

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

caution

请注意，bcrypt 包当前不支持以 $2y$ 前缀开头的哈希值，某些 BCrypt 实现（例如 https://bcrypt-generator.com/ 或 https://www.bcrypt.fr/）使用该前缀。你可以使用以下命令检查哈希的有效性：

¥Please note that the bcrypt package does not currently support hashes starting with the $2y$ prefix, which is used by some BCrypt implementations (for example https://bcrypt-generator.com/ or https://www.bcrypt.fr/). You can check the validity of the hash with:

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

你可以使用以下命令生成有效的哈希值：

¥You can generate a valid hash with:

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

也可以看看：

¥See also:

• https://github.com/kelektiv/node.bcrypt.js/issues/849

• https://stackoverflow.com/a/36225192/5138796

namespaceName

默认值：/admin

¥Default value: /admin

将创建用于处理管理任务的命名空间的名称。

¥The name of the namespace which will be created to handle the administrative tasks.

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

该命名空间是经典的 Socket.IO 命名空间，你可以通过以下方式访问它：

¥This namespace is a classic Socket.IO namespace, you can access it with:

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

更多信息在 此处。

¥More information here.

readonly

默认值：false

¥Default value: false

是否将管理 UI 置于只读模式（不允许加入、离开或断开连接）。

¥Whether to put the admin UI in read-only mode (no join, leave or disconnect allowed).

instrument(io, {
  readonly: true
});

serverId

默认值：require("os").hostname()

¥Default value: require("os").hostname()

给定服务器的 ID。如果同一台计算机上有多个 Socket.IO 服务器，则需要为它们提供不同的 ID：

¥The ID of the given server. If you have several Socket.IO servers on the same machine, you'll need to give them a distinct ID:

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

store

默认值：new InMemoryStore()

¥Default value: new InMemoryStore()

该存储用于存储会话 ID，因此用户无需在重新连接时重新输入凭据。

¥The store is used to store the session IDs so the user do not have to retype the credentials upon reconnection.

如果你在多服务器设置中使用基本身份验证，则应提供自定义存储：

¥If you use basic authentication in a multi-server setup, you should provide a custom store:

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

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

mode

默认值：development

¥Default value: development

在生产模式下，服务器不会发送有关套接字实例和房间的所有详细信息，从而减少仪器的内存占用。

¥In production mode, the server won't send all details about the socket instances and the rooms, thus reducing the memory footprint of the instrumentation.

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

还可以使用 NODE_ENV 环境变量启用生产模式：

¥The production mode can also be enabled with the NODE_ENV environment variable:

NODE_ENV=production node index.js

工作原理

¥How it works

源代码可以在这里找到：https://github.com/socketio/socket.io-admin-ui/

¥The source code can be found here: https://github.com/socketio/socket.io-admin-ui/

instrument 方法简单地说：

¥The instrument method simply:

• 创建 namespace 并添加身份验证 中间件（如果适用）

  ¥creates a namespace and adds an authentication middleware if applicable

• 为每个现有命名空间注册 connection 和 disconnect 事件的监听器以跟踪套接字实例

  ¥register listeners for the connection and disconnect events for each existing namespaces to track the socket instances

• 注册一个计时器，它将定期从服务器向 UI 发送统计信息

  ¥register a timer which will periodically send stats from the server to the UI

• 注册从 UI 发送的 join、leave 和 _disconnect 命令的处理程序

  ¥register handlers for the join, leave and _disconnect commands sent from the UI

最新版本

¥Latest releases

• 0.5.1（2022 年 10 月）：GitHub 发布/diff

  ¥0.5.1 (Oct 2022): GitHub release / diff

• 0.5.0（2022 年 9 月）：GitHub 发布/diff

  ¥0.5.0 (Sep 2022): GitHub release / diff

• 0.4.0（2022 年 6 月）：GitHub 发布/diff

  ¥0.4.0 (Jun 2022): GitHub release / diff