微信小程序集成腾讯云 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. 扩展GroupBox控件

    1.GroupBox的边框颜色可以自行设置: 2.GroupBox可以设置边框的为圆角: 3.设置GroupBox标题在控件中的位置. 4.设置GroupBox标题的字体和颜色. 具体实现步骤Pane ...

  2. Joda Time使用小结

    一.Joda Time基础操作 1. 构造指定时间 // 明确给出年月日时分秒,同时还可以指定毫秒 DateTime dateTime = new DateTime(2017,9,14,20,30,0 ...

  3. 自然语言处理(NLP)的一般处理流程!

    1. 什么是NLP 自然语言处理 (Natural Language Processing) 是人工智能(AI)的一个子领域.自然语言处理是研究在人与人交互中以及在人与计算机交互中的语言问题的一门学科 ...

  4. 通过livy向CDH集群的spark提交任务

    场景 产品中需要通过前端界面选择执行某种任务(spark任务),然后通过livy 的restful api 提交集群的spark任务 简单介绍下livy,翻译自官网: Livy是基于Apache许可的 ...

  5. Python之变量、常量以及注释

    Python之变量.常量以及注释 一.什么是变量 变量,是用于在内存中存放程序数据的容器,怎么理解呢? 计算机的最核心的功能j就是"计算",计算需要数据源,数据源存在在内存里,比如 ...

  6. 从无到有构建vue实战项目(七)

    十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vu ...

  7. cookies和sessionstorage和localstorage区别

    相同点:客户端都会存储 不同点 不同点 存储大小 有效时间 数据与服务器交互方式 cookies <=4K 在设置cookie过期之前一直有效(无论窗口浏览器是否关闭) 正常情况下,cookie ...

  8. thinkPHP中的文章详情页实现“上一篇下一篇”功能经验分享

    前段时间在公司中接触到了用thinkPHP搭建的项目,其中涉及到了文章详情页上一篇下一篇翻页的功能实现效果. 因为刚接触这套框架和PHP,所以整理一下实现该功能的经验方法. 如果有不到位的地方,欢迎指 ...

  9. jvm系列(五):Java GC 分析

    Java GC就是JVM记录仪,书画了JVM各个分区的表演. 什么是 Java GC Java GC(Garbage Collection,垃圾收集,垃圾回收)机制,是Java与C++/C的主要区别之 ...

  10. HDU 6299

    题意略. 思路: 我们先把所有字符串处理成 ")))((((" 这样的形式.然后我们把这些字符串排个序,按照min(l,r)来排,小的在前,在我的代码中,l为 ( 的个数,r 为 ...