EchoChat/.playwright-mcp/task16/scenarios/01-create-and-join-by-code.md

场景 01：创建会议 → 会议号加入 → 双向音视频打通 → 主持人结束

目标

• 验证 POST /api/v1/meeting/rooms（创建）+ POST /api/v1/meeting/rooms/:code/join（加入）+ mediasoup 信令全链路打通
• 覆盖设计 §6.1（REST 建房）、§6.3（WS 信令 11 事件）、§6.6（NodeClient 媒体编排）
• 配套断言 Step A 资源清理：结束会议后 Redis / MySQL / media-server 全部归零

前置条件

依 ../README.md 通用前置；额外确认：

• 两个浏览器上下文（MCP 多 tab）分别以 task15_a / task15_b 登录
• Alice tab 为主持人，Bob tab 为参会人

MCP 执行脚本

步骤 1：Alice 登录并创建即时会议

1. browser_navigate → https://localhost:5173/#/pages/auth/login
2. browser_fill_form → 账号 task15_a / 密码 Task15@2026 → 点 "登录"
3. 断言首页进入「消息」tab
4. 底部切换到「会议」tab（pages/meeting/index）
5. 点「创建即时会议」
6. 设备预览页：默认勾选麦克风 + 摄像头；点「立即进入」
7. 进入 pages/meeting/room，截图 → 01-alice-created.png
8. 读取 URL query 得到 roomCode，记录到上下文变量 $ROOM_CODE

步骤 2：Bob 通过会议号加入

1. 开第二个 browser context；browser_navigate → https://localhost:5173/#/pages/auth/login
2. 以 task15_b 登录
3. 切到「会议」tab，点「通过会议号加入」
4. 输入 $ROOM_CODE
5. 预览页 → 「立即加入」
6. 截图 → 02-bob-joined.png

步骤 3：双向音视频打通断言

• Alice tab 成员面板应展示 2 个成员，Bob 的 AV 图标为蓝色（开启状态）
• Bob tab 成员面板同理
• Alice 的视频宫格应能看到 Bob 的视频流（VideoTile[user_id=56] video.srcObject 非空）
• 控制台验证 mediasoup 关键日志：
  • [MediaEngine] producer 创建成功 kind=audio
  • [MediaEngine] producer 创建成功 kind=video
  • [MediaEngine] consumer 创建成功
• browser_evaluate:

  const store = window.__pinia?.state?.value?.meeting
  return {
    participantCount: store.participants.length,
    localAudio: store.localAudioEnabled,
    localVideo: store.localVideoEnabled,
    remoteUserCount: Object.keys(store.remoteConsumers).length,
  }
  

  期望：participantCount=2、localAudio=true、localVideo=true、remoteUserCount=1

步骤 4：资源创建态断言

在第三个终端执行：

# media-server 应有 1 Router + 4 Transport（2 users × send/recv）+ 4 Producer + 4 Consumer
curl -s -H "X-Internal-Token: $INTERNAL_TOKEN" http://localhost:3300/internal/info | jq .stats

# Redis 应有两个用户的资源追踪 Set
redis-cli KEYS "echo:meeting:resource:$ROOM_CODE:*"
# 期望输出：echo:meeting:resource:xxx:55 / echo:meeting:resource:xxx:56
# 每个 SMEMBERS 应有 5 条（transport×2 + producer×2 + consumer×2 之类，具体取决于 producer.new 收敛顺序）
redis-cli SMEMBERS "echo:meeting:resource:$ROOM_CODE:55"
redis-cli SMEMBERS "echo:meeting:resource:$ROOM_CODE:56"

步骤 5：Alice 结束会议

1. Alice tab 工具栏 → 「结束会议」→ 弹窗确认「主持人结束」
2. 截图 → 03-alice-ended.png（页面转为「会议已结束」提示页）
3. Bob tab 应收到 WS meeting.room.ended 广播，展示「会议已结束」toast，1.2s 后跳回会议首页
4. 截图 → 04-bob-received-ended.png

步骤 6：资源释放断言（核心验证 Step A）

# 1. Redis 清理验证（P1-4 + Step A B1/B3 的核心断言）
redis-cli KEYS "echo:meeting:resource:$ROOM_CODE:*"         # 期望：(empty array)
redis-cli KEYS "echo:meeting:member_state:$ROOM_CODE:*"     # 期望：(empty array)
redis-cli KEYS "echo:meeting:host_grace:$ROOM_CODE"         # 期望：(nil)
redis-cli KEYS "echo:meeting:empty_ttl:$ROOM_CODE"          # 期望：(nil)

# 2. MySQL 状态验证
mysql -e "SELECT status, ended_reason FROM meeting_rooms WHERE room_code='$ROOM_CODE'" echochat
# 期望：status=ended, ended_reason=host_ended

mysql -e "SELECT user_id, left_at, left_reason FROM meeting_participants WHERE room_id=(SELECT id FROM meeting_rooms WHERE room_code='$ROOM_CODE')" echochat
# 期望：Alice + Bob 都有 left_at ≠ NULL, left_reason='host_end'

# 3. media-server Router / Transport / Producer / Consumer 全部归零
curl -s -H "X-Internal-Token: $INTERNAL_TOKEN" http://localhost:3300/internal/info | jq '.stats | .routers, .transports, .producers, .consumers'
# 期望：对应 $ROOM_CODE 的 Router 已销毁；整体 stats 可能非 0（其他并行测试）但本场 Router 必须不存在

步骤 7：前端资源释放断言

在 Alice tab 执行 browser_evaluate:

// 结束页停留时的 state 快照
const store = window.__pinia?.state?.value?.meeting
return {
  localState: store.localState,       // 期望：'ended'
  engineExists: !!window.__engine,    // 期望：false（_cleanupMedia 已置空）
  participantCount: store.participants.length,  // 结束页保留渲染数据，非 0
}

然后手动返回首页（模拟 onUnload 触发）：

1. browser_navigate_back 或点结束页的「返回首页」按钮
2. 再次 browser_evaluate 断言 pinia state：

   const store = window.__pinia?.state?.value?.meeting
   return {
     localState: store.localState,       // 期望：'idle'
     participantCount: store.participants.length,  // 期望：0
     currentRoom: store.currentRoom,     // 期望：null
   }
   

预期结果汇总

断言维度	预期
WS 信令	room.join / producer.new / consume 全链路无异常
双向媒体	两端视频宫格均能播放对方画面，localAudioEnabled=true 且 remoteConsumers 含对方
Redis 清理	resource:* / member_state:* / host_grace / empty_ttl 全空
DB 一致	meeting_rooms.status=ended、两行 meeting_participants.left_at 非空
media-server	对应 Router 已删除，level transport/producer/consumer 观察端点无残留
前端	_engine=null / _pendingBroadcastTimers.size=0；onUnload 后 pinia state 全部 reset

失败排查

现象	可能原因	排查点
Bob 看不到 Alice 的画面	pushExistingRoomState 同步性（Task 16 P1-8 修复）	logs.Info 搜 room.join 是否先于 member.joined
结束后 Redis resource:* 仍存	EndRoom 未走 cleanupRoomRedisResidual（Step A B1 回归）	grep "cleanupRoomRedisResidual" backend/go-service/app/meeting/service/meeting_service.go
localState 卡在 connected	_onRoomEnded 未触发	检查 Bob tab 是否收到 meeting.room.ended WS 事件（网络面板 frame）