Vue2防微信通讯(非即时通讯)--技术: lemon-imui

安装依赖: npm install lemon-imui -S

引入依赖和样式:

import LemonIMUI from 'lemon-imui'

import 'lemon-imui/dist/index.css';

Vue.use(LemonIMUI)

示例:lemon-imui-examples.

教程:

    <lemon-imui
      ref="IMUI"
        
      :user="user"
        
      @pull-messages="handlePullMessages"//消息记录
        
      @send="handleSend"//发送消息
        
      @change-contact="menuAvatarClick"//联系人被点击的回调
        
      :sendKey="(e) => e.keyCode == 13 && e.ctrlKey"//发送消息键位
    />
    
data:(){
      return {
      // 当前对话id
      topId: '',
      messagesList: [],
      user: {
        id: 5,
        displayName: '调解员',
        avatar: imgLogo
      },
      text2: null,
  },
  
  methods: {
    //左侧联系人被点击时触发
    menuAvatarClick(contact) {
    //取出当前联系人id给予赋值
      this.topId = contact.id
    },
    //消息记录
    async handlePullMessages(contact, next) {
    //此处开启定时器来获取接口聊天数据
    that.text2 = setInterval(async () => {
      let list = await getChatRecordsList({ id: this.topId })
      this.messagesList = []
      list.data.forEach((item) => {
        this.messagesList.push({
          id: item.id,//消息唯一id
          status: 'succeed',
          type: item.type == 1 ? 'text' : 'image',//文字类型/图片类型
          sendTime: item.createTime,//发送的时间
          content: item.content,//发送的内容
          toContactId: this.topId,//发送人id
          fromUser: {
            id: item.sendType == 2 ? 5 : item.sendType,//消息展示在左侧/右侧
            displayName: item.displayName,
            avatar: item.sendType == 2 ? imgLogo : imgURL//双方头像
          }
        })
      })
      //清空本地消息记录并再次触发记录事件
      IMUI.clearMessages()
      next(this.messagesList, true)
      }, 10000)
    },
    //发送消息
    handleSend(message, next, file) {
      if (file) {
        var type = 2
        // 图片
        let formData = new FormData()
        formData.append('file', file)
        getImageUpload(formData).then((res) => {
          if (res.code == '200') {
            getChatRecordHtSend({
              content: res.data,
              type: type,
              userId: this.topId
            })
            next()
          }
        })
      } else {
        var type = 1
        getChatRecordHtSend({
          content: message.content,
          type: type,
          userId: this.topId
        })
        next()
      }
    },
    search() {
        //初始化联系人
      var IMUI = this.$refs.IMUI
      IMUI.initContacts(this.objList)
    },
    //联系人列表
    async getChatRecordGroupByUserIdInFo() {
        //后端数据返回形式
      let res = await getChatRecordGroupByUserId()
      if (res.code == '200') {
        res.data.forEach((el) => {
          this.objList.push({
            avatar: imgURL,//联系人头像
            content: el.content,//联系人消息
            coreCaseId: null,
            createTime: null,
            displayName: el.zwrRealName,//联系人姓名
            index: 'A',//分组
            lastContent: ' ',
            type: el.type,
            id: el.userId,
            isRead: null,
            managerId: null,
            realName: null,
            sendType: null,
            userId: el.userId,
            zwrRealName: el.zwrRealName
          })
        })
      }
    }
},
mounted() {
    //初始化
    this.getChatRecordGroupByUserIdInFo()
    this.search()
  },
  beforeDestroy() {
      //在页面销毁之前清除定时器--不然会一直循环调用
    window.clearInterval(this.text2)
  },