阿里技术分享:闲鱼IM基于Flutter的移动端跨端改造实践

本文由阿里闲鱼技术团队祈晴分享,本次有修订和改动,感谢作者的技术分享。

1、内容概述

本文总结了阿里闲鱼技术团队使用Flutter在对闲鱼IM进行移动端跨端改造过程中的技术实践等,文中对比了传统Native与现在大热的Flutter跨端方案在一些主要技术实现上的差异,以及针对Flutter技术特点的具体技术实现,值得同样准备使用Flutter开发IM的技术同行们借鉴和参考。

学习交流:

- 即时通讯/推送技术开发交流5群:215477170 [推荐]

- 移动端IM开发入门文章:《新手入门一篇就够:从零开发移动端IM》

- 开源IM框架源码:https://github.com/JackJiang2011/MobileIMSDK

(本文同步发布于:http://www.52im.net/thread-3615-1-1.html)

2、闲鱼IM现状

闲鱼IM的移动端框架构建于2016至2017年间,期间经过多次迭代升级导致历史包袱累积多,后面又经历IM界面的Flutter化,从而造成了客户端架构愈加复杂。

从开发层面总结闲鱼IM移动端当前架构主要存在如下几个问题:

  • 1)研发效率较低:当前架构涉及到Android/iOS双端的逻辑代码以及Flutter的UI代码,定位问题往往只能从Flutter UI表相倒查到Native逻辑层;
  • 2)架构层次较差:架构设计上分层不清晰,业务逻辑夹杂在核心的逻辑层致使代码变更风险大;
  • 3)性能测试略差:核心数据源存储Native内存,需经Flutter Plugin将数据源序列化上抛Flutter侧,在大批量数据源情况下性能表现较差。

从产品层面总结闲鱼IM移动端当前架构的主要问题如下:

  • 1)定位问题困难:线上舆情反馈千奇百怪,测试始终无法复现相关场景,因此很多时候只能靠现象猜测本质;
  • 2)疑难杂症较多:架构的不稳定性造成出现的问题反复出现,当前疑难杂症主要包括未读红点计数、iPhone5C低端机以及多媒体发送等多个问题;
  • 3)问题差异性大:Android和iOS两端逻辑代码差异大,包括埋点逻辑都不尽相同,排查问题根源时双端都会有不同根因,解决方案也不相同。

3、业界的移动端跨端方案

为解决当前IM的技术痛点,闲鱼今年特起关于IM架构升级项目,重在解决客户端中Andriod和iOS双端一致性的痛点,初步设想方案就是实现跨端统一的Android/iOS逻辑架构。

在当前行业内跨端方案可初步归类如下图架构:

在GUI层面的跨端方案有Weex、ReactNative、H5、Uni-APP等,其内存模型大多需要通过桥接到Native模式存储。

在逻辑层面的跨端方案大致有C/C++等与虚拟机无关语言实现跨端,当然汇编语言也可行。

此外有两个独立于上述体系之外的架构就是Flutter和KMM(谷歌基于Kotlin实现类似Flutter架构),其中Flutter运行特定DartVM,将内存数据挂载其自身的isolate中。

考虑闲鱼是Flutter的前沿探索者,方案上优先使用Flutter。然而Flutter的isolate更像一个进程的概念(底层实现非使用进程模式),相比Android,同一进程场景中,Android的Dalvik虚拟机多个线程运行共享一个内存Heap,而DartVM的Isolate运行隔离各自的Heap,因而isolate之间通讯方式比较繁琐(需经过序列化反序列化过程)。

整个模型如下图所示:

若按官方混合架构实现Flutter应用,开启多个FlutterAcitivty/FlutterController,底层会生成多个Engine,对应会存在多个isolate,而isolate通讯类似于进程通讯(类似socket或AIDL),这里借鉴闲鱼FlutterBoost的设计理念,FlutterIM架构将多个页面的Engine共享,则内存模型就天然支持共享读取。

原理图如下:

