微信小程序集成腾讯云 IM SDK
微信小程序集成腾讯云 im sdk
1、背景
因业务功能需求需要接入im(即时聊天)功能,一开始想到的是使用 websocket 来实现这个功能,然天意捉弄(哈哈)服务器版本太低不支持 wx 协议(也就不支持 websocket了)不得不寻找第三方服务了,因客户端目前采用微信小程序来开发,那想到的肯定就是使用他们自家的im功能了。至此就有了本篇文章了。
2、文档地址
1)腾讯云即时聊天:
2)微信小程序demo:https://github.com/tencentyun/timsdk/tree/master/wxmini(官方采用的是mpvue 来开发)这点已提了建议(自家的小程序居然采用了别家的框架 哈哈 有点打脸的感觉,不得不说 mpvue 我还没入门 哈哈,看来得学习下这个框架了,腾讯的工程师都使用它了,不得不说它是一个优秀的小程序框架了)
3、im sdk 集成
3.1、导入 sdk
导入sdk,也就是引入他们的js 文件,下载地址:https://github.com/tencentyun/timsdk/tree/master/wxmini/sdk,或者使用npm工具导入。这里就不在啰嗦了,默认大家都会哦。
(为了大家看的清楚,将其他不用的包抹掉)
3.2、初始化
import tim from 'tim-wx-sdk'; // 发送图片、文件等消息需要的 cos sdk import cos from "cos-wx-sdk-v5";//如果聊天发送的是纯文字,这里不必要导入 let options = { sdkappid: 0 // 接入时需要将0替换为您的即时通信应用的 sdkappid }; // 创建 sdk 实例,tim.create() 方法对于同一个 sdkappid 只会返回同一份实例 let tim = tim.create(options); // sdk 实例通常用 tim 表示 // 注册 cos sdk 插件 tim.registerplugin({'cos-wx-sdk': cos});//如果聊天发送的是纯文字,这里不需要注册
设置日志级别:
tim.setloglevel(1);
3.3、登录
登录之前,需要了解 usersig以及在服务器端生成usersig,
usersing:usersig 是用户登录即时通信 im 的密码,其本质是对 userid 等信息加密后得到的密文,本文将指导您如何生成 usersig。
服务端生成 usersig:(我们的服务器采用的是c#,其他语言请查看官网:)
因我们服务端采用的是c#,所以这里只给出c#服务端生成usersig的代码
nuget 命令行集成
pm> install-package tls-sig-api-v2
使用
using tencentyun; tlssigapiv2 api = new tlssigapiv2(1400000000, "5bd2850fff3ecb11d7c805251c51ee463a25727bddc2385f3fa8bfee1bb93b5e"); string sig = api.gensig("userid");//userid:应该是您的 userid system.console.writeline(sig);
tim 登录
tim.login({ userid: userid, usersig:usersig//通过服务端获得 }).then((imresponse) => { console.log(imresponse.data); // 登录成功 app.globaldata.isimlogin = true }).catch((imerror) => { console.warn('login error:', imerror); // 登录失败的相关信息 })
3.4、消息的收发
发(以纯文字为例):
// 发送文本消息,web 端与小程序端相同 // 1. 创建消息实例,接口返回的实例可以上屏 let message = tim.createtextmessage({ to: 'user1', conversationtype: tim.types.conv_c2c payload: { text: 'hello world!' } }); // 2. 发送消息 let promise = tim.sendmessage(message); promise.then(function(imresponse) { // 发送成功 console.log(imresponse); }).catch(function(imerror) { // 发送失败 console.warn('sendmessage error:', imerror); });
收:
let onmessagereceived = function(event) { // event.data - 存储 message 对象的数组 - [message] }; tim.on(tim.event.message_received, onmessagereceived);
*注意*:
这里的 tim.on(tim.event.message_received,function(event){}) 这个接口是全局的,不管您写在那里,小程序首次启动的时候都会调用它,每当有新消息来是这个接口也会监听到。
在进入聊天界面后,调用tim.getmessagelist()接口获取历史聊天记录。
建议:在进入聊天界面后,请将本次的会话上报为已读,只有这样设置后(上面所说的 小程序首次启动是监听的 tim.on(tim.event.message_received,function(event){}) 才会不会收到已读的消息 )
已读上报:
// 将某会话下所有未读消息已读上报 tim.setmessageread({conversationid: '会话id'});
3.5、退出
tim.logout()
4、完成
说明:
1:如有疑问,可以与我取得联系
2:已官方文档为主,很有可能过些时间后文档及sdk会发生变化
3:官方文档已在上文中给出
4:文章首发于公众号
5:服务端使用的小程序包是盛派的sdk()