feat: 完善页面

src/network/websocket.ts

@@ -24,17 +24,32 @@ export const wsConnectStatus = {
 export const wsMsgType = {
   /** 用户进入聊天 */
   join: 'join',
+  /** 用户进入聊天 */
+  joined: 'joined',
+  /** 用户进入聊天 */
+  otherJoin: 'otherJoin',
   /** 用户退出聊天 */
   leave: 'leave',
+  /** 用户退出聊天 */
+  leaved: 'leaved',
+  /** 人满了 */
+  full: 'full',
   /** 用户发送消息 */
   message: 'message',
 };
 
-enum statusEnum {
+export enum statusEnum {
   connect = 'connect',
   disconnect = 'disconnect',
 }
 
+// export const state = reactive({
+//   socketIo: null,
+//   status: statusEnum.connect,
+//   url: 'ws://localhost:3300',
+//   roomId: '-1',
+// });
+
 export class WebSocketClass {
   socketIo: Socket | null = null;
   status: statusEnum = statusEnum.connect;
@@ -44,36 +59,44 @@ export class WebSocketClass {
 
   constructor({ roomId, url }) {
     if (!window.WebSocket) {
-      console.error('当前环境不支持WebSocket！');
       alert('当前环境不支持WebSocket！');
       return;
     }
     this.roomId = roomId;
     this.url = url;
     this.socketIo = io(url, { transports: ['websocket'] });
-    // websocket连接成功
-    this.socketIo.on(wsConnectStatus.connect, (socket) => {
-      console.log('websocket连接成功', socket);
-      this.status = statusEnum.connect;
-      this.update();
-      // socket.join(this.roomId);
-    });
+    this.update();
 
-    // websocket连接断开
-    this.socketIo.on(wsConnectStatus.disconnect, () => {
-      console.log('websocket连接断开', this);
-      this.status = statusEnum.disconnect;
-      this.update();
-    });
+    // // websocket连接成功
+    // this.socketIo.on(wsConnectStatus.connect, (socket) => {
+    //   console.log('websocket连接成功', socket);
+    //   this.status = statusEnum.connect;
+    //   this.update();
+    //   this.socketIo?.emit(wsMsgType.join, { roomId: this.roomId });
+    // });
+
+    // // websocket连接断开
+    // this.socketIo.on(wsConnectStatus.disconnect, () => {
+    //   console.log('websocket连接断开', this);
+    //   this.status = statusEnum.disconnect;
+    //   this.update();
+    // });
+
+    // // 用户加入房间
+    // this.socketIo.on(wsMsgType.join, (data) => {
+    //   console.log('用户加入房间', data);
+    // });
+
+    // // 其他用户加入房间
+    // this.socketIo.on(wsMsgType.otherJoin, (data) => {
+    //   console.log('其他用户加入房间', data);
+    // });
+
+    // // 用户离开房间
+    // this.socketIo.on(wsMsgType.leave, (data) => {
+    //   console.log('用户离开房间', data);
+    // });
 
-    // 用户加入房间
-    this.socketIo.on(wsMsgType.join, (data) => {
-      console.log('用户加入房间', data);
-    });
-    // 用户离开房间
-    this.socketIo.on(wsMsgType.leave, (data) => {
-      console.log('用户离开房间', data);
-    });
     // 用户发送消息
     this.socketIo.on(wsMsgType.message, (data) => {
       console.log('用户发送消息', data);

src/store/network/index.ts

@@ -17,7 +17,7 @@ export const useNetworkStore = defineStore('network', {
   },
   actions: {
     updateWsMap(roomId: string, arg) {
-      console.log('updateWsMap', roomId, arg);
+      // console.log('updateWsMap', roomId, arg);
       const val = this.wsMap.get(roomId);
       if (val) {
         this.wsMap.set(roomId, { ...val, ...arg });

src/views/home/index.vue

@@ -1,74 +1,144 @@
 <template>
   <div class="home-wrap">
-    房间号：<input
-      v-model="roomId"
-      type="text"
-      placeholder="输入房间号"
-    />
-    <button
-      class="join-btn"
-      @click="join"
-    >
-      进入
-    </button>
-    <button
-      class="join-btn"
-      @click="leave"
-    >
-      退出
-    </button>
-    <div>状态：{{ networkStore.wsMap.get(roomId!)?.status }}</div>
+    <div class="left">
+      房间号：<input
+        v-model="roomId"
+        type="text"
+        placeholder="输入房间号"
+      />
+      <button
+        ref="joinRef"
+        class="join-btn"
+        @click="join"
+      >
+        进入
+      </button>
+      <button
+        ref="leaveRef"
+        class="join-btn"
+        disabled
+        @click="leave"
+      >
+        退出
+      </button>
+      <div>ws状态：{{ networkStore.wsMap.get(roomId!)?.status }}</div>
+    </div>
+    <div class="right">
+      <div>当前房间用户：</div>
+      <ul>
+        <li
+          v-for="item in userList"
+          :key="item"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import { WebSocketClass } from '@/network/webSocket';
+import {
+  WebSocketClass,
+  statusEnum,
+  wsConnectStatus,
+  wsMsgType,
+} from '@/network/webSocket';
 import { useNetworkStore } from '@/store/network';
 
 const networkStore = useNetworkStore();
 
+const joinRef = ref<HTMLButtonElement>();
+const leaveRef = ref<HTMLButtonElement>();
 const roomId = ref<string>();
-let instance: WebSocketClass;
+const instance = ref<WebSocketClass>();
+const userList = ref<string[]>([]);
 
 function join() {
-  console.log(roomId.value);
+  console.log('join的房间号', roomId.value);
   if (!roomId.value) {
     console.error('房间号不能为空！');
     return;
   }
-  instance = new WebSocketClass({
+  instance.value = 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成功！');
-  // });
+  if (!instance.value.socketIo) return;
+  // websocket连接成功
+  instance.value.socketIo.on(wsConnectStatus.connect, () => {
+    if (!instance.value) return;
+    console.log('websocket连接成功', instance.value.socketIo?.id);
+    instance.value.status = statusEnum.connect;
+    if (joinRef.value && leaveRef.value) {
+      joinRef.value.disabled = true;
+      leaveRef.value.disabled = false;
+    }
+    instance.value.update();
+    instance.value.socketIo?.emit(wsMsgType.join, {
+      roomId: instance.value.roomId,
+    });
+  });
+
+  // websocket连接断开
+  instance.value.socketIo.on(wsConnectStatus.disconnect, () => {
+    if (!instance.value) return;
+    console.log('websocket连接断开', instance.value);
+    instance.value.status = statusEnum.disconnect;
+    instance.value.update();
+  });
 
-  // // 断开连接中
-  // instance.socketIo?.on(wsConnectStatus.disconnecting, (reason) => {
-  //   console.log(new Date().toLocaleString(), '断开websocket连接中', reason);
-  // });
+  // 用户加入房间
+  instance.value.socketIo.on(wsMsgType.join, (data) => {
+    if (!instance.value) return;
+    console.log('用户加入房间', data);
+  });
+
+  // 用户加入房间
+  instance.value.socketIo.on(wsMsgType.joined, (data) => {
+    if (!instance.value) return;
+    console.log('用户加入房间完成', data);
+    userList.value.push(instance.value.socketIo?.id!);
+  });
 
-  // // 已断开连接
-  // instance.socketIo?.on(wsConnectStatus.disconnect, (reason) => {
-  //   console.log(new Date().toLocaleString(), '已断开websocket连接', reason);
-  // });
+  // 其他用户加入房间
+  instance.value.socketIo.on(wsMsgType.otherJoin, (data) => {
+    if (!instance.value) return;
+    console.log('其他用户加入房间', data);
+    userList.value.push(data.socketId);
+  });
+
+  // 用户离开房间
+  instance.value.socketIo.on(wsMsgType.leave, (data) => {
+    if (!instance.value) return;
+    console.log('用户离开房间', data);
+  });
 }
 
 function leave() {
-  instance.close();
+  if (joinRef.value && leaveRef.value) {
+    joinRef.value.disabled = false;
+    leaveRef.value.disabled = true;
+  }
+  if (!instance.value) return;
+  instance.value.close();
 }
 </script>
 
 <style lang="scss" scoped>
 .home-wrap {
+  display: flex;
   padding: 10px;
-  .join-btn {
-    margin-left: 10px;
+  .left {
+    margin-right: 50px;
+    .join-btn {
+      margin-left: 10px;
+    }
+  }
+  .right {
   }
 }
 </style>