天天看点

HBuilder(H5+App)中集成腾讯云通信IM功能

产品经理的需求是,App端需要集成腾讯云IM来接收消息。在技术层面有两个实现方案:

  1. 如果App端只需要收发IM消息,不涉及远程推送功能,则可以使用腾讯云IM的WebSDK来实现。
  2. 但如果App端除了接收IM消息之外,还需要接收腾讯云的远程推送消息,由于HBuilder默认只集成了个推和小米推送,并未集成腾讯云的推送功能,此时只能自己去集成iOS/Android的SDK来实现。WebSDK无法实现远程推送。

配置腾讯云通信IM后台

首先需要登录腾讯云通信后台并进行配置,生成AppID和AccountType。

H5+集成腾讯云IM的WebSDK

注意:WebSDK无法获取远程推送,只能收发消息。

下载WebSDK,解压并将js文件放入项目工程中。

HBuilder(H5+App)中集成腾讯云通信IM功能

App端要想实现云通信,首先需要先登录腾讯云。将webim.js引入到html页面,并调用webim.login()函数。

<script type="text/javascript" src="js/imsdk/webim.js"></script>
<script type="text/javascript" charset="utf-8">

webim.login({
        sdkAppID: "1234567890", //填入后台生成的AppID
        appIDAt3rd: "1234567890", //填入后台生成的AppID
        identifier: userId, //用户唯一标示
        userSig: userSig, //用户签名
        accountType: "12345" //填入后台生成的AccountType
    }, {
        "onMsgNotify": onMsgNotify //指定一个接收并处理IM消息的函数
    }, {
        isAccessFormalEnv: true,
        isLogOn: false
    },
    function (resp)
    {
        mui.toast("IM登录成功!!!" + resp);
    },
    function (err)
    {
        mui.toast("IM登录失败。" + err.ErrorInfo);
    }
);
</script>
           

webim.login()函数需要填入相关信息,以及指定用于响应IM消息的函数,以及登录成功和失败的回调函数,具体请参阅webim.login接口文档。

下一步就是创建响应IM消息的函数。

//监听新消息事件
    //newMsgList 为新消息数组,结构为[Msg]
    function onMsgNotify(newMsgList)
    {
        // console.warn(newMsgList);
        var newMsg;
        //获取所有聊天会话
        // var sessMap = webim.MsgStore.sessMap();
        for (var j in newMsgList)
        {//遍历新消息
            newMsg = newMsgList[j];
            var elems = newMsg.getElems();//获取消息包含的元素数组
            for (var i in elems)
            {
                let elem = elems[i];
                let type = elem.getType();//获取元素类型
                let content = elem.getContent();//获取元素对象
                switch (type)
                {
                    case webim.MSG_ELEMENT_TYPE.TEXT:
                        const messageText = content.getText();
                        alert("收到IM消息:" + messageText);
                        //进行处理

                        break;
//                     case webim.MSG_ELEMENT_TYPE.FACE:
//                         html += convertFaceMsgToHtml(content);
//                         break;
//                     case webim.MSG_ELEMENT_TYPE.IMAGE:
//                         html += convertImageMsgToHtml(content);
//                         break;
//                     case webim.MSG_ELEMENT_TYPE.SOUND:
//                         html += convertSoundMsgToHtml(content);
//                         break;
//                     case webim.MSG_ELEMENT_TYPE.FILE:
//                         html += convertFileMsgToHtml(content);
//                         break;
//                     case webim.MSG_ELEMENT_TYPE.LOCATION://暂不支持地理位置
//                         //html += convertLocationMsgToHtml(content);
//                         break;
//                     case webim.MSG_ELEMENT_TYPE.CUSTOM:
//                         html += convertCustomMsgToHtml(content);
//                         break;
//                     case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
//                         html += convertGroupTipMsgToHtml(content);
//                         break;
                    default:
                        webim.Log.error('未知消息元素类型: elemType=' + type);
                        break;
                }
            }
        }
    }
           

集成iOS/Android的腾讯云通信IMSDK

待整理