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

Stella981
• 阅读 601

产品经理的需求是,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

待整理

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Peter20 Peter20
3年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这