基於環信SDK的IM即時通訊填坑之路(vue)

公司最近使用第三方環信SDK的進行通信聊天,基本已完成。記錄下填坑之路

1、可以通過以下方式引用 WebSDK

1.安裝

npm install easemob-websdk --save

2. 先 require ，再訪問 Web IM 。

require('easemob-websdk'); 

注：該方式只引用了 Web SDK ，仍需在項目里配置 WebIMConfig 文件內的參數，用於實例化 websdk。
配置在 webim.config.js 文件內進行以下配置：

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,                           // 是否發送已讀回執

2、組件中使用（群聊）

這里以群聊為例子

注冊

regeister(id,name) {        
     var options = {
          username: id,//用戶名
          password: md5(id),//密碼
          nickname: name,//昵稱
          appKey: WebIM.config.appkey,//appkey
          success: e => {
            console.log('注冊成功', e);
            if (e) {
              localStorage.setItem("liveUser", id);//注冊成功將id保存
              this.login()//去登錄
            }
          },
          error: e => {
            console.log("注冊異常",e);
            if(e.type == 17){//如果已注冊 則登錄
              console.log("注冊異常去登陸",e);
              localStorage.setItem("liveUser", id);
              this.login();
            }
          },
          apiUrl: WebIM.config.apiURL
        };
        WebIM.conn.registerUser(options);
},

1、這里如果注冊異常的type==17則代表已注冊，那就直接去登錄

2、這里id是依據是否在應用內已登錄（自己應用，非環信），

如果是未登錄（游客狀態）則隨機一個

Math.ceil(Math.random() * 100000);

如果登錄，則用登錄后返回的user_id

登錄

//環信登錄
login() {
        var userName = localStorage.getItem("liveUser");
        var options = {
          apiUrl: WebIM.config.apiURL,
          user: userName,
          pwd: md5(userName),
          appKey: WebIM.config.appkey,
          success: e => {
            console.log('登錄成功', e);
            if (e) {
              this.addGroup()
            }
          },
          fail: e => {
            console.error('登錄失敗', e);
          }
        };
        WebIM.conn.open(options);
},

登錄成功后就可以加入群組

 

加入群組

//加入群組
addGroup() {
        var options = {
          groupId: "xxxx",   // 群組ID
          success: function (resp) {
            console.log("Response: ", resp);
          },
          error: function (e) {
            console.error("加入群聊異常", e, JSON.parse(e.data));
            if (e.type == 17) {
              console.error("您已經在這個群組里了");
            }
          }
        };
        WebIM.conn.joinGroup(options);
 },

這里群id是你購買環信后創建應用分配的群id

加群成功，就可以獲取群歷史消息了

獲取歷史消息

getMessList() {
        var options = {
          queue: "xxxx",//群組id
          isGroup: true,//是否是群聊
          count: 20,//返回多少條
          success: data => {
            this.$store.dispatch('receive_livemsglist',data)//這里把消息加到vuex中存儲
 
            this.messList = this.$store.state.liveMsgList
 
            console.log("獲取歷史消息", data)
          },
          fail: e => {
            console.log("獲取群聊異常", e)
          }
        };
 
        WebIM.conn.fetchHistoryMessages(options);
      },

1、不能依據頁碼獲取數據

這里環信有個bug（也不能說bug,一個不足吧），就是獲取歷史消息竟然不是依據頁碼去拉取，也就是我拉取哪一頁就獲取哪一頁。沒辦法，環信沒有提供這個參數。

給環信提供了工單，他那邊反饋

解決

先說下，上面這個問題，就是用本地vuex存儲了.

vuex的state中

export default {
  liveMsgList:[],//消息記錄
}

mutations.js中

//消息記錄
  [RECEIVE_LIVEMSGLIST](state,{liveMsgList}){
    if(state.liveMsgList.length){
      state.liveMsgList.unshift(...liveMsgList)
    }else{
      state.liveMsgList = liveMsgList
    }
  },

actions.js中

receive_livemsglist({commit},liveMsgList){
    commit(RECEIVE_LIVEMSGLIST,{liveMsgList})
  },

2、獲取歷史消息時，會觸發監聽接收消息事件

解決

這個是3.0.7 版本 SDK 的已知bug，建議您更新下SDK

監聽消息

//環信接收消息
      _IMListen() {
        WebIM.conn.listen({
          onOpened: () => {          //連接成功回調
            console.log("連接成功!")
          },
          //文本消息
          onTextMessage: text => {
            console.log("接收到了文本消息", text);
            if (!text.error && text.type != "chat") {
              this.messList.push(text);
            }
          },
          //連接關閉回調
          onClosed: function ( message ) {
            console.log("連接關閉!",message)
          },         
          //收到表情消息
          onEmojiMessage: emj => {
            console.log("接收到了表情消息", emj)
            if (!emj.error && emj.type != "chat") {
              this.messList.push(emj);
            }
          },
          //cmd消息
          onCmdMessage:  ( message ) => {
            console.log(message,"cmd")
          },
          //收到自定義消息
          onCustomMessage: ( message ) => {
            console.log(message,"Custom")
          },
          onError: e => {
            console.log("接收消息錯誤", JSON.stringify(e));
          },
          onRecallMessage:(e)=>{
            console.log("消息撤回",e)
          },
        });
      },

發送消息

sendMess() {
        var id = WebIM.conn.getUniqueId(); // 生成本地消息id
        var msg = new WebIM.message("txt", id); // 創建文本消息
        var option = {
          msg: this.message, // 消息內容
          to: "xxx", // 接收消息對象(聊天室id)
          roomType: false, // 群聊類型，true時為聊天室，false時為群組
          ext: {}, // 擴展消息
          success: (id, serverMsgId) => {
            console.log("發送消息成功",serverMsgId)
          },
          fail: e => {
            console.error("發送消息異常", e)
          }
        };
        msg.set(option);
        msg.setGroup("groupchat"); // 群聊類型
        WebIM.conn.send(msg.body);
      }
    },

大致流程就這樣，不懂的可以評論能解決就會回答。