vue3 和 rxjs 实现基于生命周期的帧同步系统

原创
2020/11/05 21:35
阅读数 3.3K

 

原文链接: vue3 和 rxjs 实现基于生命周期的帧同步系统

上一篇: rxjs 放缓移动事件流

下一篇: react hook 依赖数组

事件被放缓了

 

 

基本概念:

帧同步: 客户端处理同步状态和事件, 服务端只进行转发和储存

 

 

 

理论上所有的状态都能用事件推导, 所有的事件也能用状态代替我们只是简单的做一些场景上的区分

一般我们需要做到:  newState = oldState + event, 当然最好是能够复原或撤销一些操作, 也就是 oldState = newState - event

状态: 和UI有关的, 能够被保存并恢复的数据, 比如图片的位置信息, 可以被储存, 并且在收发模型中可以被传输, 包装接受方和发送方在同一时间内看到的位置是一样的.在发送方拖拽一个图片移动时, 如果接受者下线, 然后上线, 也应该看到的是最新的状态

事件: 和行为有关的, 比如播放一个音频, 由于音频的播放是一个动作, 很难去量化, 如果需要同步音频的播放进度, 不仅十分考验网络情况,  而且实现不太简单, 至少需要保证不能出现跳跃以及同步进度时要平滑过渡, 比如一首歌, 在播放到一半的时候接收方下线, 然后上线, 此时该歌曲应该和发送方进度保持一致

 

面向逻辑编程而不是针对具体实现, 每一个通用的行为都应该进行封装, 比如json与字符串的转换, 数据的压缩, 音视频的播放, 图片的加载, 动作的执行. 有着公用的逻辑, 但是在不同平台下或不同的需求场景有略微的表现差异, 此时应该使用公用总控执行这些逻辑, 屏蔽这些不同点

比如对于组件传递的消息, 一般都是对象转json再转字符串, 如果使用具体的实现, 那么JSON.parse方法会有异常的处理, 压缩库的选取又会侵入组件, 如果使用全局方法, 那么这些差异都会被屏蔽掉, 组件不会担心parse抛出错误, 也不会了解压缩库到底使用的哪一个

 

 

 

问题:

拖拽等事件, 在发送时可以保证以16/32ms的间隔去发送, 但是由于网络问题, 同步过来的数据可能出现一段时间内比较稀少, 而一段时间内又相当密集, 在密集事件到来时, 系统和组件由于在一直响应, 导致卡死或者出现事件乱序的问题

需要有一定的机制保证状态和事件的时序, 即使中间有丢一些数据也能不影响主流程

接收方的重新连接需要能够恢复以及重置的机制, 在一些场景下还需要能够进行撤销的机制 即 oldState = newState - event

生命周期的顺序, 以及组件间的相互依赖

插件机制, 可以使用新增插件的方式拓展功能, 而不是修改原代码

 

 

 

 

rxjs实现事件流的防抖

针对不同的事件, 防抖的效果不同, 拖拽的move事件可以使用舍弃的方式, 但是标志性的按下, 抬起事件必须保留, 使用事件放缓的办法, 这样可以保证结果一致

 

rxjs实现生命周期

针对不同的时间点, 引入不同的生命周期的钩子, 组件使用回调的方式注册, 上层会在合适的时机调用这些钩子函数, 并传入相关数据

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部