群聊测试

src/components/ChatFrame.vue

@@ -4,21 +4,18 @@
       <div class="chat-title">
         {{ selected.name || selected.roomname }}
       </div>
-      <div class="record-warp" v-if="selected.id">
-        <el-scrollbar style="height:95%;" ref="myScrollbar">
+      <div class="record-warp">
+        <!-- <el-scrollbar style="height:95%;" ref="myScrollbar">
           <div class="record-list" v-for="(item, i) in record_list" :key="i">
             <div
               class="record-item"
               :class="item.id !== self.id ? 'receive-record' : 'send-record'"
             >
-              <!-- <div class="user">5asfdasdf</div> -->
               <span>{{ item.msg }}</span>
             </div>
           </div>
-        </el-scrollbar>
-      </div>
-      <div class="record-warp" v-if="selected.roomid">
-        <el-scrollbar style="height:95%" ref="myScrollbar">
+        </el-scrollbar> -->
+        <el-scrollbar  style="height:95%" ref="myScrollbar">
           <div
             class="record-list"
             v-for="(item, i) in room_record_list"
@@ -106,17 +103,24 @@ export default {
         this.msg = "";
         return;
       }
+      console.log(`this.self`, this.self);
       const msgInfo = {
         id: this.$socket.id,
         msg: this.msg,
         nickname: this.self.nickname
       };
-      this.msg = "";
-      if (this.tab === "friends") {
-        this.$socket.emit("private message", this.selected.id, msgInfo);
-      } else {
-        this.$socket.emit("group message", this.selected, msgInfo);
-      }
+      this.msg = ""; // 输入enter后置空
+      // if (this.tab === "friends") {
+      //   this.$socket.emit("private message", this.selected.id, msgInfo);
+      // } else {
+      this.$socket.emit("chat-room", this.selected.id, msgInfo);
+      this.room_record_list.push(msgInfo);
+        this.$nextTick(() => { // 滚动到底部
+          this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[
+            "myScrollbar"
+          ].wrap.scrollHeight;
+        });
+      // }
     },
 
     closeScoket() {
@@ -166,14 +170,12 @@ export default {
         });
       }
     },
-    room_chat(data) {
+    room_msg(data) {
+      console.log("======room msg===");
+      console.log(`data`, data);
       if (data) {
-        this.room_record_list = data.record;
-        this.$nextTick(() => {
-          this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[
-            "myScrollbar"
-          ].wrap.scrollHeight;
-        });
+        // this.room_record_list = data.record;
+        this.room_record_list.push(data);
       } else {
         this.room_record_list = [];
       }

src/components/ChatList.vue

@@ -33,9 +33,9 @@
         <div v-if="group_list" class="groups-wrap">
           <div
             v-for="item in group_list"
-            :key="item.roomid"
+            :key="item.id"
             class="group-item"
-            :class="item.roomid === selected_id ? 'selected-group' : ''"
+            :class="item.id === selected_id ? 'selected-group' : ''"
           >
             <div class="group-avatar">
               <el-avatar
@@ -43,7 +43,7 @@
               ></el-avatar>
             </div>
             <div class="group-name" @click="selected(item)">
-              {{ item.roomname }}
+              {{ item.name }}
             </div>
           </div>
         </div>
@@ -101,25 +101,28 @@ export default {
       if (tab.name === "friends") {
         this.getUserList();
       } else {
-        this.getGroupList();
+        this.getRoomList();
       }
       this.$emit('tabToggle', this.activeName)
     },
     selected(item) {
-      if (item.id) {
-        this.selected_id = item.id
-        this.$socket.emit('get friend record', item.id)
-      } else {
-        this.selected_id = item.roomid
-        this.$socket.emit('get group record', item)
-      }
+      // if (item.id) {
+      //   this.selected_id = item.id
+      //   this.$socket.emit('get friend record', item.id)
+      // } else {
+      //   this.selected_id = item.id
+      //   this.$socket.emit('get group record', item)
+      // }
+      this.selected_id = item.id
+      console.log(`item`, item)
       this.$emit("selected", item);
     },
     getUserList() {
       this.$socket.emit("user_list");
     },
-    getGroupList() {
-      this.$socket.emit("group_list");
+    getRoomList() {
+      console.log('=========getroomlist=====')
+      this.$socket.emit("list-room");
     },
     joinRoom() {
       this.dialogVisible = true;
@@ -136,8 +139,8 @@ export default {
     },
     create() {
       const data = {
-        roomname: this.group_name,
-        roomid: 'room_' + this.$socket.id + (Date.now())
+        name: this.group_name,
+        id: 'room_' + this.$socket.id + (Date.now())
       }
       // this.$socket.emit("create room", data);
       this.$socket.emit("create-room", this.group_name);
@@ -146,6 +149,7 @@ export default {
     join() {
       this.$socket.emit("join-room", this.group_name);
       console.log("加入群聊");
+      this.getRoomList()
       this.dialogVisible = false
     },
     leave() {
@@ -166,16 +170,16 @@ export default {
         }
       })
     },
-    room_name(data) {
+    room_name(room) {
       console.log('=====room_name======')
-      console.log(`data`, data)
-    },
-    room_list(room) {
       console.log(`room`, room)
-      console.log(`room`, room)
-      this.group_list = room
       this.$socket.emit("join-room", room.id);
     },
+    room_list(roomlist) {
+      console.log(`roomlist`, roomlist)
+      this.group_list = roomlist
+      console.log('===========')
+    },
     join_room(data) {
       console.log(`join_room`, data);
     },