4、闲鱼IM基于Flutter的架构设计

4.1 新老架构对比

如下图所示:是一个老架构方案,其核心问题主要集中于Native逻辑抽象差,其中逻辑层面还设计到多线程并发使得问题倍增,Android/iOS/Flutter交互繁杂,开发维护成本高,核心层耦合较为严重,无插拔式概念.

考虑到历史架构的问题,演进如下新架构设计:

如上图所示,架构从上至下依次为:

  • 1)业务层;
  • 2)分发层;
  • 3)逻辑层;
  • 4)数据源层。

数据源层来源于推送或网络请求,其封装于Native层,通过Flutter插件将消息协议数据上抛到Flutter侧的核心逻辑层,处理完成后变成Flutter DB的Enitity实体,实体中挂载一些消息协议实体。

核心逻辑层将繁杂数据扁平化打包挂载到分发层中的会话内存模型数据或消息内存模型数据,最后通过观察者模式的订阅分发到业务逻辑中。

Flutter IM重点集中改造逻辑层和分发层,将IM核心逻辑和业务层面数据模型进行封装隔离,核心逻辑层和数据库交互后将数据封装到分发层的moduleData中,通过订阅方式分发到业务层数据模型中。

此外在IM模型中DB也是重点依赖的,个人对DB数据库管理进行全面封装解,实现一种轻量级,性能佳的Flutter DB管理框架。

4.2 DB存储模型

Flutter IM架构的DB存储依赖数据库插件,目前主流插件是Sqflite。

其存储模型如下:

依据上图Sqflite插件的DB存储模型会有2个等待队列:

  • 一个是Flutter层同步执行队列;
  • 一个是Native层的线程执行队列。

其Android实现机制是HandlerThread,因此Query/Save读写在会同一线程队列中,导致响应速度慢,容易造成DB SQL堆积,此外缺失缓存模型。

于是个人定制如下改进方案:

Flutter侧通过表的主键设计查询时候会优先从Entity Cache层去获取,若缓存不存在,则通过Sqflite插件查询。

同时改造Sqflite插件成支持sync/Async同步异步两种方式操作,对应到Native侧也会有同步线程队列和异步线程队列,保证数据吞吐率。但是这里建议查询使用异步,存储使用同步更稳妥,主要怕出现多个相同的数据元model同一时间进入异步线程池中,存储先后顺序无法有效的保证。

4.3 ORM数据库方案

IM架构重度依赖DB数据库,而当前业界还没有一个完备的数据库ORM管理方案,参考了Android的OrmLite/GreenDao,个人自行设计一套Flutter ORM数据库管理方案。

其核心思想如下:

由于Flutter不支持反射,因此无法直接像Android的开源数据库方式操作,但可通过APT方式,将Entity和Orm Entity绑定于一身,操作OrmEntity即操作Entity,整个代码风格设计也和OrmLite极其相似。

参考代码如下:

4.4 IM内存数据模型

基于Flutter的IM移动端架构在内存数据模型主要划分为会话和消息两个颗粒度:

  • 1)会话内存数据模型交托于SessionModuleData:会话内存数据有一个根节点RootNotice,然后其挂载PSessionMessageNotice(这里PSessionMessageNotice是ORM映射的会话DB表模型)子节点集合。
  • 2)消息内存数据模型交托于MessageModuleData:消息内存数据会有一个MessageConatiner容器管理,其内部挂载此会话中的PMessage(PMessage是ORM映射的消息DB表模型)消息集合。

依据上一章节,PSessionMessageNotice设计了一个OrmEnitity Cache,考虑到IM中会话数是有限的,因此PSessionMessageNotice都是直接缓存到Cache中。

这种做法的好处是各地去拿会话数据元时候都是缓存中同一个对象,容易保证多次重复读写的数据一致性。而PSessionMessageNotice考虑到其数量可以无限多的特殊性,因此这里将其挂载到MessageContainer的内存管理中,在退出会话的时机会校验容器中PMessage集合的数量,适当缩容可以减少内存开销。

