小程式整合環信IM怎麼用?(附程式碼範例)

2021-09-21 19:00:09

最近在做一款有語音直播功能的小程式,用到了環信IM整合功能,由於我搜了下目前用環信做小程式的的確是少之又少,而且環信官方說從2月份不再更新程式碼(具體原因我也沒問,可能本身微信就是一款聊天工具所以用處不大)

我們產品需要用到聊天室功能,之前做H5端登入完成之後加入聊天室即可:

 WebIM.conn.open(options);
 WebIM.conn.joinChatRoom(option1);

同樣方法在小程式上不行,一直報錯:

Cannot read property 'sendIQ' of undefined

百度了一下,說加入聊天室要放在登入成功後的回撥裡,於是檢視它的原始碼connection.js發現:

connection.prototype.open = function (options) {


    var pass = _validCheck(options, this);

    if (!pass) {
        return;
    }
    var conn = this;

    if (conn.isOpening() || conn.isOpened()) {
        return;
    }

    if (options.accessToken) {
        options.access_token = options.accessToken;
        _login(options, conn);
    } else {
       //登入成功的回撥函數
        var suc = function (data, xhr, myName) {
            conn.context.status = _code.STATUS_DOLOGIN_IM;
            conn.context.restTokenData = data;
            if (data.statusCode != '404' && data.statusCode != '400') {
                wx.showToast({
                    title: '登入成功',
                    icon: 'none',
                    duration: 4000
                });
            }
            //回撥成功後執行這個方法
            _login(data.data, conn);
           
        };
        
        var options = {
            url: apiUrl + '/' + orgName + '/' + appName + '/token',
            data: loginfo,
             success: suc || _utils.emptyfn,
            error: error || _utils.emptyfn
        };
        _utils.ajax(options);
    }

登入成功有一個內部回撥,回撥裡面呼叫了一個 _login(data.data, conn)的方法:

//具體裡面執行什麼去原始碼檢視,我就不貼程式碼了
var _login = function (options, conn) {
    
    var callback = function (status, msg) {
      _loginCallback(status, msg, conn);
    };


};

執行完login方法有一個_loginCallback回撥:

var _loginCallback = function (status, msg, conn) {
    var conflict, error;
    //console.log('_loginCallback 1', Strophe.Status, status, msg)
    if (msg === 'conflict') {
        conflict = true;
    }
    console.log(status)
    if (status == Strophe.Status.CONNFAIL) {
     
    } else if (status == Strophe.Status.ATTACHED || status == Strophe.Status.CONNECTED) {
      //登入成功
       
    } else if (status == Strophe.Status.DISCONNECTING) {
  
    } else if (status == Strophe.Status.DISCONNECTED) {
      
    } else if (status == Strophe.Status.AUTHFAIL) {
     
    } else if (status == Strophe.Status.ERROR) {

    }
    conn.context.status_now = status;
};

通過斷點發現當執行到 else if (status == Strophe.Status.ATTACHED || status == Strophe.Status.CONNECTED)時,登入成功.所以需要把加入聊天室的回撥需要放在這個判斷裡面,我的具體做法如下:

//專案中封裝一個加入聊天室函數
 joinRoom: function () {
    var option1 = {};
    var option2 = {};
    //加入聊天室
    WebIM.conn.joinChatRoom(option1);
    WebIM.conn.joinChatRoom(option2);
  };
   //在環信登入函數中新增一個自己的回撥:
    var options = {
      apiUrl: WebIM.config.apiURL,
      user: userId + '',
      pwd: userId + '',
      grant_type: "password",
      appKey: WebIM.config.appkey,
      //自己新增的回撥函數
      callBack:function(){
      //呼叫加入聊天室
        that.joinRoom();
      }
    };
    WebIM.conn.open(options);

修改環信connection.js程式碼:

//登入程式碼
connection.prototype.open = function (options) {

        var suc = function (data, xhr, myName) {
            //callBack傳入加入聊天室回撥
            _login(data.data, conn, options.callBack);
        };
        var options = {
            url: apiUrl + '/' + orgName + '/' + appName + '/token',
            data: loginfo,
             success: suc || _utils.emptyfn,
             //新增加入聊天室的回撥函數
             callBack: options.callBack,
            error: error || _utils.emptyfn
        };
    }
};
//_login程式碼
var _login = function (options, conn, callBack) {
     
    var callback = function (status, msg) {
    //把加入聊天室函數傳給_login回撥函數
      _loginCallback(status, msg, conn, callBack);
    };
};
//_loginCallback程式碼
var _loginCallback = function (status, msg, conn,callBack) {
    var conflict, error;
    //console.log('_loginCallback 1', Strophe.Status, status, msg)
    if (msg === 'conflict') {
        conflict = true;
    }
    console.log(status)
    if (status == Strophe.Status.CONNFAIL) {
     
    } else if (status == Strophe.Status.ATTACHED || status == Strophe.Status.CONNECTED) {
      //登入成功執行加入聊天室
       callBack();
    } else if (status == Strophe.Status.DISCONNECTING) {
  
    } else if (status == Strophe.Status.DISCONNECTED) {
      
    } else if (status == Strophe.Status.AUTHFAIL) {
     
    } else if (status == Strophe.Status.ERROR) {

    }
    conn.context.status_now = status;
};

具體思路就是這樣,由於環信小程式程式碼有很多坑,所以遇到問題多看看原始碼,有些功能就需要自己去修改程式碼,這是環信工單回答我的問題:

fe3f1dba25db2e2be4ac1040dacd9d9.png

相關學習推薦:

以上就是小程式整合環信IM怎麼用?(附程式碼範例)的詳細內容,更多請關注TW511.COM其它相關文章!