基于vue2.x实现的即时通讯程序仿微信聊天7开发socket真

• 前言：上节课我们学习了socketIO以及实战应用了群聊和一对一聊天功能的实现，对于socketIO框架也有了一定的认识，那么现在我们来对接真实的线上socketIO服务接口

• 线上服务接口地址：wss://yyds.it98k.cn

• 1、第一步，我们需要修改我们项目的socketIO接口地址

• 1.1 打开项目src/utils/socketIo.js，修改io.connect内的地址为wss://yyds.it98k.cn

const socket = io.connect('wss://yyds.it98k.cn', {
    transports: ['websocket'],
})

• npm run serve启动项目，看连接状态打开 ，状态码101就是连接成功！

image.png

• 我们登录app就要触发一个登录事件告诉服务端，我们上线了
• 在哪执行登录合适呢......

• 在获取到个人信息的时候执行登录最合适，也就是getUserInfo接口请求成功后
• 打开src/store/modules/app.js，找到actions函数里的getUserInfo方法
• 在接口成功返回后，执行这段代码

this._vm.$socket.client.emit('login', {
     nickname: data.nickname,
     _id: data._id
 });

image.png

• 刷新页面查看控制台 WSsocket记录，看看是不是触发了login事件

image.png

• 只要有人登录，服务端就会推送一个user事件，把【用户组】告知客户端，我们监听拿到这个用户组，可以做很多事情，蔽日统计在线人数，判断你的好友是否在线等等

image.png

• 下面打开src/views/chatDetail/index.vue，修改发送按钮触发的事件，把sayOne改成sayTo

image.png

let obj = {
        come_id: this.$route.params.id, //接收方的id
        send_id: this.userName._id, //发送方的id
        type: 1, //消息类型 1 文字消息
        send_avatar: this.userName.avatar, //发送者的头像
        message: this.value, //发送的文字内容
        send_name: this.userName.nickname, //发送者的昵称
        date: new Date() //发送的当前时间
      }
this.$socket.client.emit('sayTo', obj)

image.png

• 这样配置完，我们就可以实现和线上环境通讯了

但是还没有把记录存储到数据库，我们需要调用保存消息的接口

• 打开接口文档，https://www.showdoc.com.cn/2035654172307363/9197380583610999
• 复制接口路径/api/send/msg到项目的src/api/index.js新建key:value

 SendMsg:'/api/send/msg',

• 在打开src/api/user.js新建api接口方法

// 存储聊天信息 
export function sendMsg(data) {
  return request({
    url: api.SendMsg,
    method: 'post',
    data,
    hideloading: true
  })
}

• 然后在chatDetail页面导入这个api方法

import {  sendMsg } from '@/api/user'

• 然后在【发送】按钮触发的方法里调用这个api方法

sendMsg({ toId: obj.come_id, type: 1, message: this.value })

• sed方法 完整的 代码 如下

send() {
      if (this.value.trim() == '') {
        this.$toast('请输入内容')
        return
      }
      let obj = {
        come_id: this.$route.params.id, //接收方的id
        send_id: this.userName._id, //发送方的id
        type: 1, //消息类型 1 文字消息
        send_avatar: this.userName.avatar, //发送者的头像
        message: this.value, //发送的文字内容
        send_name: this.userName.nickname, //发送者的昵称
        date: new Date() //发送的当前时间
      }
      this.$socket.client.emit('sayTo', obj)
      sendMsg({ toId: obj.come_id, type: 1, message: this.value })
      this.list.push(obj)
      this.value = ''
    }

• 这样就实现了，一对一通讯以及保存记录到数据库了
• 但是一旦记录太多，滚动条没有自动滚到底部，同学们自己来优化下这个bug呢？？