vue集成环信IM

vue 集成环信im 简单demo

环信AppKey:1106190415055331#test

测试账号： test1  123456  test2  123456  test3  123456

默认登录test1

用vuex统一管理聊天对象、聊天信息等

点击相应的对象，发送文本

1. 引入环信依赖

2. vuex 环信前期准备全局状态控制

import {dotData} from '@/utils'
import Vue from 'vue'
// im聊天状态
const IM_CHART_DIALOG = {
  state: {
    visible: false, // 显示隐藏
    rosterList: [], // 好友列表
    groupList: [],  // 群组列表
    groupMessageMap: {}, // 聊天信息集合
    groupMessageHistoryMap: {}, // 历史消息
    currentGroupId: '', // 当前活动
    extMap: {}, // 附加信息
    eNameMap: {}, // 用户名信息
    disabledGroupId: [],
    groupIdMap: {}, // 群消息
    readonlyGroupIdArr: [] // 只读的groupId
  },
  mutations: { // 修改状态
    SET_IM_CHART_DIALOG_VISIBLE(state, {visible}) { // 弹窗可见/隐藏
      state.visible = visible
    },
    SET_IM_CHART_ROSTERLIST(state, rosterList) {
      state.rosterList = rosterList
    },
    SET_IM_CHART_GROUPLIST(state, groupList) {
      state.groupList = groupList
    },
    PUSH_IM_CHART_DIALOG_GROUP_MESSAGE(state, {message, groupId}) { // 用户聊天信息
      let chart = state.groupMessageMap[groupId] || []
      chart.push(message)
      Vue.set(state.groupMessageMap, groupId, chart)
    },
    UN_SHIFT_IM_CHART_DIALOG_GROUP_MESSAGE(state, {message, groupId}) { // 用户聊天信息
      let chart = state.groupMessageMap[groupId] || []
      chart.unshift(message)
      Vue.set(state.groupMessageMap, groupId, chart)
    },
    REMOVE_IM_CHART_DIALOG_GROUP_MESSAGE(state, groupId) { // 移除一个群聊
      let chart = state.groupMessageMap
      delete chart[groupId]
      state.groupMessageMap = chart
    },
    SET_IM_CHART_DIALOG_GROUP_ID(state, groupId) { // 设置当前用户组
      state.currentGroupId = groupId
    },
    SET_IM_CHART_EXT_MAP(state, {groupId, ext}) { // 设置group 附加信息
      if (!state.extMap[groupId]) {
        Vue.set(state.extMap, groupId, ext)
      }
    },
    REMOVE_IM_CHART_EXT_MAP(state, groupId) { // 移除一个群聊追加消息
      let ext = state.extMap
      delete ext[groupId]
      state.extMap = ext
    },
    REMOVE_IM_CHART_GROUP_ID(state, groupId) {
      let groupIdMap = state.groupIdMap
      delete groupIdMap[groupId]
      state.groupIdMap = groupIdMap
    },
    // eName 和用户进行映射
    SET_IM_CHART_DIALOG_MEMBER_E_NAME(state, {eName, member}) {
      Vue.set(state.eNameMap, eName, member)
    },
    // 使当前用户组消息已读
    SET_IM_CHART_DIALOG_GROUP_ID_READ(state, groupId) {
      if (state.visible) {
        let chart = state.groupMessageMap[groupId] || []
        chart.forEach(v => {
          Vue.set(v, 'isRead', true)
        })
        Vue.set(state.groupMessageMap, groupId, chart)
      }
    },
    // 禁用的groupId
    PUSH_IM_CHART_DIALOG_DISABLE_GROUP_ID(state, groupId) {
      state.disabledGroupId.push(groupId)
    },
    // 群组信息
    SET_IM_CHART_DIALOG_GROUP_ID_INFO(state, {groupId, info}) {
      if (groupId) {
        Vue.set(state.groupIdMap, groupId, info)
      }
    },
    // 清除群消息
    CLEAR_IM_CHART_DIALOG_GROUP_ID_INFO(state) {
      state.groupIdMap = {}
    },
    // 历史记录拉取 第一次拉取为真
    SET_IM_GROUP_MESSAGE_HISTORY_FIRST(state, {groupId}) {
      let obj = state.groupMessageHistoryMap[groupId] || {}
      Vue.set(obj, 'first', true)
      Vue.set(state.groupMessageHistoryMap, groupId, obj)
    },
    // 历史记录拉取 已经没有数据了
    SET_IM_GROUP_MESSAGE_HISTORY_OVER(state, {groupId}) {
      let obj = state.groupMessageHistoryMap[groupId] || {}
      Vue.set(obj, 'over', true)
      Vue.set(state.groupMessageHistoryMap, groupId, obj)
    },
    // 只读的消息列表
    SET_IM_READ_ONLY_GROUP_ID(state, {groupId}) {
      state.readonlyGroupIdArr.push(groupId)
    }
  },
  actions: { // 调用方法（接收传进来的参数）
    // 展示弹窗
    SET_IM_CHART_DIALOG_VISIBLE({commit}, {visible}) { // 弹窗可见
      commit('SET_IM_CHART_DIALOG_VISIBLE', {visible})
    },
    // 好友列表
    SET_IM_CHART_ROSTERLIST({commit}, rosterList) {
      commit('SET_IM_CHART_ROSTERLIST', rosterList)
    },
    // 群组列表
    SET_IM_CHART_GROUPLIST({commit}, groupList) {
      commit('SET_IM_CHART_GROUPLIST', groupList)
    },
    // 添加消息
    PUSH_IM_CHART_DIALOG_GROUP_MESSAGE({commit}, message) { // 聊天信息组
      const groupId = dotData(message, 'groupId')
      const ext = dotData(message, 'ext')
      delete message.ext
      commit('PUSH_IM_CHART_DIALOG_GROUP_MESSAGE', {groupId, message})
      commit('SET_IM_CHART_EXT_MAP', {groupId, ext}) // 设置附加消息
    },
    UN_SHIFT_IM_CHART_DIALOG_GROUP_MESSAGE({commit}, message) { // 聊天信息组
      const groupId = dotData(message, 'groupId')
      const ext = dotData(message, 'ext')
      delete message.ext
      commit('UN_SHIFT_IM_CHART_DIALOG_GROUP_MESSAGE', {groupId, message})
      commit('SET_IM_CHART_EXT_MAP', {groupId, ext}) // 设置附加消息
    },
    REMOVE_IM_CHART_DIALOG_GROUP_ID({commit, getters}, groupId) {
      commit('REMOVE_IM_CHART_DIALOG_GROUP_MESSAGE', groupId) // 移除消息
      commit('REMOVE_IM_CHART_EXT_MAP', groupId) // 移除附加消息
      // 移除一个群
      commit('REMOVE_IM_CHART_GROUP_ID', groupId)
      commit('PUSH_IM_CHART_DIALOG_DISABLE_GROUP_ID', groupId)
      if (groupId === getters.GET_IM_CHART_DIALOG_GROUP_ID) {
        commit('SET_IM_CHART_DIALOG_GROUP_ID', '')
      }
    },
    // 添加追加信息
    SET_IM_CHART_EXT_MAP({commit}, {groupId, ext}) {
      commit('SET_IM_CHART_EXT_MAP', {groupId, ext})
    },
    // 设置当前groupId
    SET_IM_CHART_DIALOG_GROUP_ID({commit}, groupId) {
      commit('SET_IM_CHART_DIALOG_GROUP_ID', groupId)
      commit('SET_IM_CHART_DIALOG_GROUP_ID_READ', groupId)
    },
    // 添加禁用的groupId
    PUSH_IM_CHART_DIALOG_DISABLE_GROUP_ID({commit, getters}, groupId) {
      if (groupId) {
        commit('PUSH_IM_CHART_DIALOG_DISABLE_GROUP_ID', groupId)
        if (groupId === getters.GET_IM_CHART_DIALOG_GROUP_ID) {
          commit('SET_IM_CHART_DIALOG_GROUP_ID', '')
        }
      }
    },
    SET_IM_CHART_DIALOG_GROUP_ID_INFO({commit}, {groupId, info}) { // 设置群聊信息
      commit('SET_IM_CHART_DIALOG_GROUP_ID_INFO', {groupId, info})
      if (Array.isArray(info.members)) {
        info.members.forEach(v => {
          commit('SET_IM_CHART_DIALOG_MEMBER_E_NAME', {eName: v.userEasemobName, member: v})
        })
      }
    },
    CLEAR_IM_CHART_DIALOG_GROUP_ID_INFO({commit}) { // 清空群信息
      commit('CLEAR_IM_CHART_DIALOG_GROUP_ID_INFO')
    },
    SET_IM_GROUP_MESSAGE_HISTORY_FIRST({commit}, {groupId}) { // 第一次访问历史消息
      commit('SET_IM_GROUP_MESSAGE_HISTORY_FIRST', {groupId})
    },
    SET_IM_GROUP_MESSAGE_HISTORY_OVER({commit}, {groupId}) { // 已无历史消息
      commit('SET_IM_GROUP_MESSAGE_HISTORY_OVER', {groupId})
    },
    SET_IM_READ_ONLY_GROUP_ID({commit}, {groupId}) { // 只读消息
      commit('SET_IM_READ_ONLY_GROUP_ID', {groupId})
    }
  },
  getters: { // 弹窗展示
    GET_IM_CHART_DIALOG_VISIBLE: state => {
      return state.visible
    },
    GET_IM_CHART_ROSTERLIST: state => {
      return state.rosterList || []
    },
    GET_IM_CHART_GROUPLIST: state => {
      return state.groupList || []
    },
    GET_IM_CHART_DIALOG_GROUP_ID: state => { // 获取当前groupId
      return state.currentGroupId
    },
    GET_IM_CHART_EXT_MAP: (state) => (groupId) => { // 根据用户组获取
      if (state.extMap[groupId]) {
        return state.extMap[groupId]
      }
    },
    GET_IM_CHART_DIALOG_GROUP_MESSAGE: (state) => (groupId) => { // 获取消息组
      if (groupId) {
        return state.groupMessageMap[groupId] || []
      }
      return []
    },
    GET_IM_CHART_DIALOG_MEMBER_E_NAME: (state) => (eName) => { // 根据环信name 获取用户信息
      if (eName) {
        return state.eNameMap[eName] || {}
      }
      return state.eNameMap
    },
    // 获取未读消息条数
    GET_IM_CHART_DIALOG_UN_READ_LENGTH: (state, getters) => (groupId) => { // 根据环信name 获取用户信息
      if (Array.isArray(groupId)) {
        let temp = 0
        groupId.forEach(id => {
          temp += getters.GET_IM_CHART_DIALOG_GROUP_MESSAGE(groupId).filter(v => v.isRead === false).length
        })
        return temp
      } else {
        return getters.GET_IM_CHART_DIALOG_GROUP_MESSAGE(groupId).filter(v => v.isRead === false).length
      }
    },
    // 全部未读消息
    GET_IM_CHART_DIALOG_ALL_UN_READ_LENGTH: (state) => { // 根据环信name 获取用户信息
      let temp = 0
      for (let k in state.groupMessageMap) {
        if (Array.isArray(state.groupMessageMap[k])) {
          temp += state.groupMessageMap[k].filter(v => v.isRead === false).length
        }
      }
      return temp
    },
    // 获取最后一条消息
    GET_IM_CHART_DIALOG_LAST_MESSAGE: (state, getters) => (groupId) => {
      let temp = ''
      if (Array.isArray(groupId)) {
        groupId.forEach(id => {
          let charts = getters.GET_IM_CHART_DIALOG_GROUP_MESSAGE(id)
          let lastChart = ''
          if (charts.length) {
            lastChart = charts[charts.length - 1]
          }
          if (temp) {
            if (lastChart) {
              if (temp.timeStr < lastChart.timeStr) {
                temp = lastChart
              }
            }
          } else {
            if (lastChart) {
              temp = lastChart
            }
          }
        })
      } else {
        let charts = getters.GET_IM_CHART_DIALOG_GROUP_MESSAGE(groupId)
        if (charts.length) {
          temp = charts[charts.length - 1]
        }
      }
      if (temp) {
        switch (temp.fileType) {
          case 'audio':
            return '[语音]'
          case 'image':
            return '[图片]'
          default :
            return temp.sourceMsg
        }
      }
    },
    // 历史消息对象
    GET_IM_GROUP_MESSAGE_HISTORY: (state) => (groupId) => {
      return dotData(state.groupMessageHistoryMap, groupId) || {}
    },
    // 是只读消息
    IS_IM_READ_ONLY_GROUP_ID: (state) => (groupId) => {
      return state.readonlyGroupIdArr.indexOf(groupId) >= 0
    }
  }
}

