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檔案放入項目工程中。

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

待整理