WebRTCSignalServerWeb · 信令服务器后台管理系统

基于 Vue 3 + Vite + TypeScript + Pinia + Vue Router + Element Plus 的管理后台，技术栈与目录组织参考 vue-vben-admin，用于管理 WebRTCSignalServer（Spring Boot WebSocket 信令服务器）。

功能概览

页面	说明
仪表盘	在线设备 / 主控端 / 被控端 / 待确认连接统计、设备类型分布饼图、信令流量柱状图、最近在线设备
设备管理	查看已注册设备（ID、类型、在线状态、上线时间），支持按类型筛选与自动刷新
连接请求	查看主控端发起、等待被控端确认的连接请求（去重 / 超时治理后的待决列表）
服务器信息	运行时长（实时）、在线数、峰值会话、累计注册与信令流量明细
系统配置	连接治理参数（去重窗口、确认超时、WebSocket 端点）与管理令牌说明

数据来源于服务器新增的 GET /api/admin/** 接口，由 AdminAuthFilter 统一鉴权。

目录结构

WebRTCSignalServerWeb/
├─ public/                 # 静态资源（favicon 等）
├─ src/
│  ├─ api/                 # axios 实例与管理接口封装
│  ├─ components/          # 通用组件（StatCard）
│  ├─ layout/              # 基础布局 + 侧边栏 + 顶栏
│  ├─ router/              # 路由与鉴权守卫
│  ├─ stores/              # Pinia 状态（用户/令牌）
│  ├─ styles/              # 全局样式
│  ├─ views/               # 各业务页面
│  ├─ App.vue / main.ts
├─ .env                    # 后端地址与默认令牌
├─ vite.config.ts / tsconfig.json
└─ package.json

快速开始

1. 启动信令服务器（提供 API）

服务器需 Java 21+（当前 pom.xml 指定 Java 25）与 Maven：

cd WebRTCSignalServer
mvn spring-boot:run
# 默认端口 8080，管理令牌默认 admin.token = webrtc-admin-token

可在 src/main/resources/application.yml 修改 admin.token，或用环境变量 ADMIN_TOKEN 覆盖。

2. 启动管理后台

cd WebRTCSignalServerWeb
npm install
npm run dev        # http://localhost:5180

构建生产包：

npm run build      # 产物在 dist/
npm run preview    # 本地预览构建产物

配置说明

.env 关键变量：

变量	默认值	说明
`VITE_API_BASE`	`http://localhost:8080`	后端信令服务器地址
`VITE_ADMIN_TOKEN`	`webrtc-admin-token`	默认管理令牌（需与服务器一致）

登录时使用 admin.token 作为令牌；鉴权通过后会以 X-Admin-Token 请求头随后续接口发送。令牌错误将返回 401 并跳转登录页。

接口一览（服务器侧新增）

方法	路径	说明
GET	`/api/admin/dashboard`	仪表盘汇总数据
GET	`/api/admin/devices?type=`	设备列表（可按 CONTROLLER / CONTROLLED 过滤）
GET	`/api/admin/connections`	待确认连接请求
GET	`/api/admin/config`	连接治理配置项
GET	`/api/admin/health`	健康检查（登录校验也走此接口）

3.2 KiB Raw Permalink Blame History Unescape Escape