Azure Socket.IO 管理员 UI

2024/07/22

Socket.IO 管理员 UI 是由 Socket.IO 官方团队开发的网站工具，可用于概述 Socket.IO 部署的状态。在 Socket.IO Admin UI 文档中查看它的工作原理并探索其高级用法。

Azure Socket.IO 管理员 UI是它为 Azure Socket.IO 自定义的版本。

部署网站

到目前为止，Azure Socket.IO 管理员 UI 没有托管版本。用户应自行托管网站。

静态网站文件可以从发行版下载，也可以从源代码生成：

下载已发布的版本

从发布页下载已发布的 zip 文件，例如 azure-socketio-admin-ui-0.1.0.zip
解压缩 zip 文件

从源代码生成

克隆存储库

git clone https://github.com/Azure/azure-webpubsub.git

生成项目

cd tools/azure-socketio-admin-ui
yarn install
yarn build

使用任何 HTTP 服务器托管静态文件。我们以小型静态 HTTP 服务器为例：
```
cd dist
npm install -g http-server
http-server
```
该 http 服务器默认托管在端口 8080 上。
在浏览器中访问 http://localhost:8080

更新服务器端代码

安装 @socket.io/admin-ui 包：
```
npm i @socket.io/admin-ui
```

在 Socket.IO 服务器上调用检测方法：

const azure = require("@azure/web-pubsub-socket.io");
const { Server } = require("socket.io");
const { instrument } = require("@socket.io/admin-ui");
const httpServer = require('http').createServer(app);

const wpsOptions = {
    hub: "eio_hub",
    connectionString: process.argv[2] || process.env.WebPubSubConnectionString
};

const io = await new Server(httpServer).useAzureSocketIO(wpsOptions);
instrument(io, { auth: false, mode: "development" });

// Note: The next three lines are necessary to make the development mode work
Namespace.prototype["fetchSockets"] = async function() { 
    return this.local.fetchSockets(); 
};

httpServer.listen(3000);

打开管理员 UI 网站

在浏览器中访问 http://localhost:8080。
系统应会显示以下模式：

Socket.IO 管理员 UI 主页上模式的屏幕截图。

填写服务终结点和中心名称。

通过