# 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 并广播列表更新。