配置 Dashboard

这是什么？

WebUI 的本体，开放给用户的 Web 界面，用于管理 NoneBot 的运行。

安装

前往这里下载最新版本的对应系统的 self-host 程序以及 dashboard-index-canvaskit.zip 文件，并将 dashboard-index-canvaskit.zip 中的 web 目录解压到与 self-host 程序同级目录内。

TIP

为了避免配置文件冲突，请不要将 dashboard 与前文的 Agent 放在同一个文件夹内。

解压完以后，你的目录结构应该是这样的：

dashboard/
├── web/
│   ├── assets/
│   │  ├── ...
│   └── index.html
├── secret.key
├── config.json
└── dashboard-linux

agent/
├── config.json
└── agent-linux

TIP

Linux 和 MacOS 需要给予文件执行权限，可以通过 chmod +x dashboard-linux 或 chmod +x dashboard-macos 给予执行权限。

配置

首次运行 dashboard 会生成 config.json 和 secret.key 文件，你需要在 config.json 进行一些必要的配置才能正常使用。

生成的配置文件如下:

json

{
  "host": "127.0.0.1",  // 监听地址，如果需要监听 IPv6 请改为 "::"
  "port": 8025,  // 开放的端口
  "password": "", // 访问 WebUI 的密码，首次启动会随机生成
  "connection": { // 连接到 Agent 的配置
    "host": "127.0.0.1", // Agent 的地址，如果是 IPv6 的地址请在前面加上方括号，如 "[::1]"
    "port": 2519, // Agent 的端口
    "token": ""  // Agent 的 WebSocket Token
  },
  "connectionMode": 2, // 连接模式，默认为 2，下文会详细说明
  "theme": {
    "color": "light", // 主题颜色，可选值为 "light" 或 "dark"
    "img": "default", // 自定义登录页图片，填入 "default" 或图片的 URL
    "text": "default", // 自定义登录页文字，填入 "default" 或文字内容
    "hitokoto": true  // 是否显示一言
  }
}

Agent 的 WebSocket Token 说明

为了确保连接安全性，从 Agent 0.1.7 以及 Dashboard 0.1.11 开始，首次生成将会随机生成一个默认的面板密码和 Agent WebSokcet Token,你需要在 Agent 的 config.json 中获取到 token 并填进 Dashboard 的 config.json 中。

connectionMode 说明

connectionMode 为连接模式，有以下几种模式可供选择：

1：直连模式，直接通过配置的 host 和 port 连接到 Agent 的 ws 服务，需要 Agent 主机拥有公网 IP 地址并放行对应端口，对外可访问。
2：代理模式，通过 WebUI 的 WebSocket 桥梁将 ws 请求转发到 Agent，需要配置好 WebUI 的 host 和 port，并确保 WebUI 的 host 和 port 对外可访问，如果 WebUI 与 Agent 在同一宿主机内，可直接将 connection 的 host 指向 127.0.0.1 ， port 指向 Agent 对应端口。Agent 的 host 和 port 仅需对内可访问即可。

启动

在配置完成后，同时运行 self-host 和 Agent 即可启动 WebUI，你将会看到如下输出：

shell

2024-12-29 11:03:54 [SUCCESS] | Dashboard | WebSocket connection established.
2024-12-29 11:03:54 [INFO] | Dashboard | Listening on http://127.0.0.1:8025

如果是首次启动，你的终端会打印出随机密码

在 Agent 中，你将会看到如下输出：

shell

2024-12-29 11:03:54 [SUCCESS] | NoneBot Agent | Websocket connection established. 1 connections now.

这代表 WebUI 与 Agent 之间的连接已经建立。

Enjoy it!

现在你可以打开浏览器，输入 http://ip:port 访问 WebUI 了！

TIP

首次加载时间较长，请耐心等待（速度取决于网络速度和服务器带宽）

配置 Dashboard ​

这是什么？ ​

安装 ​

解压完以后，你的目录结构应该是这样的： ​

配置 ​

Agent 的 WebSocket Token 说明 ​

connectionMode 说明 ​

启动 ​

Enjoy it! ​