基于vue的环信基本实时通信功能

本篇文章借鉴了一些资料，然后在这个基础上，我将环信的实现全部都集成在一个组件里面进行实现；

https://blog.csdn.net/github_35631540/article/details/80278114

第一步，获取 webim.config.js

1. 下载地址 http://www.easemob.com/download/im，然后点击如下图的位置进行下载

解压后将 webim.config.js 拷贝到自己的文件夹下面（我这儿放的位置是src->assets->lib->webim下面），由于easemob-websdk strophe.js，我们都可以通过 npm 安装的形式完成，所以就不需要再引入了。

2. 在 webim.config.js 中修改部分代码

这儿的 appkey 是根据实际情况进行修改的。

第二步，下载easemob-websdk、strophe.js

1. 通过 npm 进行安装，注意：这儿的版本很重要，最好就用下面的版本；

 ```
npm i easemob-websdk strophe.js  --save
```

版本：

"easemob-websdk": "1.8.3", "strophe.js": "1.2.16"

2. 修改 /node_modules/strophe.js/strophe.js

代码如下（注意如果有同学直接搜索reset进行快速搜索的话，要找到第二个reset，不是第一个reset）

    setJid: function (jid) {
          this.jid = jid;
          this.authzid = Strophe.getBareJidFromJid(this.jid);
          this.authcid = Strophe.getNodeFromJid(this.jid);
        },
    getJid: function () {
          return this.jid;
        },

3. 修改 /node_modules/easemob-websdk/src/connection.js

代码如下

    var Strophe = require('strophe.js').Strophe;
    var meStrophe = require('strophe.js');
    $iq = meStrophe.$iq;
    $build = meStrophe.$build;
    $msg = meStrophe.$msg;
    $pres = meStrophe.$pres;

第三步，在组件里面进行使用

1. 设置基本信息

let WebIM = require('easemob-websdk');

const conn = new WebIM.connection({
  isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
  https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
  url: WebIM.config.xmppURL,
  heartBeatWait: WebIM.config.heartBeatWait,
  autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
  autoReconnectInterval: WebIM.config.autoReconnectInterval,
  apiUrl: WebIM.config.apiURL,
  isAutoLogin: true
})

const options = {
  apiUrl: WebIM.config.apiURL,
  user: '1',
  pwd: 'xiuxiutrip123456', // 待会会进行覆盖
  appKey: WebIM.config.appkey,
  success:function (re) {
    console.log('登陆成功')
  },
  error:function (err) {
    alert(err)
  }
}

2. 在 data() 里面进行初始化

  data () {
    return {
      $imconn: {},
      $imoption: {}
    }
  },

3. 在created里面对 $imconn、$imoption 进行赋值，然后进行登录

  created () {
    this.$imconn = conn;
    this.$imoption = options;
    this.loginWebIM();
  },

4. 登录并监听

    loginWebIM () {
      // 这儿是测试用的账号和密码，这个账号密码是通过环信后台生成的
      this.$imoption.user = '13880283427';
      this.$imoption.pwd = '123456';

      this.$imconn.open(this.$imoption);
      let _this = this;
      this.$imconn.listen({
        onOpened: function (message) {
          console.log('用户已上线')
          _this.getGroupOfWebIM();
          // 由于我们用的是聊天室，所以登录成功后必须加入聊天室
          _this.joinRoom();
        },
        onClosed: function (message) {
          console.log('用户已下线')
        },
        onEmojiMessage: function (message) {
          console.log('这儿接收到了表情')
        },
        onPictureMessage: function (message) {
          console.log('这儿接收到了图片')
        },
        onTextMessage: function (message) {
          // 每次接收信息都会在这儿监听到
          console.log('这儿接收到了文本信息');
          console.log(message)
        },
        onPresence: function ( message ) {
         // 加入聊调室后，这儿会被执行
          console.log('这儿是监听聊天室')
           _this.handlePresence(message)
        }
      })
    },

5. 加入聊调室

    handlePresence (e) {
      // 官网给出的例子是
      e.type == 'joinChatRoomSuccess' // 加入成功
      e.type == 'joinChatRoomFailed'  // 加入失败
      e.type == 'deleteGroupChat'  // 聊天室被删除
     // 但是实际操作的时候，不管有没得聊天室id，都能返回joinChatRoomSuccess
     // 所以实际判断的时候，如果加入聊天室失败，会返回一个error的属性，所有正确的判断应该是
     if (e.error) {
        console.log('加入失败')
      } else {
        console.log('加入成功')
      }
    },
    joinRoom () {
    // 加入聊天室
      this.$imconn.joinChatRoom({
          roomId: this.roomId // 聊天室id
      });
    },
    closeWebIM () {
      // 退出聊天室，每次离开聊天室的时候一定要退出聊天室
      this.$imconn.quitChatRoom({
        roomId: this.roomId // 聊天室id
      });
      this.$imconn.close(); // 如果是退出登录，那么这一句必须要，否则会出现，第一次可以登录，第二次登录掉线或者无法登陆的情况
    },

上面是有人离开聊调室的返回信息，下面是有人进来的返回信息

6. 发送信息

handleReply () {
      // 这儿必须通过接口获取roomId
      let sendText = this.description;
      // 将请求框置空
      this.description = '';

      var id = this.$imconn.getUniqueId(); // 生成本地消息id
      var msg = new WebIM.message('txt', id); // 创建文本消息
      let _this = this;

      var option = {
        msg: sendText, // 这儿是发送的消息内容
        to: '63099105247233',  // 接收消息对象(聊天室id) this.roomId
        roomType: true,
        chatType: 'chatRoom',
        // 这儿的ext是自定义属性，安卓端可以根据这个属性获取信息,以name、age为例（与安卓商量着来）
        ext: {name:'', age: ''},
        success: function () {
          console.log('send room text success');
        },
        fail: function () {
          console.log('failed');
          this.$message.error('信息发送失败');
        }
      };
      msg.set(option);
      msg.setGroup('groupchat');
      this.$imconn.send(msg.body);
    },

注意事项

1. 有时候环形的登录会出现问题，那么有必要在登录失败的时候重新进行登录

// 这时候可以将conn的定义放到data里面，option的定义通过方法获取，当登录失败的时候，就可以调用重新登录的方法
{
    data () {
      return {
        conn: new WebIM.connection({
        isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
        https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
        url: WebIM.config.xmppURL,
        heartBeatWait: WebIM.config.heartBeatWait,
        autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
        autoReconnectInterval: WebIM.config.autoReconnectInterval,
        apiUrl: WebIM.config.apiURL,
        isAutoLogin: true
      }),
     }
  }
  methods: {
    getOptions () {
      let _this = this;
      return {
        apiUrl: WebIM.config.apiURL,
        user: '',
        pwd: '',
        appKey: WebIM.config.appkey,
        success:function (res) {
          console.log('这儿是this', _this)
          // console.log('登陆成功')
        },
        error:function (err) {
          console.log(err)
          console.log('这儿重新登录', _this);
          _this.loginWebIM();
        }
      }
    },
  }
}

2. 此时 created() 钩子函数里面就可以修改为

this.$imconn = this.conn;
this.$imoption = this.getOptions();

3. 另外还有一个地方可以修改

    ...
      let _this = this;
      this.$imconn.listen({
        onClosed: function (message) {
          console.log('用户已下线')
          // 如果是在聊天页面
          if (...) {
            console.log('这儿重新进行登录');
            _this.loginWebIM();
          }
        },
        ...
      })