[*] 优化client web结构

taoyao-client-web/src/App.vue

@@ -1,27 +1,120 @@
 <!-- 桃夭 -->
 <template>
+  <!-- 信令 -->
+  <el-dialog
+    center
+    width="30%"
+    title="终端设置"
+    :show-close="false"
+    v-model="signalVisible"
+  >
+    <el-form ref="SignalSetting">
+      <el-form-item label="终端名称">
+        <el-input v-model="config.clientId" placeholder="终端名称" />
+      </el-form-item>
+      <el-form-item label="信令地址">
+        <el-input v-model="config.host" placeholder="信令地址" />
+      </el-form-item>
+      <el-form-item label="信令端口">
+        <el-input v-model="config.port" placeholder="信令端口" />
+      </el-form-item>
+      <el-form-item label="信令帐号">
+        <el-input v-model="config.username" placeholder="信令帐号" />
+      </el-form-item>
+      <el-form-item label="信令密码">
+        <el-input v-model="config.password" placeholder="信令密码" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="connectSignal">连接信令</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 房间 -->
+  <el-dialog
+    center
+    width="30%"
+    title="房间设置"
+    @open="init"
+    :show-close="false"
+    v-model="roomVisible"
+  >
+    <el-form ref="RoomSetting" :model="room">
+      <el-tabs v-model="roomActive">
+        <el-tab-pane label="进入房间" name="enter">
+          <el-form-item label="房间标识">
+            <el-select v-model="room.roomId" placeholder="房间标识">
+              <el-option
+                v-for="value in rooms"
+                :key="value.roomId"
+                :label="value.name || value.roomId"
+                :value="value.roomId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane label="创建房间" name="create">
+          <el-form-item label="媒体服务">
+            <el-select v-model="room.mediaId" placeholder="媒体服务标识">
+              <el-option
+                v-for="value in medias"
+                :key="value.clientId"
+                :label="value.name || value.clientId"
+                :value="value.clientId"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="房间名称">
+            <el-input v-model="room.name" placeholder="房间名称" />
+          </el-form-item>
+        </el-tab-pane>
+      </el-tabs>
+      <el-form-item label="房间密码">
+        <el-input v-model="room.password" placeholder="房间密码" />
+      </el-form-item>
+    </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>
+    </template>
+  </el-dialog>
+
+  <!-- 菜单 -->
   <div class="menu">
     <el-button type="primary" @click="signalVisible = true">连接信令</el-button>
-    <el-button type="primary" @click="roomVisible = true">选择房间</el-button>
-    <el-button type="danger">关闭房间</el-button>
+    <el-button type="primary" @click="roomActive = 'enter'; roomVisible = true;">选择房间</el-button>
+    <el-button type="primary" @click="roomActive = 'create';roomVisible = true;">创建房间</el-button>
     <el-button>退出房间</el-button>
+    <el-button type="danger">关闭房间</el-button>
+  </div>
+
+  <!-- 终端 -->
+  <div class="client">
   </div>
-  <SettingRoom :taoyao="taoyao" :roomVisible="roomVisible" @produceMedia="produceMedia"></SettingRoom>
-  <SettingSignal :signalVisible="signalVisible" @buildSignal="buildSignal"></SettingSignal>
 </template>
 
 <script>
+import { ElMessage } from 'element-plus'
 import { Taoyao } from "./components/Taoyao.js";
