Web 端使用融云 SDK 集成实现滑动加载历史消息

刚接触即时通讯的项目,在使用融云的 SDK 来完成项目需求时,磕磕碰碰,死命看文档和提工单问融云的技术人员,真是一段痛并快乐的历程,哈哈哈!今天分享一个滑动加载获取历史消息的功能

/uploads/files_user9/article/5fd9cbd3dc25e227975.png

知识点

先看获取历史消息的代码:

var conversation = im.Conversation.get({
  targetId: '接收方的 userId',
  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);
});

参数说明:

http://zimzhu.gitee.io/drink-the-sea/img/1.png

1、因为 Web 端没有本地存储,不提供本地获取方法,只能从远端获取
2、使用获取历史消息方法需要在开发者后台开启 IM 商用版 - 单群聊云存储 服务
3、每次最多只能获取 20 条历史消息
所以问题来了,获取历史消息的方法最多只能获取 20 条消息,那我想获取 20 条之前的消息,怎么办呢?
我们需要从它的参数来入手,解决思路就是改变参数 timestrap (时间戳),在每次调用 conversation.getMessages 成功获得历史消息列表 result.list 后,将 result.list 中 sentTime 值最小的赋值给 timestrap 然后滑动继续调用 conversation.getMessages 即可获取不同时间段的历史消息,也可以通过改变参数 order 来改变是获取该时间段之前的消息还是之后的消息。

是不是很简单,反正一开始我是迷糊了,所以记录一下,也分享给有需要的同学,不足的地方还请留言指正,大家共勉 ~ 加油!!!

下图是 result.list 中 message 的属性说明:

http://zimzhu.gitee.io/drink-the-sea/img/2.png



0 个评论

要回复文章请先登录注册