最近在做一款有語音直播功能的小程序,用到了環(huán)信IM集成功能,由于我搜了下目前用環(huán)信做小程序的的確是少之又少,而且環(huán)信官方說從2月份不再更新代碼(具體原因我也沒問,可能本身微信就是一款聊天工具所以用處不大)
我們產(chǎn)品需要用到聊天室功能,之前做H5端登錄完成之后加入聊天室即可:
WebIM.conn.open(options); WebIM.conn.joinChatRoom(option1);
同樣方法在小程序上不行,一直報(bào)錯(cuò):
Cannot read property 'sendIQ' of undefined
百度了一下,說加入聊天室要放在登錄成功后的回調(diào)里,于是查看它的源碼connection.js發(fā)現(xiàn):
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 { //登錄成功的回調(diào)函數(shù) 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 }); } //回調(diào)成功后執(zhí)行這個(gè)方法 _login(data.data, conn); }; var options = { url: apiUrl + '/' + orgName + '/' + appName + '/token', data: loginfo, success: suc || _utils.emptyfn, error: error || _utils.emptyfn }; _utils.ajax(options); }
登錄成功有一個(gè)內(nèi)部回調(diào),回調(diào)里面調(diào)用了一個(gè) _login(data.data, conn)的方法:
//具體里面執(zhí)行什么去源代碼查看,我就不貼代碼了 var _login = function (options, conn) { var callback = function (status, msg) { _loginCallback(status, msg, conn); }; };
執(zhí)行完login方法有一個(gè)_loginCallback回調(diào):
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; };
通過斷點(diǎn)發(fā)現(xiàn)當(dāng)執(zhí)行到 else if (status == Strophe.Status.ATTACHED || status == Strophe.Status.CONNECTED)時(shí),登錄成功.所以需要把加入聊天室的回調(diào)需要放在這個(gè)判斷里面,我的具體做法如下:
//項(xiàng)目中封裝一個(gè)加入聊天室函數(shù) joinRoom: function () { var option1 = {}; var option2 = {}; //加入聊天室 WebIM.conn.joinChatRoom(option1); WebIM.conn.joinChatRoom(option2); }; //在環(huán)信登錄函數(shù)中添加一個(gè)自己的回調(diào): var options = { apiUrl: WebIM.config.apiURL, user: userId + '', pwd: userId + '', grant_type: "password", appKey: WebIM.config.appkey, //自己添加的回調(diào)函數(shù) callBack:function(){ //調(diào)用加入聊天室 that.joinRoom(); } }; WebIM.conn.open(options);
修改環(huán)信connection.js代碼:
//登錄代碼 connection.prototype.open = function (options) { var suc = function (data, xhr, myName) { //callBack傳入加入聊天室回調(diào) _login(data.data, conn, options.callBack); }; var options = { url: apiUrl + '/' + orgName + '/' + appName + '/token', data: loginfo, success: suc || _utils.emptyfn, //添加加入聊天室的回調(diào)函數(shù) callBack: options.callBack, error: error || _utils.emptyfn }; } }; //_login代碼 var _login = function (options, conn, callBack) { var callback = function (status, msg) { //把加入聊天室函數(shù)傳給_login回調(diào)函數(shù) _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) { //登錄成功執(zhí)行加入聊天室 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; };
具體思路就是這樣,由于環(huán)信小程序代碼有很多坑,所以遇到問題多看看源碼,有些功能就需要自己去修改代碼,這是環(huán)信工單回答我的問題:
相關(guān)學(xué)習(xí)推薦:小程序開發(fā)教程