Vue中集成环信

1. 通过 NPM 安装 Web SDK。

npm install easemob-websdk --save

2.main.js中先 import ，再访问 Web IM

import websdk from "easemob-websdk"
注：该方式只引用了 Web SDK ，仍需在项目里配置 WebIMConfig 文件内的参数，用于实例化 websdk。

3.新建webim.config.js文件

webim.config.js.png

在 webim.config.js 文件内进行以下配置：

const config = {
     xmppURL: 'im-api.easemob.com',            // xmpp Server地址，对于在console.easemob.com创建的appKey，固定为该值

     apiURL: 'http://a1.easemob.com',          // rest Server地址，对于在console.easemob.com创建的appkey，固定为该值

     appkey: 'easemob-demo#chatdemoui',        // App key

      https : false,                            // 是否使用https

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

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

      isAutoLogin: true,                        // 自动出席，（如设置为false，则表示离线，无法收消息，需要在登录成功后手动调 用conn.setPresence()才可以收消息）

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

      autoReconnectNumMax: 2,                   // 断线重连最大次数

      autoReconnectInterval: 2,                 // 断线重连时间间隔

      heartBeatWait: 4500,                       // 使用webrtc（视频聊天）时发送心跳包的时间间隔，单位ms

        delivery: true,                           // 是否发送已读回执
     }
export default config;

4.在main.js中引入webim.config.js

import webimconfig from './common/webim.config'

引入的websdk和webimconfig

5.在main.js中创建环信实例

// 环信
// 环信
let WebIM = window.WebIM = websdk;
WebIM.config = webimconfig;
// 环信实例
var conn = WebIM.conn = new WebIM.connection({
  appKey: WebIM.config.appkey,
  isHttpDNS: WebIM.config.isHttpDNS,
  isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
  https: WebIM.config.https,
  url: WebIM.config.xmppURL,
  apiUrl: WebIM.config.apiURL,
  isAutoLogin: true,
  heartBeatWait: WebIM.config.heartBeatWait,
  autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
  autoReconnectInterval: WebIM.config.autoReconnectInterval,
  isStropheLog: WebIM.config.isStropheLog,
  delivery: WebIM.config.delivery
})
// 账号密码登录配置
var optionsIm = {
  apiUrl: WebIM.config.apiURL,
  user: '', //换成自己申请的账号就行，密码也需要换  
  pwd: '',
  appKey: WebIM.config.appkey,
  success: function (re) {
    console.log('登陆成功')
  },
  error: function (err) {
    console.log(err)
  }
}
Vue.prototype.$WebIM = WebIM;
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = optionsIm;

6.使用方法

    // 登录账号
    loginWebIM() {
      // 这儿是测试用的账号和密码
      this.$imoption.user = this.util.getUser().id;

      this.$imconn.open(this.$imoption);
      let _this = this;
      // 监听回调
      this.$imconn.listen({
        onOpened: function(message) {
          console.log("用户已上线");
        },
        onClosed: function(message) {
          console.log("用户下线");
          _this.$emit("isclose", true);
        },
        // 收到文本消息
        onTextMessage: function(message) {
          if (message.from == _this.accept) {
            _this.chatContent.push({
              replyImg: require("./../../src/assets/img/hom/herderservice.png"),
              replyContent: message.data
            });
            _this.keepbottom();
          }
        }
      });
    },
    //发送文本消息
    sendMessage(textMessage) {
      let val = textMessage.replace(/[\r\n]/g, "").replace(/[ ]/g, "");
      if (val != "") {
        var id = this.$imconn.getUniqueId();
        let to = this.accept;
        // 生成本地消息id
        var msg = new WebIM.message("txt", id);
        let _this = this; // 创建文本消息
        msg.set({
          msg: val, // 消息内
          to: to, // 接收消息对象（用户id）
          roomType: false,
          success: function(id, serverMsgId) {
            //  追加本地缓存处理
            console.log(msg);
            _this.chatContent.push({
              //把发送者的头像和文本数据push到数组中在页面上展示
              askImg: require("./../../src/assets/img/hom/logo_blue.png"),
              askContent: msg.value
            });
            _this.keepbottom();
          },
          fail: function(e) {
            console.log("消息发送失败");
          }
        });
        msg.body.chatType = "singleChat";
        this.$imconn.send(msg.body);
        this.textMessage = "";
      }
    },