前言

最近公司需要用微信小程序做一个能够让用户沟通的功能,经过前期筛选和对比,最后还是选择了使用融云的即时通讯,下面是我用小程序首次集成融云的 SDK 碰到的问题,在此做个记录方便自己查看,同时也给有需要的同学作为参考。
前端小鸟一枚,立誓要成为前端菜鸟,不足地方留言指出,小子谢过。

准备工作

1.官网注册(https://www.rongcloud.cn/)

  • 进入开发者后台 - 创建应用 - 获取 appkey (很重要!很重要!很重要!)

  • 获取用户 token ,一开始我很费解为什么要获取 token ?token 是什么?怎么获取 token?(暴击三连问 o(╥﹏╥)o)简单来说就是用户的身份标识。
    这里就不一一解答了,直接看 官网地址 - token 就行了,里面说的很清楚。

  • 对于在前端开发阶段,还没有和后端对接时,推荐使用融云开发者后台中的 API 调用(在调试方面,真的太好用了)传入正确的参数即可

  1. 下载 SDK

注意:小程序 SDK 需要开通小程序服务后,在开发者后台中获取
但是在文档中又看到说 3.x 小程序与 Web SDK 相同,那用 Web 端的 SDK 也是可以的咯,为什么还要开通服务才能获取呢,算了!能用就行

开始集成

1、首先要需在微信公众平台配置以下合法域名(配置详情请点击这里),微信小程序如何配置合法域名应该不需要说了吧

2、SDK 初始化

  • 开发者在使用融云 SDK 所有功能之前,开发者必须先调用此方法初始化 SDK。 在应用整个生命周期中,开发者只需要将 SDK 初始化一次
var im = RongIMLib.init({appkey: ' '  // 这里就是咋们在开发者后台获得到的 appkey
});

3、设置监听

  • 监听消息、状态、会话列表的变化

  • 注意:当设置多个 im.watch 的时候, 当收到一条消息后, 每个 watch 都会监听到此消息,所以会出现发一条消息,但是会重复收到这条消息

  • 解决:在全局设置监听一次即可,不要放在组件生命周期中,防止每次组件重载都设置一次

var conversationList = []; // 当前已存在的会话列表
im.watch({conversation: function(event){var updatedConversationList = event.updatedConversationList; // 更新的会话列表console.log('更新会话汇总:', updatedConversationList);console.log('最新会话列表:', im.Conversation.merge({conversationList,updatedConversationList}));},message: function(event){var message = event.message;console.log('收到新消息:', message);},status: function(event){var status = event.status;console.log('连接状态码:', status);}
});

4、连接融云

  • 连接方法在应用的整个生命周期,也只需要调用一次即可,重复连接会报错

  • 敲重点!敲重点!敲重点!除初始化、监听以外,所有方法都必须在 connect 成功之后 再调用

var user = {token: '' // 可以在开发者后台中调用 获取 token 来获得
};
// im 来自 RongIMLib.init 返回的实例,例如:var im = RongIMLib.init({ appkey: ' ' });
im.connect(user).then(function(user) {console.log('链接成功, 链接用户 id 为: ', user.id);
}).catch(function(error) {console.log('链接失败: ', error.code, error.msg);
});

连接成功之后就可以发送消息,获取会话列表和历史消息方法等等

需要注意的是:获取会话列表和历史消息需要开通 IM 商用版 - 单群聊云存储 功能。

直接贴代码了:

//获取会话列表
im.Conversation.getList().then(function(conversationList) {console.log('获取会话列表成功', conversationList);
});
//发送消息:单聊文本消息
var conversation = im.Conversation.get({targetId: 'user1',type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
conversation.send({messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'content: {content: 'Hello RongCloud' // 文本内容}
}).then(function(message){console.log('发送文字消息成功', message);
});
//获取历史消息
var conversation = im.Conversation.get({targetId: 'user1',type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
var option = {timestrap: +new Date(),count: 20
};
conversation.getMessages(option).then(function(result){var list = result.list; // 历史消息列表var hasMore = result.hasMore; // 是否还有历史消息可以获取console.log('获取历史消息成功', list, hasMore);
});

最后退出,断开连接

im.disconnect().then(function() {console.log('断开链接成功');
});

集成融云 SDK 整个流程还是蛮简单、清晰的,想继续了解细节可以去看看融云的开发文档,地址:https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html?match=imlib-mini


微信小程序集成融云 SDK (即时通讯) 集成必备条件相关推荐

  1. iOS---集成融云SDK即时通讯

    链接:https://www.jianshu.com/p/eabfb0a93cf9 相信大家在项目中会用到即时通讯功能,自己去写的话会需要前后台合作,会大大加大开发的周期,所以考虑使用第三方的即时通讯 ...

  2. 30 分钟集成融云 IM 即时通讯

    最近公司要做一个社交 app,对于时间就是金钱的当今社会,招聘大量人才去搭建通讯系统肯定是不划算的,花费人力物力财力做出来的 app,可能还没人用.那就瞎了.所以毋庸置疑,一拍即合,用第三方的.就开始 ...

  3. 微信小程序接入腾讯IM即时通讯,实现在线聊天

    最近在帮朋友写一个二手交易平台,买卖双方在线沟通的功能(类似于某鱼) 先上传做完的效果图,后续再更新源码,目前实现了消息列表显示未读数量,显示最后一条信息内容,收到信息后刷新列表. 聊天页面 不要吐槽 ...

  4. php qcloud sdk weapp_微信小程序腾讯云php后台解决方案

    微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...

  5. 微信小程序开发13 云开发:云原生一体化应用开发平台

    你好,我是冠宇,从这个模块开始,就由我带着你一起学习. 在开篇词中,俊鹏讲到云开发诞生的背后动力是困扰前端开发者们的一个核心问题:对后端的依赖.那云开发到底怎么去优化和解决这个问题的呢? 这就是我们今 ...

  6. 快速集成融云SDK– Android Studio

    现在很多应用都加入了即时通讯功能(客服等),选择第三方的SDK比较省事快捷,这里就介绍一下集成融云SDK时遇到的一些问题. 这个是官网的集成指南:http://www.rongcloud.cn/doc ...

  7. 【中级】 微信小程序 - 腾讯云 - wafer2 - PHP - DEMO - 003 - 源码分析 - 01 - 文件组成详细分析

    1 前言: 本文原创,欢迎转载,但是,务必保持原文并且给出原文链接. 微信小程序 - 腾讯云 - PHP - DEMO 是微信提供的一个微信小程序和腾讯云小程序云服务wafer 进行接口的例子. 本仓 ...

  8. 微信小程序使用阿里云物联网API开发物联网应用

    微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...

  9. uni-app 微信小程序 + 友盟统计 sdk

    在开发小程序时,有些功能会需要统计用户点击次数.登录人数.访问时长等数据,用来分析用户的一些行为:这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程: 1. ...

  10. 融云发送图片消息_Web 端集成融云 SDK 如何发送正确图片消息给移动端展示?

    Web 端集成融云 SDK 如何发送正确图片消息给移动端展示? 前言 Web 端使用融云的即时通讯 SDK 在发送图片消息给移动端的时候,移动端一般会收到一个缩略图数据和展示高清图片地址,但是往往 W ...

最新文章

  1. C++中的虚继承与虚基类
  2. 使用resNet网络 进行图像分类(jupyter notebook)
  3. linux path减少,Linux的环境变量PATH中所带来的问题及解决方法
  4. Python time asctime()方法
  5. 局域网打印机反应慢_为什么你的Excel这么慢,这些原因必须要知道!
  6. ubuntu下u盘变成只读文件
  7. 为什么所有人都对 HTML、CSS 失望了?
  8. leetcode:Longest Common Prefix【Python版】
  9. 36D杯CTF Re WP
  10. pxe kickstart无人值守自动化装机
  11. rabbitmq 从channal获得socket
  12. MyEclipse启动加速与优化
  13. 学习数据结构的意义和作用
  14. 帝国cms tag生成html,帝国cms如何自动填写tag标签【亲测】
  15. 写故事的人,流逝的时光
  16. Exchange 2010 Ps 之使用更新脱机地址簿系列命令get-offlineaddressbookUpdate-offlineaddressbook
  17. 鸿蒙系统车联网,华为鸿蒙上车,关于车联网的想象有多少?
  18. Spring Boot实现 RabbitMQ教程【1】
  19. Unity开发备忘录000028:Bolt无代码做游戏——控制角色行走
  20. 《三国志·赵云传》隐私政策

热门文章

  1. python scipy实例_python简单实现最大似然估计scipy库的使用详解
  2. webuploader多图片上传php,PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件...
  3. DS-证据理论入门文献概论
  4. matlab 介电常数,改进的基于Matlab GUI的微波介电常数测量系统
  5. DSP技术是利用计算机或,DSP技术是什么?
  6. python获取子窗口句柄
  7. win7自带tftp服务器,如何打开tftp服务器,笔者教你Win7系统TFTP服务器怎么开启
  8. jquery手机端带农历的万年历插件
  9. 使用VC2005编译静态应用程序的方法
  10. Alexa工具条嵌入浏览器技术解析