您的位置 首页 技术

小程序集成环信IM怎么用?(附代码实例)

小程序集成环信IM 最近在做一款有语音直播功能的小程序,用到了环信IM集成功能,由于我搜了下目前用环信做小程序的的确是少之又少,而且环信官方说从2月份不再更新代码(具体原因我也没问…

最近在做一款有语音直播功能的小程序,用到了环信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怎么用?(附代码实例)的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/96133.html

为您推荐

返回顶部