Node + WebSocket + Vue 聊天室创建群聊/加入群聊功能

ok, 通过上方的代码，以及注释，相信很多小伙伴应该都明白了，这里简单讲解一下。

根据前端页面传入的type，来判断是什么操作？

1、如果是10，创建群聊，我们就将群名称，以及生成的群id，存入groups里面，并且把创建群聊的人默认加入到群
2、如果是20，加入群聊，我们根据要加入的群id，找到对应的群，并把需要加入的人，加入到群
3、发送消息，判断是否有群id，如果没有表示一对一，逻辑不变。如果有群id，则去groups里面找到对应的群，并拿出群下面所有的user，根据id，找到对应的conn(用户连接)，发送消息。

我们也主要研究变的地方，没有变的通过…表示。同时，如果您想看完整代码，可以去文章最下方“了解更多”，来获取源码查看。

...

export default {
  ...
  data(){
    return {
      title: '请选择群或者人员进行聊天',
      ...
      groups: [], // 群组
      groupId: '' // 当前群聊id
    }
  },
  mounted() {
    ... // 不变
  },
  computed: {
    currentMessage() {
      let vm = this;
      let data = vm.messageList.filter(item=>{
 if(this.groupId) {
   return item.groupId === this.groupId
 } else if(item.bridge.length){
   return item.bridge.sort().join(',') == vm.bridge.sort().join(',')
 }
      })
      data.map(item=>{
 item.status = 0
 return item;
      })
      return data;
    }
  },
  methods: {
    addGroup(item){
      this.socket.send(JSON.stringify({
 uid: this.uid,
 type: 20,
 nickname: this.nickname,
 groupId: item.id,
 groupName: item.name,
 bridge: []
      }));
      this.$message({type: 'success', message: `成功加入${item.name}群`})
    },
    checkUserIsGroup (item) {
      return item.users.some(item=>{
 return item.uid === this.uid
      })
    },
    createGroup(){
      this.socket.send(JSON.stringify({
 uid: this.uid,
 type: 10,
 nickname: this.nickname,
 groupName: this.groupName,
 bridge: []
      }));
    },
    getGroupMsgNum(group){
      return this.messageList.filter(item=>{
 return item.groupId === group.id && item.status === 1
      }).length
    },
    getUserMsgNum(user){
      return this.messageList.filter(item=>{
 return item.bridge.length && item.uid === user.uid && item.status === 1
      }).length
    },
    triggerGroup(item) {
      let issome = item.users.some(item=>{
 return item.uid === this.uid
      })
      if(!issome){
 this.$message({type: 'error', message: `您还不是${item.name}群成员`})
 return
      }
      this.bridge = [];
      this.groupId = item.id;
      this.title = `和${item.name}群成员聊天`;
    },
    triggerPersonal(item) {
      if(this.uid === item.uid){
 return;
      }
      this.groupId = '';
      this.bridge = [this.uid, item.uid];
      this.title = `和${item.nickname}聊天`;
    },
    send(){
      if(!this.msg){
 return
      }
      if(!this.bridge.length && !this.groupId){
 this.$message({type: 'error', message: '请选择发送人或者群'})
 return;
      }
      this.sendMessage(2, this.msg)
    },
    sendMessage(type, msg){
      this.socket.send(JSON.stringify({
 uid: this.uid,
 type: type,
 nickname: this.nickname,
 msg: msg,
 bridge: this.bridge,
 groupId: this.groupId // 如果群聊id，可能为空（一对一）
      }));
      this.msg = '';
    },
    conWebSocket(){
      let vm = this;
      if(window.WebSocket){
 vm.socket = new WebSocket('ws://localhost:8001');
 let socket = vm.socket;
 ...
 // 接收服务器的消息
 socket.onmessage = function(e){
   let message = JSON.parse(e.data);
   vm.messageList.push(message);
   if(message.users) {
     vm.users = message.users;
   }
   if (message.groups){
     vm.groups = message.groups;
   }
 }   
      }
    },
    login(){
      ...
    }
  }
}

...

  
新建群
  

    {{item.name}}
    class="tips-num">{{getGroupMsgNum(item)}}
    v-if="!checkUserIsGroup(item)" @click.stop="addGroup(item)" class="add-group">+
  
  

    {{item.nickname}}
    class="tips-num">{{getUserMsgNum(item)}}
  

...