基於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();
          }
        },
        ...
      })