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