模型如下图所示:

4.5 状态管理方案

基于Flutter的IM移动端架构状态管理方案比较简单,对数据源Session/Message维度使用观察者模式的订阅分发方式实现,架构类似于EventBus模式,页面级的状态管理无论使用fish-redux、scopeModel或者provider几乎影响面不大,核心还是需保留一种插拔式抽象更重要。

架构如下图:

4.6 IM同步模型方案

当前现状的消息同步模型:

如上图所示是,模型中存在ACCS Thread/Main Thread/Region Thread等多线程并发场景,导致易出现多线程高并发的问题。

native的推送和网络请求同步的隔离方案通过Lock的锁机制,并且通过队列降频等方式处理,流程繁琐且易出错。整体通过Region Version Gap去判断是否有域空洞,进而执行域同步补充数据。

改进的同步模型如下:

如上图所示,在Flutter侧天然没多线程场景,通过一种标记位的转化同步异步实现类似Handler消息队列,架构清晰简约了很多,避免锁带来的开销以及同步问题。

5、本次改造进展以及性能对比

1)针对架构层面:

在基于Flutter的IM架构中,重点将双端逻辑差异性统一成同一份Dart代码,完全磨平Android/iOS的代码差异性带来的问题。

带来的好处很明显:

  • 1)降低开发维护、测试回归、视觉验收的一半成本,极大提高研发效率;
  • 2)架构上进行重构分层,实现一种解耦合,插拔式的IM架构;
  • 3)同时Native到Flutter侧的大量数据上抛序列化过程改造程Flutter引用传递,解决极限测试场景下的私聊卡顿问题。

2)针对线上舆情:

  • 1)补齐UT和TLog的集团日志方式做到可追踪,可排查;
  • 2)针对于很多现存的疑难杂症重点集中专项解决,比如iphone5C的架构在Flutter侧统一规划;
  • 3)未读红点计数等问题也在架构模型升级中修复;
  • 4)此外多媒体音视频发送模块进行改造升级。

3)性能数据对比:

当IM架构的逻辑层和UI层都切换成Flutter后,和原先架构模式初步对比,整体内存水位持平。

其中:

  • 1)私聊场景下小米9测试结构内存下降40M,功耗降低4mah,CPU降低1%;
  • 2)极限测试场景下新架构内存数据相比于旧架构有一个较为明显的改观(主要由于两个界面都使用Flutter场景下,页面切换的开销降低很多)。

6、未来展望

JS跨端不安全,C++跨端成本有点高,Flutter会是一个较好选择。彼时闲鱼FlutterIM架构升级根本目的从来不是因Flutter而Flutter,是由于历史包袱的繁重,代码层面的维护成本高,新业务的扩展性差,人力配比不协调以及疑难杂症的舆情持续反馈等等因素造成我们不得不去探索新方案。

经过闲鱼IM超复杂业务场景验证Flutter模式的逻辑跨端可行性,闲鱼在Flutter路上会一直保持前沿探索,最后能反馈到生态圈。

总结一句话,探索过程在于你勇于迈出第一步,后面才会不断惊喜发现。

(原文链接:点此进入,本次有修订和改动)

附录:更多文章汇总

[1] 更多阿里团队的文章分享:

《阿里钉钉技术分享:企业级IM王者——钉钉在后端架构上的过人之处》

《现代IM系统中聊天消息的同步和存储方案探讨》

《阿里技术分享:深度揭秘阿里数据库技术方案的10年变迁史》

《阿里技术分享:阿里自研金融级数据库OceanBase的艰辛成长之路》

《来自阿里OpenIM:打造安全可靠即时通讯服务的技术实践分享》

《钉钉——基于IM技术的新一代企业OA平台的技术挑战(视频+PPT) [附件下载]》

《阿里技术结晶:《阿里巴巴Java开发手册(规约)-华山版》[附件下载]》

《重磅发布:《阿里巴巴Android开发手册(规约)》[附件下载]》

