feat: 搭建架构10%

src/App copy.vue

@@ -15,7 +15,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { WebSocketClass, wsConnectStatus } from '@/network/websocket';
+import { WebSocketClass, wsConnectStatus } from '@/network/webSocket';
 
 const muted = ref(true);
 const videoRef = ref<HTMLVideoElement>();

src/App.vue

@@ -18,19 +18,21 @@
 import { onMounted, ref } from 'vue';
 
 import { WebRTCClass } from '@/network/webRtc';
-import { WebSocketClass, wsConnectStatus } from '@/network/websocket';
+import { useNetworkStore } from '@/store//network';
 
 const muted = ref(true);
 const localVideoRef = ref<HTMLVideoElement>();
 
+const networkStore = useNetworkStore();
 let stream: MediaStream;
 
 onMounted(() => {
-  const instance = new WebSocketClass({ url: 'ws://localhost:4300' });
-  instance.wsInstance?.on(wsConnectStatus.connect, () => {
-    console.log('连接websocket成功！');
-    handleWebRtc();
-  });
+  // const instance = new WebSocketClass({ url: 'ws://localhost:4300' });
+  // networkStore.updateWsMap(roomId.value, instance);
+  // instance.wsInstance?.on(wsConnectStatus.connect, () => {
+  //   console.log('连接websocket成功！');
+  //   handleWebRtc();
+  // });
 });
 
 async function handleWebRtc() {

src/network/webRtc.ts

@@ -99,6 +99,10 @@ export class WebRTCClass {
   constructor() {
     this.browser = browserTool();
     this.createPeerConnection();
+    // this.handleWebRtcError();
+  }
+
+  handleWebRtcError = () => {
     this.getStatsSetIntervalTimer = setInterval(() => {
       this.peerConnection
         ?.getStats()
@@ -201,7 +205,7 @@ export class WebRTCClass {
           // networkStore.setShowErrorModal(true);
         });
     }, this.getStatsSetIntervalDelay);
-  }
+  };
 
   /** rtcStatus是否都是true了 */
   rtcStatusIsOk = () => {

src/network/websocket.ts

@@ -18,53 +18,80 @@ export const wsConnectStatus = {
   connect: 'connect',
 };
 
+// websocket消息类型
+export const wsMsgType = {
+  /** 用户进入聊天 */
+  join: 'join',
+  /** 用户退出聊天 */
+  leave: 'leave',
+  /** 用户发送消息 */
+  message: 'message',
+};
+
+enum statusEnum {
+  connect = 'connect',
+  disconnect = 'disconnect',
+}
+
 export class WebSocketClass {
-  wsInstance: Socket | null = null;
-  wsUrl = 'ws://localhost:3300';
+  socketIo: Socket | null = null;
+  url = 'ws://localhost:3300';
+  status: statusEnum = statusEnum.connect;
+  roomId: string;
 
-  constructor({ url }) {
+  constructor({ roomId, url }) {
     if (!window.WebSocket) {
       console.error('当前环境不支持WebSocket！');
       alert('当前环境不支持WebSocket！');
       return;
     }
-    this.wsUrl = url;
-    this.wsInstance = io(url, { transports: ['websocket'] });
-    // 连接websocket成功
-    this.wsInstance.on(wsConnectStatus.connect, (socket: Socket) => {
-      console.log('连接websocket成功', socket);
+    this.roomId = roomId;
+    this.url = url;
+    this.socketIo = io(url, { transports: ['websocket'] });
+    // websocket连接成功
+    this.socketIo.on(wsConnectStatus.connect, () => {
+      console.log('websocket连接成功');
+      this.status = statusEnum.connect;
+    });
+    // websocket连接断开
+    this.socketIo.on(wsConnectStatus.disconnect, () => {
+      console.log('websocket连接断开', this);
+      this.status = statusEnum.disconnect;
+      const networkStore = useNetworkStore();
+      networkStore.updateWsMap(this.roomId, this);
     });
+
     // 用户加入房间
-    this.wsInstance.on('join', (data) => {
+    this.socketIo.on(wsMsgType.join, (data) => {
       console.log('用户加入房间', data);
     });
     // 用户离开房间
-    this.wsInstance.on('leave', (data) => {
+    this.socketIo.on(wsMsgType.leave, (data) => {
       console.log('用户离开房间', data);
     });
-    // 监听连接断开
-    this.wsInstance.on('disconnect', () => {
-      console.log('监听连接断开');
+    // 用户发送消息
+    this.socketIo.on(wsMsgType.message, (data) => {
+      console.log('用户发送消息', data);
     });
+
     // 用户发送 offer
-    this.wsInstance.on('offer', (data) => {
+    this.socketIo.on('offer', (data) => {
       console.log('用户发送 offer', data);
     });
     // 用户发送 answer
-    this.wsInstance.on('answer', (data) => {
+    this.socketIo.on('answer', (data) => {
       console.log('用户发送 answer', data);
     });
-    // 用户发送消息
-    this.wsInstance.on('message', (data) => {
-      console.log('用户发送消息', data);
-    });
   }
 
   // 发送websocket消息
   send = () => {};
 
   // 手动关闭websocket连接
-  close = () => {};
+  close = () => {
+    console.warn('手动关闭websocket连接');
+    this.socketIo?.close();
+  };
 
   // 连接websocket
   connect = () => {};

src/store/network/index.ts

@@ -0,0 +1,37 @@
+import { defineStore } from 'pinia';
+
+import { WebRTCClass } from '@/network/webRtc';
+import { WebSocketClass } from '@/network/webSocket';
+
+type RootState = {
+  wsMap: Map<string, WebSocketClass>;
+  rtcMap: Map<string, WebRTCClass>;
+};
+
+export const useNetworkStore = defineStore('network', {
+  state: (): RootState => {
+    return {
+      wsMap: new Map<string, WebSocketClass>(),
+      rtcMap: new Map<string, WebRTCClass>(),
+    };
+  },
+  actions: {
+    updateWsMap(roomId: string, arg) {
+      console.log('updateWsMap', roomId, arg);
+      const val = this.wsMap.get(roomId);
+      if (val) {
+        this.wsMap.set(roomId, { ...val, ...arg });
+      } else {
+        this.wsMap.set(roomId, arg);
+      }
+    },
+    updateRtcMap(roomId: string, arg) {
+      const val = this.rtcMap.get(roomId);
+      if (val) {
+        this.rtcMap.set(roomId, { ...val, ...arg });
+      } else {
+        this.rtcMap.set(roomId, arg);
+      }
+    },
+  },
+});

src/views/home/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="home-wrap">
     房间号：<input
+      v-model="roomId"
       type="text"
       placeholder="输入房间号"
     />
@@ -10,19 +11,56 @@
     >
       进入
     </button>
+    <button
+      class="join-btn"
+      @click="leave"
+    >
+      退出
+    </button>
+    <div>状态：{{ networkStore.wsMap.get(roomId)?.status }}</div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const homeId = ref<number>();
+import { WebSocketClass } from '@/network/webSocket';
+import { useNetworkStore } from '@/store/network';
+
+const networkStore = useNetworkStore();
+
+const roomId = ref<string>();
+let instance: WebSocketClass;
 
 function join() {
-  if (!homeId.value) {
+  console.log(roomId.value);
+  if (!roomId.value) {
     console.error('房间号不能为空！');
     return;
   }
+  instance = new WebSocketClass({
+    roomId: roomId.value,
+    url: 'ws://localhost:4300',
+  });
+  networkStore.updateWsMap(roomId.value, instance);
+
+  // instance.socketIo?.on(wsConnectStatus.connect, () => {
+  //   console.log(new Date().toLocaleString(), '连接websocket成功！');
+  // });
+
+  // // 断开连接中
+  // instance.socketIo?.on(wsConnectStatus.disconnecting, (reason) => {
+  //   console.log(new Date().toLocaleString(), '断开websocket连接中', reason);
+  // });
+
+  // // 已断开连接
+  // instance.socketIo?.on(wsConnectStatus.disconnect, (reason) => {
+  //   console.log(new Date().toLocaleString(), '已断开websocket连接', reason);
+  // });
+}
+
+function leave() {
+  instance.close();
 }
 </script>