vue cli4接入环信webIM

vue cli4接入环信webIM

1.安装

npm install easemob-websdk --save

2.配置文件WebIMConfig.js

/**
 * 环信配置文件
 * Filename: webIMConfig.js
 * Author: 
 * Time: 
 */
let appKey = ''
if (process.env.NODE_ENV === 'development') {
  appKey = '111111111111#ceshi'// 测试(放自己的appKey)
} else {
  appKey = '222222222222222#comt'// 正式(放自己的appKey)
}

var config = {
  socketServer: '//im-api-v2.easemob.com/ws', // socket Server地址

  restServer: '//a1.easemob.com', // rest Server地址

  appkey: appKey, // appkey

  https: true, // 是否使用https

  isAutoLogin: true, // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息

  isHttpDNS: true, // 3.0 SDK支持，防止DNS劫持从服务端获取XMPPUrl、restUrl

  isMultiLoginSessions: false, // 是否开启多页面同步收消息，注意，需要先联系商务开通此功能

  isDebug: true, // 打开调试，会自动打印log，在控制台的console中查看log

  autoReconnectNumMax: 0, // 断线重连最大次数,如果autoReconnectNumMax=0，则不会自动连接。

  autoReconnectInterval: 2, // 每次重新连接之间的间隔秒数。仅当autoReconnectMaxNum>=2时有效

  delivery: false, // 是否发送已读回执

  useOwnUploadFun: false // 是否使用自己的上传方式（如将图片文件等上传到自己的服务器，构建消息时只传url）
}
export default config

3.使用

使用组件中引入
import config from '@/utils/webIMConfig'
import websdk from 'easemob-websdk'

  mounted() {
    this.getLiveInfo()
  },
  destroyed() {
    this.WebIMFun('close') // 根据自己的实际情况，关闭
  },
  methods: {
  getInfo() {
      getInfoApi({
        id: this.id
      }).then(res => {
        if (res.code === 200) {
          this.WebIMFun('open', res.data.huanxin_room_id, res.data.huanxin_username, res.data.huanxin_password)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    WebIMFun(type, huanxin_room_id, huanxin_username, huanxin_password) {
      // 初始化IM SDK
      const _this = this
      var WebIM = {}
      WebIM = window.WebIM = websdk
      WebIM.config = config
      WebIM.conn = new WebIM.connection({
        appKey: WebIM.config.appkey,
        isHttpDNS: WebIM.config.isHttpDNS,
        isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
        https: WebIM.config.https,
        url: WebIM.config.socketServer,
        apiUrl: WebIM.config.restServer,
        isAutoLogin: WebIM.config.isAutoLogin,
        autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
        autoReconnectInterval: WebIM.config.autoReconnectInterval,
        delivery: WebIM.config.delivery,
        useOwnUploadFun: WebIM.config.useOwnUploadFun
      })
      if (type == 'close') {
        WebIM.conn.close()
        return false
      }
      // 链接环信
      WebIM.conn.open({
        user: huanxin_username,
        pwd: huanxin_password,
        appKey: WebIM.config.appkey
      })
      WebIM.conn.listen({
        onOpened: function() {
          console.log('成功登录_用户名:' + huanxin_username)
          console.log('成功登录_密码:' + huanxin_password)
          console.log('成功登录_聊天室ID:' + huanxin_room_id)
          // WebIM.conn.setPresence()
          WebIM.conn.joinChatRoom({
            roomId: huanxin_room_id // 聊天室Id
          }).then(() => {
            console.log('加入聊天室成功')
          })
        },
        onClosed: function() {
          // 处理登出事件
          console.log('退出成功')
        },
        onPresence: function(message) {
          console.log(message)
        },
        onTextMessage: function(message) { // 接收消息
          //获取到信息做处理
          //写自己的逻辑
        },
        onError: function(e) {
          // 异常捕获
          console.log('error:' + JSON.stringify(e))
        }
      })
    },
  }