// 号码池设计
    * code 号码
    * status 1 已使用 0 未使用
    * tyPE  1 用户 2 群聊
    * random   随机数索引，用于随机查找某一条
    // user表主要字段
    * name 账号
    * pass 密码
    * avatar 头像
    * signature 个性签名
    * nickname 昵称
    * email 邮件
    * phone 手机
    * sex 性别
    * bubble 气泡
    * PRojectTheme 项目主题
    * wallpaper 聊天壁纸
    * signUpTime 注册时间
    * lastLoginTime 最后一次登录时间
    * chatColor 聊天文字颜色
    * province 省
    * cITy 市
    * town 县
    * conversationsList 会话列表
    * cover 封面列表

    // md5 密码加密
    const md5 = pass => { // 避免多次调用MD5报错
        let md5 = crypto.createHash('md5');
        return md5.update(pass).digest("hex");
    };

    const LOGin = (params, callback) => { // 登录
        baseList.users
            .find({ // mongodb中可以直接用$or表示或关系
                $or: [{"name": params.name}, {"code": params.name}]
            })
            .then(r => {
                if (r.length) {
                    let pass = md5(params.pass);
                    if (r[0]['pass'] === pass) {
                        //更新最后一次登录时间 此处直接写Date.now 会报错 需要Date.now()!!!;
                        baseList.users.update({name: params.name}, {lastLoginTime: Date.now()}).then(raw => {
                            console.log(raw);
                        });
                        callback({code: 0, data: {name: r[0].name, photo: r[0].photo}});
                    } else {
                        callback({code: -1});
                    }
                } else {
                    callback({code: -1});
                }
        })
    };

    // 前端 发起加入房间的请求
    this.conversationsList.foreach(v => {
        let val = {
            name: this.user.name,
            time: utils.formatTime(new Date()),
            avatar: this.user.photo,
            roomid: v.id
        };
        this.$socket.emit('join', val);
    });
    // 后端 接受请求后执行加入操作，记录每个房间加入的成员，以及回信告知指定房间已上线成员
    socket.on('join', (val) => {
        socket.join(val.roomid, () => {
            if (OnlineUser[val.name]) {
                return;
            }
            OnlineUser[val.name] = socket.id;
            io.in(val.roomid).emit('joined', OnlineUser); // 包括发送者
        });
    });

    mes(r) { // 只有本房间的消息才展示
        if (r.roomid === this.currSation.id) {
            this.chatList.push(Object.assign({}, r, {type: 'other'}));
        }
    }

• 发消息

• // 前端
      send(params, type = 'mess') { // 发送消息
          if (!this.message && !params) {
              return;
          }
          let val = {
              name: this.user.name,
              mes: this.message,
              time: utils.formatTime(new Date()),
              avatar: this.user.photo,
              nickname: this.user.nickname,
              read: [this.user.name],
              roomid: this.currSation.id,
              style: 'mess',
              userM: this.user.id
          };
          this.chatList.push(Object.assign({},val,{type: 'mine'})); // 更新视图
          this.$socket.emit('mes', val);
          this.message = '';
      }
      // 后端 接收消息后存储到数据库，并转发给房间内其他成员，不包括发送者。
      socket.on('mes', (val) => { // 聊天消息
          apiList.saveMessage(val);
          socket.to(val.roomid).emit('mes', val);
      });

• 消息记录 所有的消息都会存到mongodb中，当切换房间的时候，会获取历史消息。而处在当前房间时，只会把最新消息追加到dom中，不会从数据库获取。聊天窗口默认只展示最新100条消息，更多消息可在聊天记录中查看。

•     // 前端 获取指定房间的历史消息
      this.$socket.emit('getHistoryMessages', {roomid: v.id, offset: 1, limit: 100});
      // 后端 关联表、分页、排序
      messages.find({roomid: params.roomid})
          .populate({path: 'userM', select: 'signature photo nickname'}) // 关联用户基本信息
          .sort({'time': -1})
          .skip((params.offset - 1) * params.limit)
          .limit(params.limit)
          .then(r => {
              r.forEach(v => { // 防止用户修改资料后，信息未更新
                  if (v.userM) {
                      v.nickname = v.userM.nickname;
                      v.photo = v.userM.photo;
                      v.signature = v.userM.signature;
                  }
              });
              r.reverse();
              callback({code: 0, data: r, count: count});
          }).catch(err => {
          console.log(err);
          callback({code: -1});
      });

  项目展示

  主页

   

  

   

  聊天窗口，可拖拽或缩放，聊天壁纸及文字颜色设置。

   

  

   

  个人设置

   

  

   

  应用空间

   

  

   

  相关阅读

• • Mongoose基础入门
  • socket.io文档
  • Vchat主题切换实现方案来自于 d2-admin
    • 作者：江三疯链接：https://juejin.cn/post/6844903734145712135来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。