最近,该公司的微信Mini计划需要集成腾讯IM,以实现真实的时间聊天功能。本文记录了我在整合过程中启动的坑和经验
首先:当然,请输入官方网站阅读文档地址:https://cloud.tencent.com/document/product/269/36838首先要看的是-minute -minute run。'看一下,这没有太大帮助),我知道准备工作:
继续翻开,真正满足我的需求的是文档的定期集成
根据文档的要求,您可以首先依靠它(实际上,您还可以直接在源文件中直接复制tim-wx.js并将其放入项目中)
依靠Anhao,引用,当我到达这里时,我有第一个问题。我头疼。我报告了引用依赖性后的错误。
一开始,我做了封面,然后当然在线检查了它,我得到的信息是,在打开ES6之后,没有使用异步功能。有两个直接有效的(两者都在处理小型计划项目的本地设置):
然后我能够再次充满希望(当时我很着急,是网民吗?它不是在欺骗吗?)然后我又慢慢地搜寻了道路一个问题...最后,我找到了它,在本地设置中,我的母亲使用旧古董调试基金会库= =(怪我,不应该质疑无私的代码朋友),我迅速更改为最新消息!我报告了一个错误!!!泪水,眼泪,我踩着第一个坑走过第一个坑
下一步是逐步初始化IM(只需直接选择文档)
致电,执行
看到这群大婴儿,我松了一口气,成功了,所以我将登录下一个!
在这一点上,您可以填写测试,然后用户不够。如果要计算,让我们看一下文档:https://cloud.tencent.com/document/product/269/32688他已经计算了客户端计算。
下载并查看源代码
好人,您使用VUE模板来完成。如果我不需要vue,您如何让我的本地JS领导以及如何使用它,他的母亲,这是第二个坑,开始在线搜索,最后是最后一次,最后一次,最后一次,我们下载的演示源文件发挥了重要作用
此文件路径下面有两个JS文件
在引用此genetateStuserig.js文件之前,将这两者扔进项目。他是一个好孩子,一个本地人
引用
输出
打印
听话,我终于有了它,以便第二个坑完成(在这里我想谈谈开发文件,您无法判断您是否有一个本地?
下一个登录(注意:用户ID必须是字符串类型)
ojbk!完成了。
下一步是发送和接收新闻。阅读文档后,运行并直接调整接口相对简单。官方文件仍然非常容易理解。
执行后的打印如下
然后查看我收到的一方获得的信息(这是我通过初始监视听到的事件)
当然,还有图片消息,音频消息,文件消息等,官方文档仍然清楚地编写,我没有遇到任何坑,因此我不会一个一个列出它们。在这一点上,Tencent IM的主要功能正在完全运行。这是根据我自己的项目需求继续开发的下一步。然后,我将整个Tencent IM的初始化/登录/发送消息放在JS文件中。
使用您需要通过以下方式使用的页面
-------更新切割-------------------------
继续更新。上次我写信运行各种接口和流程时,下一步是根据我的需求集成。我的项目需求是1V1实时聊天的函数。已发布区域对话框的样式代码,可以直接选择需要它的人。
html
CSS
返回JS部分,因为我以前已经将所有IM方法都放在JS文件中,因此每个页面都需要重复使用,这更方便,但是存在一个问题,没有更好的状态管理Mini程序。设备,例如Vuex Cross -page,因此您需要使用更熟悉的发布模式来完成数据的数据更新。我太懒了。
总的来说,此代码朋友的文章非常感谢,在外部Utils文件中添加了一个event.js
然后将其安装在app.js上,以方便而实用
然后在聊天对话页面上订阅相关事件(代码中的数据,请根据您的背景接口情况动态设置)
然后在tim-init.js中更新和修改这些位置
这里实现了一个简单的消息,效果如下
注意:这里提醒我们,当我们进行对象或数组分配时,我们必须复制深副本!我只是忽略了这一点,导致数据渲染遇到问题。
我的项目需求是语音聊天,所以我在这里写的是语音函数的集成,视频应该几乎相同。请参考你
仍然在第一步中阅读文档:https://cloud.tencent.com/document/product/647/32399
1.仍然需要一个需要一个潮汐云帐户,然后创建一个用途,您可以创建一个新的帐户,或者可以在集成IM真实-Time Communication时使用SDKAPPID和键
2.如果我们自己对其进行了测试,您仍然需要一个用户。如果我们运行他的演示,请直接转到其源代码,然后修改相关信息提示。
3.此步骤非常重要。确保确保您的项目小程序可以打开此内容,否则一切都是盲目的,因为他也基于基于小程序的程序
(注意:此音频和视频功能只能在真实机器上调试。开发人员的工具不支持它。必须预览它,然后真实的机器扫描代码测试)
重点!钥匙!钥匙!然后,您不会用完他的演示,然后会有这样的错误:那么您将有10,000个问号。您运行以开发辅助工具来检查:验证也成功!!!!这不是一个坑吗?这必须是SDKAPPID的问题。关键是根据他的步骤修改参数。让我告诉你多少个坑父亲!因为您需要更改SDKAPPID的地方,所以您需要更改SDKAPPID,但他没有在他的文档中写下!!!这真的是一个爸爸,而SDKAPPID传递到了组件trtccalling.js的第一个实例。
那没有问题,你可以很好地运行他的演示
亮点是,以上两个函数已成功集成,并且在测试中没有问题。它可以正常使用。因此,我需要将这两个功能集成在一起,并且会有以下问题:
首先,我们集成了即时消息IM将初始化tim实例
然后在此示例上收听各种事件(一些示例,请检查官方文件)
然后,我们以集成音频和视频trtccalling组件和初始化初始化
目前,他的组件中也已经初始化了一个示例实例。这将导致我们初始化两个不同的实例,这将导致音频和视频功能错误。。启动过程错误最终发现它是由实例化的两个tim实例引起的,重复推动流。
然后,该解决方案绝对仅是实例化的,因此要么让他使用我的初始tim实例封装的Trtccalllllingzu组件,但他在组件中制作了很多包装。很难实现它。例如。
我们可以看到,在他的trtccalling.js中聆听相关事件很容易。很简单。我们将即时消息IM的相关操作挂在了OUK上!
但是最大的问题即将到来,他内心的SDK_ready事件没有受到监控。这个地方不会给我反馈以输入回调功能并说SDK准备就绪,并且在即时消息传递中获得历史新闻列表的初始化方法必须是历史新闻列表的列表。我需要在SDK中使用它。准备状态。如果我无法监视他的SDK_ready,则无法初始化历史新闻。目前,它被困在此步骤中。
有什么更好的解决兄弟的方法吗?还是其他集成方法?欢迎大家讨论
在与官方大型家伙沟通后,有几个结果:
1:在包装包装中监视的事件中的sdk_ready在包装的包装中确实无法给出反馈,输入回调函数2:在上面的屏幕截图中,我们可以看到我们已经实例化了其组件的示例:
3:我们可以使用它的实例来监视监视操作的时间,以便我们可以单独集成与我们相同的操作,但是不必初始化,而是将此实例传递给
特定的代码和集成步骤如下:1:通过演示运行后,将源文件中的trtccalling组件复制到我们的项目组件目录注:当您在此处复制它时,请记住将trtccall.js中的sdkappid更改为trtccalling.js,然后,项目将引用需要语音调用的页面的组件xxx.jason
然后在xxx.wxml中引用组件模板
在xxx.js中
最后一个是最重要的:我们将实例传递到即时消息的初始化页面
可以看出,有几个地方与我们的集成即时消息IM不同:1。无需我们自己初始化实例2.无需实施登录和记录操作,因为语音聊天trojust直接使用它。我们唯一要做的就是监视事件,实现初始化消息的功能,发送和接收消息等。4。非常重要:我们监视事件的方式已更改。方法:您必须注意此处的修改位置,否则您将无法监视事件。最后,您可以为您提供与每个事件相对应的字符串。其他特定的UI样式和特定功能接口,让我们看一下官方文档。谢谢你!
更新 - - - - - - - - - - - - - -
以上实际上可以正常使用即时消息传递和音频对话,但是由于有几个朋友提到了在TRTC调用组件退出后重复登录的问题将发送给所有人以供参考
首先,我们初步分析了TRTCCALLING组件实现的实现是Tencent TRTCCALLING组件的所有文件。几个关键文件的作用:
A。常量。JS//定义我们需要使用的常数信息(订阅tim事件名称/trtc事件名称/默认用户配置)b。user-controller.js //用户操作(音频和视频室中的用户(音频和视频室内用户)C。tsignaling-wx.js //注意!这是基于即时消息传递的各种信号操作的最关键的包裹蒂姆。不同的音频和视频室TRTC由不同的信号操作驱动的互动操作驱动
从上面的简单分析中,我们可以绘制:
TRTCCALLING组件的实现实际上是在使用即时消息TIM来发送不同的自定义即时消息消息TimCustomElem,以模拟包装到不同的信号中,并且用户终端通过识别不同的信号/exit/CAVECT IMPITIONS来添加音频和视频室和其他操作,以实现此类组件
问题复制:我们打开官方的TRTCCALLING组件的演示,打开多个帐户调试并登录到帐户用户B和Account UserB。我们可以看到,在此界面中,我们尚未登录tim,也就是说,我们尚未使用trtccalling组件初始化。我们此时单击语音呼叫,两个用户都登录,并且首次初始化了它们。目前,可以看到语音邀请操作的第一张图片。userb收到了信号消息类型1,这是语音邀请的信号。目前,UserB的组件实例标识了信号类型1,因此组件实例具有邀请页。我们使用UserB拒绝邀请,第1位图显示了一个信号消息4,即,远程用户确定邀请邀请,此时USERA组件实例标识信号传递消息4,因此语音邀请的页面是取消。通过上述测试,我们确认我们已经确认了。到目前为止,整个过程都没有问题。
但 !!一旦我们中的一个撤回此页面,即组件实例被摧毁,然后再次进入此页面,重新启动,然后操作,就会出现问题。我们看到以下屏幕截图。这是USERRA。,返回到只选择语音呼叫或视频呼叫的页面,即TRTCCALLING组件实例的页面,然后重新输入此页面,然后启动邀请到UserB。USEB没有问题。您仍然可以接收USERRA的用户的''。操作,以便Usera侧将莫名其妙地挂断/莫名其妙的链接超时并等待错误
首先,我们需要了解信号从何处发送的位置。答案是tsignaling-wx.js。该文件也是TIM组件初始化的文件。为了修改官方文件,我们暂时放弃了这个想法,然后我们将改变思想。我们知道这样做的原因是因为TRTCCALLLING组件位于和破坏的页面,tsignaling-wx.js实例也登录(创建)并登录(创建)和记录(创建)。,然后我们不要摧毁它。初始化后,让它保持登录状态,即时页面退出将不会被破坏。在这种Way将不会产生重复的信号,导致错误
完成:
查找trtccalling组件的js file trtccalling.js
在组件升降机的生命周期函数下找到Creity
这里
我们将其修改如下
首先,我们在trtccalling.js中看到登录方法。成功恢复后有一项操作。这是为了监视组件的各种事件。由于我们已经取消了每次输入时必须登录的操作,然后我们将登录。
然后找到附加的生命周期函数以添加以下语句,以确保创建新组件时,它仍然可以与各种事件监视绑定
该实例的业务页面是AudioCall.js。首先,如果标识符trtccallinginit为True,则将在线功能中的登录操作更改为(因为一旦初始化初始化,我们的TIM就将其保存在登录状态中,并且不会登录到登录状态。
然后取消页面的登录操作。这是维护TIM登录的基础。重复重复信号测试的重复。无论我退出页面多少次,它都会再次进入操作。仅收到一条信号消息。
注意:这是我摸索的笨拙解决方案。我相信必须有一个更好的解决方案。如果您有很好的方法,请纠正我。谢谢
原始:https://juejin.cn/post/7095647000531583013