《作者谈《阿里巴巴Java开发手册(规约)》背后的故事》

《《阿里巴巴Android开发手册(规约)》背后的故事》

《干了这碗鸡汤:从理发店小弟到阿里P10技术大牛》

《揭秘阿里、腾讯、华为、百度的职级和薪酬体系》

《淘宝技术分享:手淘亿级移动端接入层网关的技术演进之路》

《难得干货,揭秘支付宝的2维码扫码技术优化实践之路》

《淘宝直播技术干货:高清、低延时的实时视频直播技术解密》

《阿里技术分享:电商IM消息平台,在群聊、直播场景下的技术实践》

《阿里技术分享:闲鱼IM基于Flutter的移动端跨端改造实践》

[2] 更多IM开发综合文章:

《新手入门一篇就够:从零开发移动端IM》

《移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”》

《移动端IM开发者必读(二):史上最全移动弱网络优化方法总结》

《从客户端的角度来谈谈移动端IM的消息可靠性和送达机制》

《现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障》

《移动端IM中大规模群消息的推送如何保证效率、实时性?》

《移动端IM开发需要面对的技术问题》

《开发IM是自己设计协议用字节流好还是字符流好?》

《IM消息送达保证机制实现(一):保证在线实时消息的可靠投递》

《IM消息送达保证机制实现(二):保证离线消息的可靠投递》

《如何保证IM实时消息的“时序性”与“一致性”?》

《一个低成本确保IM消息时序的方法探讨》

《IM单聊和群聊中的在线状态同步应该用“推”还是“拉”?》

《IM群聊消息如此复杂,如何保证不丢不重?》

《谈谈移动端 IM 开发中登录请求的优化》

《移动端IM登录时拉取数据如何作到省流量?》

《浅谈移动端IM的多点登录和消息漫游原理》

《完全自已开发的IM该如何设计“失败重试”机制?》

《通俗易懂:基于集群的移动端IM接入层负载均衡方案分享》

《微信对网络影响的技术试验及分析(论文全文)》

《开源IM工程“蘑菇街TeamTalk”的现状:一场有始无终的开源秀》

《如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源》

《子弹短信光鲜的背后:网易云信首席架构师分享亿级IM平台的技术实践》

《微信技术分享:微信的海量IM聊天消息序列号生成实践(算法原理篇)》

《自已开发IM有那么难吗?手把手教你自撸一个Andriod版简易IM (有源码)》

《融云技术分享:解密融云IM产品的聊天消息ID生成策略》

《IM开发基础知识补课(六):数据库用NoSQL还是SQL?读这篇就够了!》

《适合新手:从零开发一个IM服务端(基于Netty,有完整源码)》

《拿起键盘就是干:跟我一起徒手开发一套分布式IM系统》

《适合新手:手把手教你用Go快速搭建高性能、可扩展的IM系统(有源码)》

《IM里“附近的人”功能实现原理是什么?如何高效率地实现它?》

《IM“扫一扫”功能很好做?看看微信“扫一扫识物”的完整技术实现》

《IM消息ID技术专题(一):微信的海量IM聊天消息序列号生成实践(算法原理篇)》

《IM消息ID技术专题(二):微信的海量IM聊天消息序列号生成实践(容灾方案篇)》

《IM消息ID技术专题(三):解密融云IM产品的聊天消息ID生成策略》

《IM消息ID技术专题(四):深度解密美团的分布式ID生成算法》

《IM消息ID技术专题(五):开源分布式ID生成器UidGenerator的技术实现》

《IM消息ID技术专题(六):深度解密滴滴的高性能ID生成器(Tinyid)》

《IM开发宝典:史上最全,微信各种功能参数和逻辑规则资料汇总》

《IM开发干货分享:我是如何解决大量离线消息导致客户端卡顿的》

《零基础IM开发入门(一):什么是IM系统?》

《零基础IM开发入门(二):什么是IM系统的实时性?》

