[+] 优化房间创建、关闭、广播、终端列表逻辑

现在已经能够拉出视频

taoyao-client-web/src/App.vue

@@ -59,7 +59,7 @@
         </el-tab-pane>
         <el-tab-pane label="创建房间" name="create">
           <el-form-item label="媒体服务">
-            <el-select v-model="room.mediaId" placeholder="媒体服务标识">
+            <el-select v-model="room.mediaClientId" placeholder="媒体服务标识">
               <el-option
                 v-for="value in medias"
                 :key="value.clientId"
@@ -79,7 +79,7 @@
     </el-form>
     <template #footer>
       <el-button type="primary" @click="enterRoom" v-if="roomActive === 'enter'">进入</el-button>
-      <el-button type="primary" @click="createRoom" v-if="roomActive === 'create'">创建</el-button>
+      <el-button type="primary" @click="roomCreate" v-if="roomActive === 'create'">创建</el-button>
     </template>
   </el-dialog>
 
@@ -90,7 +90,7 @@
     <el-button type="primary" @click="roomActive = 'create';roomVisible = true;">创建房间</el-button>
     <el-button>邀请终端</el-button>
     <el-button>退出房间</el-button>
-    <el-button type="danger">关闭房间</el-button>
+    <el-button @click="closeRoom()" type="danger">关闭房间</el-button>
   </div>
 
   <!-- 终端 -->
@@ -149,14 +149,17 @@ export default {
       this.medias = await this.taoyao.mediaList();
     },
     async enterRoom() {
-      await this.taoyao.enterRoom(this.room.roomId);
+      await this.taoyao.enterRoom(this.room.roomId, this.room.password);
       await this.taoyao.produceMedia();
       this.roomVisible = false;
     },
-    async createRoom() {
-      const room = await this.taoyao.createRoom(this.room);
-      this.room = room;
-      await this.enterRoom(room.roomId);
+    async roomCreate() {
+      const room = await this.taoyao.roomCreate(this.room);
+      this.room.roomId = room.roomId;
+      await this.enterRoom();
+    },
+    async closeRoom() {
+      this.taoyao.closeRoom();
     },
     /**
      * 信令回调

taoyao-client-web/src/components/Taoyao.js

@@ -394,6 +394,7 @@ class Taoyao {
       }, 5000);
     });
   }
+  /************************ 回调 ************************/
   /**
    * 回调策略：
    * 1. 如果注册请求回调，同时执行结果返回true不再执行后面所有回调。
@@ -450,25 +451,32 @@ class Taoyao {
    * @param {*} message 消息
    */
   async postCallback(message) {
-    const self = this;
+    const me = this;
     switch (message.header.signal) {
+      case "room::client::list":
+        me.defaultRoomClientList(message);
+        break;
       case "client::reboot":
-        self.defaultClientReboot(message);
+        me.defaultClientReboot(message);
         break;
       case "client::shutdown":
-        self.defaultClientShutdown(message);
+        me.defaultClientShutdown(message);
+        break;
+      case "room::close":
+        me.defaultRoomClose(message);
         break;
       case "room::enter":
-        self.defaultRoomEnter(message);
-        break;
-      case "room::client::list":
-        self.defaultRoomClientList(message);
+        me.defaultRoomEnter(message);
         break;
       case "platform::error":
-        self.callbackError(message);
+        me.callbackError(message);
+        break;
+      default:
+        console.warn("不支持的信令：", message);
         break;
     }
   }
+  /************************ 信令 ************************/
   /**
    * 配置默认回调
    *
@@ -505,6 +513,53 @@ class Taoyao {
     console.info("关闭终端");
     window.close();
   }
+  /**
+   * 房间终端列表信令
+   * 
+   * @param {*} message 消息
+   */
+  defaultRoomClientList(message) {
+    const me = this;
+    message.body.forEach(v => {
+      if (v.clientId === me.clientId) {
+        // 忽略自己
+      } else {
+        me.remoteClients.set(v.clientId, me.roomId);
+      }
+    });
+  }
+  /**
+   * 关闭房间信令
+   * 
+   * @param {*} message 消息
+   */
+  defaultRoomClose(message) {
+    const me = this;
+    const { roomId } = message.body;
+    if(me.roomId !== roomId) {
+      return;
+    }
+    console.info("关闭房间：", roomId);
+    me.close();
+  }
+  /**
+   * 创建房间信令
+   * 
+   * @param {*} room 房间
+   * 
+   * @returns 房间
+   */
+  async roomCreate(room) {
+    const me = this;
+    if (!room) {
+      me.callbackError("无效房间");
+      return;
+    }
+    const response = await me.request(
+      protocol.buildMessage("room::create", room)
+    );
+    return response.body;
+  }
   defaultRoomEnter(message) {
     const { roomId, clientId } = message.body;
     if (clientId === this.clientId) {
@@ -513,16 +568,6 @@ class Taoyao {
       this.remoteClients.set(clientId, roomId);
     }
   }
-  defaultRoomClientList(message) {
-    const self = this;
-    message.body.forEach((v) => {
-      if (v.clientId === self.clientId) {
-        // 忽略自己
-      } else {
-        self.remoteClients.set(v.clientId, self.roomId);
-      }
-    });
-  }
   /**
    * 错误回调
    */
@@ -562,21 +607,7 @@ class Taoyao {
     );
     return response.body;
   }
-  /**
-   * 创建房间
-   */
-  async createRoom(room) {
-    const self = this;
-    if (!room) {
-      this.callbackError("无效房间");
-      return;
-    }
-    const response = await self.request(
-      protocol.buildMessage("room::create", room)
-    );
-    return response.body;
-  }
-  async enterRoom(roomId) {
+  async enterRoom(roomId, password) {
     const self = this;
     if (!roomId) {
       this.callbackError("无效房间");
@@ -586,7 +617,7 @@ class Taoyao {
     self.mediasoupDevice = new mediasoupClient.Device();
     const response = await self.request(
       protocol.buildMessage("media::router::rtp::capabilities", {
-        roomId: self.roomId,
+        roomId: self.roomId
       })
     );
     const routerRtpCapabilities = response.body.rtpCapabilities;
@@ -594,6 +625,7 @@ class Taoyao {
     await self.request(
       protocol.buildMessage("room::enter", {
         roomId: roomId,
+        password: password,
         rtpCapabilities: self.consume
           ? self.mediasoupDevice.rtpCapabilities
           : undefined,
@@ -604,6 +636,17 @@ class Taoyao {
       })
     );
   }
+  async closeRoom() {
+    const me = this;
+    if(!me.roomId) {
+      console.warn("房间无效：", me.roomId);
+      return;
+    }
+    me.push(protocol.buildMessage("room::close", {
+      roomId: me.roomId
+    }));
+  }
+  /************************ 媒体 ************************/
   /**
    * 生产媒体
    */

taoyao-client-web/vite.config.js

@@ -1,7 +1,7 @@
+import fs from "node:fs";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { fileURLToPath, URL } from "node:url";
-import fs from "node:fs";
 
 export default defineConfig({
   plugins: [vue()],