export default IM_CHART_DIALOG

3. 构建环信实例

import store from '@/store'
import {alert, dotData} from '@/utils'
import moment from 'moment'

export const Easemob = class Easemob {
  static instance = null
  connection = null
  config = {}
  username = ''
  WebIM = window.WebIM

  // 初始化
  constructor() {
    if (Easemob.instance) {
      return Easemob.instance
    }
    this.config = window.WebIM.config
    Easemob.instance = this
  }

  // 获取当前时间
  _getTimeString() {
    return moment().format('YYYY-MM-DD HH:mm:ss')
  }

  // 获取连接
  getConnection() {
    if (!this.connection) {
      const Connection = window.WebIM.connection
      this.connection = new Connection({
        isMultiLoginSessions: this.config.isMultiLoginSessions,
        https: typeof this.config.https === 'boolean' ? this.config.https : location.protocol === 'https:',
        url: this.config.xmppURL,
        isAutoLogin: true,
        heartBeatWait: this.config.heartBeatWait,
        autoReconnectNumMax: this.config.autoReconnectNumMax,
        autoReconnectInterval: this.config.autoReconnectInterval,
        apiUrl: this.config.apiURL
      })
    }
    return this.connection
  }

  // 发送时追加信息
  appendMessage(message, className = 'in') {
    message = this.createClassNameAndTime(message, className)
    message = this._setExt(message)
    return message
  }

  // 添加时间和来源
  createClassNameAndTime(message, className = 'in') {
    message.className = className
    message.timeStr = message.timeStr || this._getTimeString()
    message.loginUserName = this.username
    return message
  }

  // 设置追加信息
  _setExt(message) {
    return message
  }

  // 发送已阅回执
  readMessage(message) {
    let ImMessage = this.WebIM.message
    const id = this.getConnection().getUniqueId()
    let msg = new ImMessage('read', id)
    msg.set({
      id: message.id,
      to: message.from
    })
    this.getConnection().send(msg.body)
  }

  // 登陆
  login(username, password) {
    this.getConnection().open({
      apiUrl: this.config.apiURL,
      user: username,
      pwd: password,
      appKey: this.config.appkey
    })

    const that = this

    this.connection.listen({
      onOpened(message) {
        that.username = username

        // 获取好友
        this.getRoster({
          success: roster => {
            store.dispatch('SET_IM_CHART_ROSTERLIST', roster)
          },
          error: e => {
            console.log(e)
          }
        })
        // 获取群组
        this.getGroup({
          success: group => {
            store.dispatch('SET_IM_CHART_GROUPLIST', group.data)
          },
          error: e => {
            console.log(e)
          }
        })
      },
      // 文本消息
      onTextMessage(message) {
        message = that.createClassNameAndTime(message)
        // 处理表情
        if (typeof message.sourceMsg === 'string') {
          Object.keys(that.config.emoConfig.map).forEach(v => {
            message.data = message.sourceMsg = message.sourceMsg.replace(new RegExp(v, 'g'), `<img src="${that.config.emoConfig.path + that.config.emoConfig.map[v]}" />`)
          })
        }
        let type = dotData(message, 'type')
        if (type === 'groupchat') { // 群组消息
          message.groupId = message.to
          if (store.getters.GET_IM_CHART_DIALOG_GROUP_ID !== message.groupId || store.getters.GET_IM_CHART_DIALOG_VISIBLE === false) {
            message.isRead = false
          }
          store.dispatch('PUSH_IM_CHART_DIALOG_GROUP_MESSAGE', message)
        } else {
          message.groupId = message.from
          store.dispatch('PUSH_IM_CHART_DIALOG_GROUP_MESSAGE', message)
        }
      },
      // 穿透消息
      onCmdMessage(message) {
        message.sourceMsg = '发起对话'
        message.data = '发起对话'
        message = that.createClassNameAndTime(message)
        let type = dotData(message, 'type')
        if (type === 'groupchat') {
          message.from = message.to
        }
        store.dispatch('PUSH_IM_CHART_DIALOG_GROUP_MESSAGE', message)
      },
      // 图片消息
      onPictureMessage(message) {
        message = that.createClassNameAndTime(message)
        message.fileType = 'image'
        let type = dotData(message, 'type')
        if (type === 'groupchat') { // 群组消息
          message.groupId = message.to
          if (store.getters.GET_IM_CHART_DIALOG_GROUP_ID !== message.groupId || store.getters.GET_IM_CHART_DIALOG_VISIBLE === false) {
            message.isRead = false
          }
          store.dispatch('PUSH_IM_CHART_DIALOG_GROUP_MESSAGE', message)
        }
      },
      // 音频消息
      onAudioMessage(message) {
        let options = {url: message.url}

        options.onFileDownloadComplete = (response) => {
          message.objectURL = that.WebIM.utils.parseDownloadResponse.call(that.getConnection(), response)
          message = that.createClassNameAndTime(message)
          message.fileType = 'audio'
          let type = dotData(message, 'type')
          if (type === 'groupchat') { // 群组消息
            message.groupId = message.to
            if (store.getters.GET_IM_CHART_DIALOG_GROUP_ID !== message.groupId || store.getters.GET_IM_CHART_DIALOG_VISIBLE === false) {
              message.isRead = false
            }
            store.dispatch('PUSH_IM_CHART_DIALOG_GROUP_MESSAGE', message)
          }
        }

        options.onFileDownloadError = () => {
          // 音频下载失败
        }

        // 通知服务器将音频转为mp3
        options.headers = {
          'Accept': 'audio/mp3'
        }

        that.WebIM.utils.download.call(that.getConnection(), options)
      },
      onEmojiMessage: (message) => {
        let data = message.data
        for (let i = 0, l = data.length; i < l; i++) {
        }
      },
      onError(message) {
        that.handError(message)
      }
    })
    return this.connection
  }

  // 处理报错
  handError(error) {
    let err = 'im报错：'
    console.error(error)
    switch (error.type) {
      case 7 :
        alert(err + '客户端网络中断')
        break
      case 8 :
        alert(err + '多端登录，被踢下线')
        break
      case 16 :
        alert(err + '服务端关闭了链接')
        break
      case 31 :
        alert(err + '处理下行消息出错，try/catch抛出异常')
        break
      case 32 :
        alert(err + '客户端断线')
        break
      case 33 :
        alert(err + '客户端退出登录')
        break
      case 34 :
        alert(err + '同一浏览器打开标签页超过上限')
        break
      case 402 :
        alert(err + '取到token 但是没有连上xmpp server')
        break
      default:
        alert(err + JSON.stringify(error))
    }
  }

  // 登出
  logout() {
    if (this.connection) {
      this.connection.close()
    }
  }

  // 发送消息
  sendMessage(message, to, config = {
    type: 'txt',
    success() {
    },
    fail() {
    },
    chatType: ''
  }) {
    const that = this
    const id = this.getConnection().getUniqueId()
    let ImMessage = this.WebIM.message
    const type = config.type
    const chatType = config.chatType
    let msg = new ImMessage(type, id)
    var option = {
      msg: message,
      to,
      roomType: false,
      success: (messageId, msgId) => {
        let temp = {
          id: messageId,
          type,
          from: that.username,
          to,
          data: message,
          sourceMsg: message,
          error: false,
          msgId
        }
        if (config.isGroup) {
          temp.groupId = to
        } else {
          temp.groupId = temp.to
        }
        temp = that.appendMessage(temp, 'out')
        store.dispatch('PUSH_IM_CHART_DIALOG_GROUP_MESSAGE', temp)
        config.success()
      },
      fail: () => {
        config.fail()
      }
    }
    if (chatType === 'chatRoom') {
      option.chatType = 'chatRoom'
    }
    option = this._setExt(option)
    msg.set(option)
    if (chatType === 'chatRoom') {
      msg.setGroup('groupchat')
    }
    this.getConnection().send(msg.body)
  }

  // 添加消息
  unShiftMessage(message) {
    const className = message.from === this.username ? 'out' : 'in'
    console.log(message.from, this.username, className)
    const temp = this.appendMessage(message, className)
    store.dispatch('UN_SHIFT_IM_CHART_DIALOG_GROUP_MESSAGE', temp)
  }

  // 发送文本消息
  sendTextMessage(message, to, success = () => {
  }, fail = () => {
  }) {
    this.sendMessage(message, to, {type: 'txt', success, fail})
  }

  // 发送组消息
  sendTextMessageGroup(message, groupId, success) {
    this.sendMessage(message, groupId, {type: 'txt', success, chatType: 'chatRoom', isGroup: true})
  }

  // 发送cmd 消息
  sendCmdMessage(message, to, success = () => {
  }, fail = () => {
  }, action = '[CMDMessage]') {
    // todo
  }

  /**
   * 发送图片
   * @param input
   * @param to
   */
  sendGroupImageMessage(input, to, success = () => {
  }, fail = () => {
  }, chatType = 'chatRoom') {
    const conn = this.getConnection()
    const id = conn.getUniqueId() // 生成本地消息id
    let ImMessage = this.WebIM.message
    const msg = new ImMessage('img', id) // 创建图片消息
    // var input = document.getElementById('image')  // 选择图片的input
    const file = this.WebIM.utils.getFileUrl(input) // 将图片转化为二进制文件
    const allowType = {
      'jpg': true,
      'gif': true,
      'png': true,
      'bmp': true,
      'jpeg': true
    }
    const that = this
    if (file.filetype.toLowerCase() in allowType) {
      let option = {
        apiUrl: this.config.apiURL,
        file: file,
        to, // 接收消息对象
        roomType: false,
        chatType,
        onFileUploadError: () => { // 消息上传失败
          alert('图片发送失败')
          fail()
        },
        onFileUploadComplete: (file) => { // 消息上传成功
          if (Array.isArray(file.entities)) {
            for (let v of file.entities) {
              let url = file.uri + '/' + v.uuid
              let temp = {
                id,
                type: 'chat',
                from: that.username,
                to,
                url,
                error: false,
                groupId: to
              }
              temp = that.appendMessage(temp, 'out')
              temp.fileType = 'image'
              store.dispatch('PUSH_IM_CHART_DIALOG_GROUP_MESSAGE', temp)
              success()
            }
          }
        },
        flashUpload: this.WebIM.flashUpload
      }
      option = this._setExt(option)
      msg.set(option)
      if (chatType === 'chatRoom') {
        msg.setGroup('groupchat')
      } else {
        msg.body.chatType = chatType
      }
      conn.send(msg.body)
    } else {
      alert('只支持：' + allowType.join(',') + '的图片格式')
    }
  }
}