《零基础IM开发入门(三):什么是IM系统的可靠性?》

《零基础IM开发入门(四):什么是IM系统的消息时序一致性?》

《IM开发干货分享:如何优雅的实现大量离线消息的可靠投递》

《IM开发干货分享:有赞移动端IM的组件化SDK架构设计实践》

《一套亿级用户的IM架构技术干货(下篇):可靠性、有序性、弱网优化等》

《IM扫码登录技术专题(一):微信的扫码登录功能技术原理调试分析》

《IM扫码登录技术专题(二):市面主流的扫码登录技术原理调试分析》

《IM扫码登录技术专题(三):通俗易懂,IM扫码登录功能详细原理一篇就够》

《理解IM消息“可靠性”和“一致性”问题,以及解决方案探讨》

《阿里技术分享:闲鱼IM基于Flutter的移动端跨端改造实践》

>> 更多同类文章 ……

本文已同步发布于“即时通讯技术圈”公众号。

▲ 本文在公众号上的链接是:点此进入。同步发布链接是:http://www.52im.net/thread-3615-1-1.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/255462.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

闲鱼如何高效承接并处理用户纠纷

背景 闲鱼是一个基于C2C场景的闲置交易平台,每个用户既是买家也是卖家,在自由享受交易乐趣的同时也容易带来一些问题,如发一些侵权违规商品而不自知,发一些带情绪化言语对他人照成了伤害等,因此这也带来了一个核心问题&#xff1…

拆解闲鱼无货源盈利模式,需要注意的细节太多?

一.为什么要做闲鱼项目? (更多精彩干货请关注共众号:萤火宠) 闲鱼目前是阿里旗下的、全国最大的二手交易平台。用户以80后、90后为主,女性多于男性,学生、宝妈及上班族居多,不仅用户数量庞大&…

chatgpt赋能python:Python中的英文单词

Python中的英文单词 Python是一种流行的编程语言,它具有人类易读性、功能强大、支持多种编程范例等特点。Python中包含着大量的英文单词,这些单词在Python编程中极为重要,因为它们直接影响代码的可读性和理解难度。本文将介绍一些最常用的Py…

如何在PPT中自动同时播放两个视频

嵌入视频 视频工具中选择自动播放 动画中第二个视频选择和上一动画同时

如何在多个视频画面的任意位置上添加上同一张图片

现在大家都会做视频,在视频画面上添加一张图片,会让作品一半是视频一半是图片,那这种效果的视频要如何快速的制作呢?下面就随小编一起用视频剪辑高手来操作试试。 准备几个相同格式的视频及尺寸相应的图片保存在同一文件夹中 在电…

视频合并技巧,如何将多个视频合并在一起

视频合并的方法有很多,可以直接使用剪辑工具合并,也可以借助一些剪辑工具。这里将视频合并的方法分享出来,有需要的可以参考试试哦。 推荐使用这个【媒体梦工厂】在浏览器中搜索即可下载安装到电脑上,每一次使用先注册再登录。 …

如何在每段视频的同一个画面中添加镜像播放效果

刷视频时,会看到视频中有这样的效果,视频画面以中间为轴线左右对称的效果,画面中间会被一条竖线分成左右或者上下对称且完全一样的画面,也叫镜像效果,那么该如何实现呢?下面一起来试试。 需要哪些工具&…

剪辑技巧,将视频放在另一个视频画面上同时播放

有时候,我们想要将视频放在同一个画面中,而且能同时播放的那种,不知道怎么操作,那么其实想要实现也不是很难,下面随小编一起来试试这个新的技巧。 需要哪些工具? 一台电脑 视频素材 怎么快速剪辑&#xff…

剪辑小技巧,把两个不同视频合成在同一屏幕播放

我们偶尔会看到一些视频,一个屏幕里同时播放着两个不同的视频,好奇这是如何做到的?于是就上网搜索到媒体梦工厂,发现画中画功能可以合成,下面来分享一下给大家。 准备工具: 小编是到电脑软件站中&#xff0…

