feat: 实现消息发送

lebornjose · Dec 1, 2024 · 7ec1ec9 · 7ec1ec9
1 parent ec40dc3
commit 7ec1ec9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/view/index.vue b/src/view/index.vue
@@ -51,6 +51,7 @@
         <h2>web-rtc</h2>
         <div class="list">
             <a-button type="primary" @click="toUrl('webRtc')">webRtc</a-button>
+            <a-button type="primary" @click="toUrl('room')">webRtc 房间</a-button>
         </div>
 
         <!-- <video ref="videoRef" class="v" src="https://mogic-creative.oss-cn-hangzhou.aliyuncs.com/algorithm_qn/process/20241014/1040g00g318j0t73hjk004a5e4kih2s3nm3jst6g_mute.mp4" controls/>
@@ -61,7 +62,7 @@
    </div>
 </template>
 <script type="ts" setup>
-import { ref } from 'vue'
+import { ref } from 'vue';
 import { router } from '../router';
 
 const canvasRef = ref(null)

diff --git a/src/view/webRtc/Room.vue b/src/view/webRtc/Room.vue
@@ -23,9 +23,10 @@
                         {{ item.userName }}
                     </div>
                 </div>
-                <el-button type="primary" v-if="roomUsers.length > 1 && sockId" @click="toSendVideo">
+                {{ roomUsers.length }}
+                <a-button type="primary" v-if="sockId" @click="toSendVideo">
                     发起视频
-                </el-button>
+                </a-button>
             </div>
         </div>
         <div v-else>
@@ -139,22 +140,23 @@ const initSocketEvents = () => {
                     userName: roomForm.nickname + '(我)',
                     sockId: sockId.value,
                     roomId: roomForm.roomId,
-
                 }
             ];
         }
     });
     // 加入房间成功
-    socket.on('joinRoomSuccess', (roomUsers) => {
-        console.log('joinRoomSuccess client user:', roomUsers);
-        const otherUser = roomUsers.find(item => item.sockId !== sockId.value);
+    socket.on('joinRoomSuccess', (users) => {
+        debugger
+        console.log('joinRoomSuccess client user:', users);
+        const otherUser = users.find(item => item.sockId !== sockId.value);
         if (!otherUser) return false;
         message.success(`${otherUser.userName}加入了房间`);
         roomUsers.value = [otherUser, {
-            userName: roomForm.userName + '(我)',
+            userName: roomForm.nickname + '(我)',
             sockId: sockId.value,
             roomId: roomForm.roomId,
         }];
+        console.log(roomUsers.value.length)
     });
     // 用户离开
     socket.on('userLeave', (roomUsers) => {
@@ -190,7 +192,7 @@ const initSocketEvents = () => {
     });
     // 接收视频邀请
     socket.on('receiveVideo', (sender) => {
-        if (this.user.sockId === sender.sockId) return false;
+        if (user.value.sockId === sender.sockId) return false;
         VIDEO_VIEW.showReceiveVideoModalBySender(sender);
     });
     // 拒绝接收视频
@@ -221,11 +223,11 @@ const initSocketEvents = () => {
 }
 
 const startVideoCancelCb = () => {
-    socket.emit('cancelSendVideo', this.user);
+    socket.emit('cancelSendVideo', user.value);
     VIDEO_VIEW.hideAllVideoModal();
 }
 const receiveVideoCancelCb = () => {
-    socket.emit('rejectReceiveVideo', this.user);
+    socket.emit('rejectReceiveVideo', user.value);
     VIDEO_VIEW.hideAllVideoModal();
 }
 const receiveVideoAnswerCb = () => {
@@ -273,11 +275,9 @@ const toSendVideo = () => {
 const submitForm = () => {
     if (!sockId.value) {
         message.error('socket未连接成功,请刷新再尝试!');
-        // window.location.reload();
         return false;
     }
     canClickBtn.value = false;
-    debugger
     socket.emit('checkRoom', {
         roomId: roomForm.roomId,
         sockId: sockId.value,