Azure Socket.IO 管理员 UI

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

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

部署网站

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

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

下载已发布的版本

  1. 发布页下载已发布的 zip 文件,例如 azure-socketio-admin-ui-0.1.0.zip

  2. 解压缩 zip 文件

从源代码生成

  1. 克隆存储库

    git clone https://github.com/Azure/azure-webpubsub.git
    
  2. 生成项目

    cd tools/azure-socketio-admin-ui
    yarn install
    yarn build
    
  3. 使用任何 HTTP 服务器托管静态文件。 我们以小型静态 HTTP 服务器为例:

    cd dist
    npm install -g http-server
    http-server
    

    该 http 服务器默认托管在端口 8080 上。

  4. 在浏览器中访问 http://localhost:8080

更新服务器端代码

  1. 安装 @socket.io/admin-ui 包:

    npm i @socket.io/admin-ui
    
  2. 在 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 网站

  1. 在浏览器中访问 http://localhost:8080

  2. 系统应会显示以下模式:

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

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