微信小程序 集成腾讯云IM做的聊天室
初次接触集成的东西确实有点费劲,最终通过两天的摸爬滚打把腾讯云的IM集成到了我的微信小程序中了。
让大家看一下效果:
我的毕设项目中只是用了腾讯IM的单人一对一聊天,当然这个IM是支持群的,语音视频,几乎支持QQ,微信的所有功能。
腾讯云IM是免费的,但是你如果要商用,当然也是收费的(可以使用的功能更多哦),而且不仅是小程序很多端都可以使用。
不多说,开搞。
(有人会说你不会是拖吧。首先陈述一下,我只是一个使用者,感觉还不错就分享出来,大家需要做聊天室的可以试试)
第一步:打开cmd 把路径切到项目根目录(进入项目文件夹把路径拷出来,直接cd 路径)
再项目根路径下 执行npm init 和vue项目的哪个package.json初始化类似。
(如果你得项目名称是汉语的 执行下面那一步时 就需要再手动起一个名字,如果不是汉语的 就一路回车)
初始化之后,能做小程序根目录看到一个package.json 的文件,就证明初始化成功。
第二步:在根目录下接着执行(如果有cnpm的可以用 会下载的快一下)
// IM 小程序 SDK
npm install tim-wx-sdk --save
// 发送图片、文件等消息需要的 COS SDK
npm install cos-wx-sdk-v5 --save
到这里控制台可以关了。
第三步:去小程序中把使用npm模块给勾了,然后并在左上角工具栏中,点击构建npm,成功了会提示构建成功。
第四步:拷代码。项目测试代码放在了github上,需要的可以去下载。
测试项目地址:https://github.com/xinggaung1996/-IM
第五步:修改代码,运行测试项目。
首先运行项目你会进入这个导航页面
点击进入聊天室会执行下面这个函数。
你会发现此处的userSig我是请求后端生成的,这个地方,在腾讯云控制台也能手动生成(自动生成会放在最后)。
地址:https://console.cloud.tencent.com/im-detail
这里可以手动生成。
当你在云上添加IM应用的时候,他会给你生成一个上图中的SDKAppID 与**。这两个参数是关联到你的IM应用上以及生成userSig的必须品。
假设你的腾讯云IM搞好了,那就可以进入聊天室了。
此处的sdkAppID是我的,如果需要生成userSig 是需要自己的sdkAppID与**的。
这两个填好之后就差最后一步了,现在从导航到进入测试用的是test2给test1发信息。那在你发送信息之前
第一步:需要先把俩用户导入到IM里,见上图的插入用户。
第二步:只有两个用户是好友的情况下才能发送信息,见上图的添加好友,当然如果检验是否插入成功,可以用查询id哦。
目前为止,基本上你就可以完成1V1聊天的操作了。
附上一些需要的IM官方链接,需要什么直接在里面搜索就可以了。
文档的地址:https://cloud.tencent.com/document/product/269/
对于自动生成userSig这个问题找了很长时间,我用的后端生成userSig。
地址:https://cloud.tencent.com/document/product/269/32688
可以前端生成,可以后端生成。人家给了源码地址,找到相应的readme.md
就ok了 是不是很简单,当然如果这个做出来了想集成聊天室也都是ok的,因为上面的插入用户,可以指定聊天室id的,还需要在平台上以及代码上进行一些配置。