export default Easemob

4. 初始化 登录，获取好友分组以及聊天信息，使用场景系统用户自接登录，所以这里没有单独做注册登录

computed: {

  // 用户
  rosterList () {
    return this.GET_IM_CHART_ROSTERLIST || []
  },
  groupList () {
    return this.GET_IM_CHART_GROUPLIST || []
  },
  // 聊天数据
  charts () {
    return this.GET_IM_CHART_DIALOG_GROUP_MESSAGE(this.imTo.toId) || []
  },
  ...mapGetters({
    GET_IM_CHART_ROSTERLIST: 'GET_IM_CHART_ROSTERLIST',
    GET_IM_CHART_GROUPLIST: 'GET_IM_CHART_GROUPLIST',
    GET_IM_CHART_DIALOG_GROUP_MESSAGE: 'GET_IM_CHART_DIALOG_GROUP_MESSAGE',
    GET_IM_CHART_DIALOG_GROUP_ID: 'GET_IM_CHART_DIALOG_GROUP_ID'
  })
},

methods: {
  initIm () {
    // im 登陆
    this.im.login('test1', '123456')
  },
  // 发送消息
  sendMessage () {
    if (this.imTo.chatType === 'single') {
      // 会话
      this.im.sendTextMessage(this.txt, this.imTo.toId, () => {
        this.txt = ''
      })
    } else {
      // 组
      this.im.sendTextMessageGroup(this.txt, this.imTo.toId, () => {
        this.txt = ''
      })
    }
  },
  // 发送图片消息
  sendImageMessage () {
    if (!this.imTo.toId) {
      alert('发送对象必须')
      return
    }
    this.im.sendGroupImageMessage(this.$refs.imageInput, this.imTo.toId, () => {
      this.fileTrigger = !this.fileTrigger
      this.$nextTick(_ => {
        this.fileTrigger = !this.fileTrigger
      })
    })
  },
  toChats (opt) {
    if (opt.groupid) {
      this.imTo = {
        chatType: 'group',
        toId: opt.groupid,
        toName: opt.groupname
      }
    } else {
      this.imTo = {
        chatType: 'single',
        toId: opt.name,
        toName: opt.name
      }
    }
  },
  scrollHandler () {},
  // 滚动到底
  scrollToBottom () {
    this.$nextTick(_ => {
      this.$refs['chattingContent'].wrap.scrollTop = this.$refs['chattingContent'].wrap.scrollHeight
    })
  }
}

git地址：

https://github.com/DarkSide7H/vue-chat

示例截图