HBuilder(H5+App)中集成騰訊雲通訊IM功能

產品經理的需求是,App端須要集成騰訊雲IM來接收消息。在技術層面有兩個實現方案:javascript

  1. 若是App端只須要收發IM消息,不涉及遠程推送功能,則能夠使用騰訊雲IM的WebSDK來實現。
  2. 但若是App端除了接收IM消息以外,還須要接收騰訊雲的遠程推送消息,因爲HBuilder默認只集成了個推和小米推送,並未集成騰訊雲的推送功能,此時只能本身去集成iOS/Android的SDK來實現。WebSDK沒法實現遠程推送。

配置騰訊雲通訊IM後臺

首先須要登陸騰訊雲通訊後臺並進行配置,生成AppID和AccountType。html

H5+集成騰訊雲IM的WebSDK

注意:WebSDK沒法獲取遠程推送,只能收發消息。
下載WebSDK,解壓並將js文件放入項目工程中。
在這裏插入圖片描述
App端要想實現雲通訊,首先須要先登陸騰訊雲。將webim.js引入到html頁面,並調用webim.login()函數。java

<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消息的函數。web

//監聽新消息事件
    //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

待整理數組

相關文章
相關標籤/搜索