How to use the mini program to integrate Huanxin IM? (Attached code example)

Mini Program Integration of Huanxin IM

Recently I am making a small program with live voice function, using the Huanxin IM integration function, because I searched Currently, there are indeed very few people using Huanxin to make small programs, and Huanxin officially said that they will no longer update the code from February (I didn’t ask for the specific reason, maybe WeChat itself is a chat tool, so it is not very useful)

Our product needs to use the chat room function. You can join the chat room after completing the H5 client login before:

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

The same method does not work on the mini program, and an error keeps reporting:

Cannot read property 'sendIQ' of undefined

Baidu looked at it and said that joining the chat room should be placed in the callback after successful login, so I checked its source code connection.js and found:

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);
    }

There is an internal callback for successful login, and a _login is called in the callback (data.data, conn) method:

//具体里面执行什么去源代码查看，我就不贴代码了
var _login = function (options, conn) {
    
    var callback = function (status, msg) {
      _loginCallback(status, msg, conn);
    };


};

After executing the login method, there is a _loginCallback callback:

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;
};

Discover through breakpoints when the execution reaches else if (status == Strophe.Status.ATTACHED || status == Strophe.Status.CONNECTED), the login is successful. Therefore, the callback for joining the chat room needs to be placed in this judgment. My specific method is as follows:

//项目中封装一个加入聊天室函数
 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);

Modify the Huanxin connection.js code:

//登录代码
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;
};

The specific idea is this. Since the Huanxin applet code has many pitfalls, if you encounter problems, look at the source code. For some functions, you need to modify the code yourself. This is the environmental information work order that answers my question:

Related learning recommendations: 小program development tutorial

The above is the detailed content of How to use the mini program to integrate Huanxin IM? (Attached code example). For more information, please follow other related articles on the PHP Chinese website!