-import SettingRoom from "./components/SettingRoom.vue";
-import SettingSignal from "./components/SettingSignal.vue";
 
 export default {
   name: "Taoyao",
   data() {
     return {
+      room: {},
+      rooms: [],
+      medias: [],
+      config: {
+        clientId: "taoyao",
+        host: "localhost",
+        port: 8888,
+        username: "taoyao",
+        password: "taoyao",
+      },
       taoyao: {},
+      roomActive: "enter",
       roomVisible: false,
-      signalVisible: false,
+      signalVisible: true,
     };
   },
   mounted() {
@@ -31,15 +124,25 @@ export default {
     `);
   },
   methods: {
-    buildSignal(config) {
-      let self = this;
-      self.taoyao = new Taoyao({...config});
-      self.signalVisible = false;
-      self.taoyao.buildSignal(self.callback);
+    async init() {
+      this.rooms = await this.taoyao.roomList();
+      this.medias = await this.taoyao.mediaList();
     },
-    produceMedia() {
+    async enterRoom() {
+      await this.taoyao.enterRoom(this.room.roomId);
+      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 connectSignal() {
       let self = this;
-      self.taoyao.produceMedia();
+      self.taoyao = new Taoyao({ ...this.config });
+      await self.taoyao.connectSignal(self.callback);
+      self.signalVisible = false;
     },
     /**
      * 信令回调
@@ -56,22 +159,23 @@ export default {
           self.roomVisible = true;
           break;
         case "client::register":
-          self.signalVisible = data.code !== '0000';
+          self.signalVisible = data.code !== "0000";
           return true;
         case "platform::error":
-          if(error) {
+          if (error) {
             console.error("发生异常：", data, error);
           } else {
             console.warn("发生错误：", data);
           }
+          ElMessage({
+            showClose: true,
+            message: data.message,
+            type: "error",
+          });
           break;
       }
       return false;
     },
   },
-  components: {
-    SettingRoom,
-    SettingSignal,
-  },
 };
 </script>

taoyao-client-web/src/components/SettingRoom.vue

@@ -1,104 +0,0 @@
-<!-- 房间设置 -->
-<template>
-  <el-dialog
-    center
-    width="30%"
-    title="房间设置"
-    @open="init"
-    :show-close="false"
-    v-model="localVisible"
-  >
-    <el-form ref="SettingRoomForm" :model="room">
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="进入房间" name="enter">
-          <el-form-item label="房间标识">
-            <el-select v-model="room.roomId" placeholder="房间标识">
-              <el-option
-                v-for="value in rooms"
-                :key="value.roomId"
-                :label="value.name || value.roomId"
-                :value="value.roomId"
-              />
-            </el-select>
-          </el-form-item>
-        </el-tab-pane>
-        <el-tab-pane label="创建房间" name="create">
-          <el-form-item label="媒体服务">
-            <el-select v-model="room.mediaId" placeholder="媒体服务标识">
-              <el-option
-                v-for="value in medias"
-                :key="value.clientId"
-                :label="value.name || value.clientId"
-                :value="value.clientId"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="房间名称">
-            <el-input v-model="room.name" placeholder="房间名称" />
-          </el-form-item>
-        </el-tab-pane>
-      </el-tabs>
-      <el-form-item label="房间密码">
-        <el-input v-model="room.password" placeholder="房间密码" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button type="primary" @click="enter" v-if="activeName === 'enter'"
-        >进入</el-button
-      >
-      <el-button type="primary" @click="create" v-if="activeName === 'create'"
-        >创建</el-button
-      >
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-import { protocol } from "./Config.js";
-
-export default {
-  name: "SettingRoom",
-  data() {
-    return {
-      room: {},
-      rooms: [],
-      medias: [],
-      activeName: "enter",
-      localVisible: false,
-    };
-  },
-  props: {
-    taoyao: {},
-    roomVisible: false,
-  },
-  watch: {
-    roomVisible() {
-      this.localVisible = this.roomVisible;
-    },
-  },
-  methods: {
-    async init() {
-      const roomResponse = await this.taoyao.request(
-        protocol.buildMessage("room::list")
-      );
-      this.rooms = roomResponse.body;
-      const mediaResponse = await this.taoyao.request(
-        protocol.buildMessage("client::list", {clientType:"MEDIA"})
-      );
-      this.medias = mediaResponse.body;
-    },
-    async enter() {
-      await this.taoyao.enter(this.room.roomId);
-      this.localVisible = false;
-      this.$emit("produceMedia");
-    },
-    async create() {
-      const room = await this.taoyao.create(this.room);
-      this.room.roomId = room.roomId;
-      await this.enter(room.roomId);
-      this.localVisible = false;
-      this.$emit("produceMedia");
-    },
-  },
-};
-</script>

taoyao-client-web/src/components/SettingSignal.vue

@@ -1,63 +0,0 @@
-<!-- 终端设置 -->
-<template>
-  <el-dialog
-    center
-    width="30%"
-    title="终端设置"
-    :show-close="false"
-    v-model="localVisible"
-  >
-    <el-form ref="SettingSignalForm">
-      <el-form-item label="终端名称">
-        <el-input v-model="config.clientId" placeholder="终端名称" />
-      </el-form-item>
-      <el-form-item label="信令地址">
-        <el-input v-model="config.host" placeholder="信令地址" />
-      </el-form-item>
-      <el-form-item label="信令端口">
-        <el-input v-model="config.port" placeholder="信令端口" />
-      </el-form-item>
-      <el-form-item label="信令帐号">
-        <el-input v-model="config.username" placeholder="信令帐号" />
-      </el-form-item>
-      <el-form-item label="信令密码">
-        <el-input v-model="config.password" placeholder="信令密码" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button type="primary" @click="connect">连接</el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: "SettingSignal",
-  data() {
-    return {
-      config: {
-        clientId: "taoyao",
-        host: "localhost",
-        port: 8888,
-        username: "taoyao",
-        password: "taoyao",
-      },
-      localVisible: false,
-    };
-  },
-  props: {
-    signalVisible: false,
-  },
-  watch: {
-    signalVisible() {
-      this.localVisible = this.signalVisible;
-    },
-  },
-  methods: {
-    connect() {
-      this.localVisible = false;
-      this.$emit("buildSignal", this.config);
-    },
-  },
-};
-</script>

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

@@ -414,13 +414,13 @@ class Taoyao {
   }
 
   /**
-   * 打开信令通道
+   * 连接信令
    *
    * @param {*} callback
    *
    * @returns
    */
-  async buildSignal(callback) {
+  async connectSignal(callback) {
     const self = this;
     self.callback = callback;
     self.signalChannel = signalChannel;
@@ -450,22 +450,41 @@ class Taoyao {
       }
     }
     // 错误回调
+    const errorMessage = protocol.buildMessage("platform::error", { message }, -9999);
+    errorMessage.code = "-9999";
+    errorMessage.message = message;
     self.callback(
-      protocol.buildMessage("platform::error", { message }, -9999),
+      errorMessage,
       error
     );
   }
+  async roomList() {
+    const response = await this.request(
+      protocol.buildMessage("room::list")
+    );
+    return response.body;
+  }
+  async mediaList() {
+    const response = await this.request(
+      protocol.buildMessage("client::list", { clientType: "MEDIA" })
+    );
+    return response.body;
+  }
   /**
    * 创建房间
    */
-  async create(room) {
+  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 enter(roomId) {
+  async enterRoom(roomId) {
     const self = this;
     if (!roomId) {
       this.callbackError("无效房间");