微信小程序集成腾讯云 IM SDK

1、背景

  因业务功能需求需要接入IM(即时聊天)功能,一开始想到的是使用 WebSocket 来实现这个功能,然天意捉弄(哈哈)服务器版本太低不支持 wx 协议(也就不支持 WebSocket了)不得不寻找第三方服务了,因客户端目前采用微信小程序来开发,那想到的肯定就是使用他们自家的IM功能了。至此就有了本篇文章了。

2、文档地址

1)腾讯云即时聊天:https://cloud.tencent.com/document/product/269

2)微信小程序Demo:https://github.com/tencentyun/TIMSDK/tree/master/WXMini(官方采用的是MPVUE 来开发)这点已提了建议(自家的小程序居然采用了别家的框架 哈哈 有点打脸的感觉,不得不说 MPVUE 我还没入门 哈哈,看来得学习下这个框架了,腾讯的工程师都使用它了,不得不说它是一个优秀的小程序框架了)

   3)IM SDK :https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/Message.html?_ga=1.163142140.1311859679.1566291063

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#,其他语言请查看官网:https://cloud.tencent.com/document/product/269/32688

      因我们服务端采用的是C#,所以这里只给出C#服务端生成UserSig的代码

      

     NuGet 命令行集成    

PM> Install-Package tls-sig-api-v2

      使用

using tencentyun;

TLSSigAPIv2 api = new TLSSigAPIv2(, "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(https://weixin.senparc.com

微信小程序集成腾讯云 IM SDK的更多相关文章

  1. 微信小程序基于腾讯云对象存储的图片上传

    在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...

  2. 微信小程序接入腾讯云IM即时通讯(会话列表)

    会话列表功能概述: 登录 :先用自己的账号登录腾讯云: 获取会话列表 :登录之后再获取会话列表: 更新未读消息数量 :获取会话列表之后更新未读消息数量 WXML代码(自己写的将就看一下) <vi ...

  3. SAP成都研究院大卫哥:SAP C4C中国本地化之微信小程序集成

    今天的文章来自Wu David,SAP成都研究院C4C开发团队的架构师,在加入团队之前曾经在SAP上海研究院工作,组内同事习惯亲切地称呼他为大卫哥. 大卫哥身高据Jerry目测有1米8以上,是成都C4 ...

  4. 微信小程序语音与讯飞语音识别接口(Java)

    项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 而微信小程序上传的文件格式是silk的,而讯飞接口能识别wav 格式的文件,所以需要将小程序上传的silk文件转成wav ...

  5. 微信小程序语音与讯飞语音识别接口(Java),Kronopath/SILKCodec,ffmpeg处理silk,pcm,wav转换

    项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 首先去讯飞开放平台中申请开通语音识别功能 在这里面下载sdk,然后解压,注意appid与sdk是关联的,appid在初始 ...

  6. 如何开发一款堪比APP的微信小程序(腾讯内部团队分享)

    一夜之间,微信小程序刷爆了行业网站和朋友圈,小程序真的能如张小龙所说让用户"即用即走"吗? 其功能能和动辄几十兆安装文件的APP相比吗? 开发小程序,是不是意味着移动应用开发的一次 ...

  7. 天河微信小程序入门:阿里云tomcat免费配置https

    天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我 ...

  8. 微信小程序 使用腾讯地图SDK详解及实现步骤

    信小程序 使用腾讯地图SDK详解及实现步骤    微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1 ...

  9. 微信小程序对接显示阿里云数据库数据

    现实需求 在项目中需求,有时候现场设备发生故障,需要远程的人员知道.除了邮件方式,以微信小程序的方式也很好.今天进行尝试,并制作了一个demo版本. 1.微信小程序申请制作前端 1.1lists文件( ...

随机推荐

  1. mysql优化---订单查询优化(2):异步分页处理

    订单分页查询: 老的代码是顺序执行查询数据和计算总记录数,但是如果条件复杂的话(比如关联子表)查询的时间要超过20s种 public static PagedList<Map<String ...

  2. jquery验证大全

    jQuery验证及限制 绑定键盘监听事件 $(document).on("keypress", ".txt-valid-len", function (e) { ...

  3. 『深度应用』NLP命名实体识别(NER)开源实战教程

    近几年来,基于神经网络的深度学习方法在计算机视觉.语音识别等领域取得了巨大成功,另外在自然语言处理领域也取得了不少进展.在NLP的关键性基础任务—命名实体识别(Named Entity Recogni ...

  4. lxml解析网页

    目录 1. 什么是lxml 2. 初次使用 3. xpath 3.2 标签定位 3.3 序列定位 3.4 轴定位 4. 实例 1. 什么是lxml lxml是干什么的?简单的说来,lxml是帮助我们解 ...

  5. wordpress搬家 更换域名

    结论:wordpress网站文件夹是和域名相关联的 wordpress,备份了数据库 然后用另一个新域名新建站,直接从wordpress官网直接下载的网站压缩包,没有用之前的网站文件夹. 然后把原来的 ...

  6. oracle 正则表达的使用

    最近遇到有个项目,需要根据文件存储的根目录地址来判断是在云端获取,还是本地获取, 先看下具体有几个不同的根目录: , , 'i') from pmc.designmaterial d 去重关键字:di ...

  7. spring-boot-plus详细配置(五)

    spring-boot-plus详细配置 公共配置 application.yml

  8. **p,*p和&p使用有感

    *p两种使用情况: 1.定义指针变量,如char *p:这里p是一个变量,单单在这一点上与int a 无差别:但p这个变量特殊在其中只能存地址. 引申:对于char **p,p中存一个地址add1,a ...

  9. JDK1.6 对 synchronized 的锁优化

    1. 背景 在 JDK 1.6 中对锁的实现引入了大量的优化. 目的 减少锁操作的开销. 2. 锁优化 在看下面的内容之间,希望大家对 Mark Word 有个大体的理解.Java 中一个对象在堆中的 ...

  10. springboot的log4j配置与logback配置

    log4j配置的依赖 <!-- 删除pom.xml文件中所有对日志jar包的引用--> <dependency> <groupId>org.springframew ...