剪辑设置两个视频合成同屏幕播放

最近很多人问如何将两个视频合成在一个画面中播放呢?其实操作很简单。这里教大家用批量剪辑的方法快速完成,一起来试试。 在电脑上安装媒体梦工厂,在多种剪辑中选择用“画中画”功能。 在此版面上,有底画素材导入和中画素材导入的…

怎么把两个视频合并成一个视频

怎么把两个视频合并成一个视频?这两年随着短视频的火热,让大家意识到了短视频营销的重要性,所以学会一些视频处理的技巧就变得非常重要,如何快速处理视频文件能帮助我们提高工作效率。合并可以说是视频处理技术中比较常见的&#…

如何将两个视频一左一右合并

如何将两个视频一左一右合并?现在因为短视频平台的流行,我国可谓是无论男女老少都爱上了短视频,有事没事更是学着编辑视频。那为了视频效果,很多时候会想要将两个视频一左一右合并,特别是那些用来作对比效果的视频&…

HTML多画面同时播放,视频两个画面同时播放,两个视频放在同一画面|视频左右或上下两个画面...

又有狸窝的好友问了:怎么样两个视频放在同一画面,什么软件可以达到这样的效果。其实平时在电影里我们也经常见到这样的视频场景,两个或者多个视频出现在同一个画面里面。经过多方查找软件,小编选择一个操作不会太难的软件哦&#…

premiere如何把多个视频放在同一个视频画面

操作视频 1.双击“项目面板”,选择相应素材,点击“确定”。​​​​​​​ 2.将两个视频素材拖动到时间轴面板。找到要导出图片的时间点。 3.选中其中一个素材,点击“效果控件”,点击“运动”设置“缩放比例”。第二个视频也是同…

如何把两个视频拼在一个画面上?这样制作“画中画”

今天早上小北收到了一个提问,是关于拼接视频的,网友表示希望可以将两个视频拼接到一起,询问小北要如何操作。其实吧,拼接视频算是视频剪辑中一个比较基础的操作了,刚巧小北今天有空,就出一份详细的操作教程…

如何快速从一个视频中分割出多个视频

在我们看视频多的时候不乏会有一些自己喜欢的视频,这些视频中有电影、综艺节目或短视频等不同类型的视频。而遇到这些喜欢的视频时我们难免会有把视频保存下来的冲动,但是视频太长而保存喜欢的只是一个片段保存完整的视频岂不是浪费了内存。在遇到喜欢的…

两数之和 python_同一屏幕播放两个视频 视频左右两个画面或视频上下两个画面如何制作...

咱们在网上经常可以看到一些视频画面是可以在同一屏幕播放两个视频,有的是视频左右两个画面或视频上下两个画面这些是如何制作的呢,其实熟悉视频编辑软件的网友应该会比较了解这些操作,好嘞,来,现在就让小编来演示一下…

php中的如何将拼接到一起,如何将两个视频拼接在一起?视频拼接方法

专注实拍 监控 风景 各类视频 申请入群加微信: neimu500 因为专注 所以专业! 我们只发优质实拍视频,群管理专业、规范,确保群的视频质量以及秩序!无水印可下载可分享. 网上很多网红都通过视频的剪切来博人眼球,一个好的…

如何将多个视频合成一个视频,轻松把多个视频拼接合成一个视频

如何将多个视频合成一个视频?对于视频的合并,其实很多软件都可以办到,尤其是视频剪辑工具,往往都有着很多的功能可以使我们剪辑出好看的视频文件。轻松把多个视频拼接合成一个视频?小编整理了三款比较常见的视频剪辑工…

如何将多个视频剪辑到一起?如何把两段视频合成一段

如何将多个视频剪辑到一起?那么如何拼接视频?接下来小编就带大家一起了解下有关视频拼接的几款工具推荐。 工具一:TS视频拼合工具 TS视频合并工具是一款轻便简单的视频合并工具,主要是用于合并TS视频文件的工具,当用…