怎么用小程序集成环信IM,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
最近在做一款有语音直播功能的小程序,用到了环信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;
};
具体思路就是这样,由于环信小程序代码有很多坑,所以遇到问题多看看源码,有些功能就需要自己去修改代码。
关于怎么用小程序集成环信IM问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。