31 lines
1.2 KiB
Markdown
31 lines
1.2 KiB
Markdown
# 09 - 在线用户列表（房间成员与系统消息）
|
||
|
||
## 功能目标
|
||
- 在房间侧边栏展示在线用户列表。
|
||
- 用户加入/离开时，实时更新列表并显示系统提示。
|
||
|
||
## 前端（Vue）
|
||
- **组件**
|
||
- `UserList.vue`：渲染 `userList`（在线/离线样式可选）。
|
||
- `RoomPanel.vue`：承载房间号与用户列表。
|
||
- **更新机制**
|
||
- 订阅房间 topic 后，收到 `SYSTEM` 且携带 `payload.userList` 时更新 `userList`。
|
||
- 在消息区插入 `payload.message` 作为系统提示。
|
||
|
||
## 后端（Spring Boot）
|
||
- **RoomService**
|
||
- 存储结构（示例）：`roomCode -> { sessionId -> userName }`
|
||
- `getUserList(roomCode)`：返回数组（包含 id/name）。
|
||
- **广播时机**
|
||
- join 成功后广播 `SYSTEM(USER_JOIN + userList)`
|
||
- leave 成功后广播 `SYSTEM(USER_LEAVE + userList)`
|
||
|
||
## 协议与数据
|
||
- `SYSTEM.payload.userList`：
|
||
- `[{ "id": "uuid/sessionId", "name": "用户A" }, ...]`
|
||
|
||
## 边界与注意点
|
||
- **用户身份**：示例使用 `sessionId` 当 id；如需“跨重连保持身份”，需引入客户端生成的 stableId（可选增强）。
|
||
- **断线处理**：需要在服务端捕获 disconnect 事件，触发 leave 并广播列表更新。
|
||
|