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 SDKimport 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(1400000000, "5bd2850fff3ecb11d7c805251c51ee463a25727bddc2385f3fa8bfee1bb93b5e");string sig = api.GenSig("userId");//userId:应该是您的 userIdSystem.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:服务端使用的小程序包是盛派的SDK(https://weixin.senparc.com)

扫码关注!您将得到及时的文章推送信息

微信小程序集成腾讯云 IM SDK相关推荐

  1. 微信小程序集成腾讯云即时通信IM

    这里写自定义目录标题 腾讯云即时通信IM 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一个表格 设定 ...

  2. 微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天

    相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...

  3. 微信小程序利用腾讯云IM发送语音 + 图片

    微信小程序利用腾讯云IM发送语音 + 图片 能做到这里 说明你已经可以发送普通文本了 如果没有的话可以看一下我的上一篇文章 有完整的讲解 效果图 语音聊天 发送图片 传送 → 发送图片 发送语音 ** ...

  4. 微信小程序接入腾讯云IM即时通讯(获取聊天历史记录开发步骤)

    微信小程序接入腾讯云IM即时通讯(获取聊天历史记录开发步骤) 1.先看文档: 获取 C2C 历史消息 :https://cloud.tencent.com/document/product/269/1 ...

  5. 【小程序】微信小程序使用腾讯云IM(一):登录

    微信小程序使用腾讯云IM 新项目已经写了很久啦 这个项目里主要的难点其实是1v1聊天.他们对比了好几家的即时通讯,最后选择了腾讯云通信.我猜,可能是因为腾讯云上说日活低于10w可以不付费吧.省钱嘛~踩 ...

  6. 微信小程序实现腾讯云接口 图象识别

    微信小程序实现腾讯云接口 图象识别 注:操作环境:springboot+微信小程序 1.导入maven 腾讯云图象识别接口 jar包 <!-- 腾讯云文字识别接口--><depend ...

  7. 微信小程序开通腾讯云开发环境

    目录 微信小程序开通"腾讯云"开发环境 注册腾讯云账号 配置开发环境 微信小程序开通"腾讯云"开发环境 这里强调以下,标题是"腾讯云"开发环 ...

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

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

  9. 微信小程序授权腾讯云

    前言: 如果之前没有授权过腾讯云,现在在开发者工具页面已经没有腾讯云选项,只有一个腾讯位置服务. 在开发者工具里面也没有腾讯云按钮(我这是己经授权才出现的,之前并没有) 但是目前的项目并不想使用云开发 ...

最新文章

  1. 自动驾驶发展调查:产业化还需技术“破冰”
  2. python plot设置坐标轴_python matplotlib坐标轴设置的方法
  3. python requests post请求_Pythonrequest发送post请求
  4. 使用EFI引导从硬盘(U盘)安装Win7的图文教程
  5. android小程序_小程序踩坑记
  6. java信号量源代码_Java信号量Semaphore原理及代码实例
  7. 51Nod-1004 n^n的末位数字【快速模幂】
  8. zen3架构_zen3架构对比zen2架构
  9. 高德地图:No implementation found for void com.autonavi.ae.gmap.GLMapEngine.nativeIni
  10. 如何封装axios?axios 的简单封装
  11. Excel辅助“校验”
  12. 桌面CPU性能排行榜
  13. 随机密码生成。编写程序,在26个字母大小写和10个数字组成的列表中随机生成10个8位密码。
  14. Tampermonkey
  15. 小白都能做到的使用css如何让一个盒子沾满剩余的空间
  16. ctfshow—Node.js漏洞总结
  17. 安卓逆向工程--针对授权key方式的破解
  18. 中央处理器(CPU)—— 控制器的功能和基本原理(硬布线控制器(CU))
  19. 谷歌和哈佛团队用深度学习预测余震;谷歌移交 Kubernetes 管理权,并承诺资助 900 万美元...
  20. 壹 2.2 整数表示

热门文章

  1. Windows 10的下一个更新将在您观看视频时隐藏通知
  2. 如何在ABAP Netweaver和CloudFoundry里记录并查看日志 1
  3. nginx作为tcp代理 虚拟主机配置 模板
  4. Skype for TV停止支持 三星确认今年6月移除该应用
  5. cobbler工作流分析
  6. C++ const 关键字使用
  7. 使用 PHP 7 给 Web 应用加速
  8. Active Directory系列之十七:实战详解域信任关系
  9. 【Blog.Core开源】将Program升级为.NET6.0版本
  10. 使用zipKin构建NetCore分布式链路跟踪