项目:直播课Web
负责人:
里程碑: 直播课Web-3.3.0
是否置顶: 重要
标签: enhancement
Evo 2020-04-23 08:55

问题

     目前教室直播大的流程虽然是通的(可以直播),但稳定性可维护性都不太好,经常出问题,具体为:

  1. 遗留Bug多:以前逻辑的不严谨,造成有些边界条件下直播逻辑出问题;
  2. 维护成本高:直播逻辑不清晰、State控制不规范造成后期维护人员在新增和修复功能的时候很容易引发其他问题;

     所以,基于增强产品稳定性、后期异维护的诉求,需要对直播相关的逻辑进行优化

 

方案

  1. 整个直播流程的梳理,基于Adam先前提供的直播前端架构流程分析进行细化,期望达到
    1. 明确前端各个功能与AgoraSDK的对应关系:具体到对应的Agora方法的依赖(前提条件,如是否joinChannel等)、副作用(引发什么效果,如方法执行完是否可进行stream处理)、在整个直播流中的作用及位置、资费(channel)、浏览器兼容性等其他明细;
  2.   基于 1 ,梳理AgoraClient类,评估是否需要重构AgoraClient,期望AgoraClient达到的目标
    1. 方法明确且易理解;
    2. 单一、尽量无副作用:目前部分方法的部分功能重复且不清晰,没有明细注释无法100%掌握方法中的内部逻辑,修改时会束手束脚;
    3. 易用:
      1. 提供给外界(model层)明确易理解的方法说明,用TS进行类和方法说明
      2. 各个时期的Hooks职责和逻辑要明确
      3. 尽量不暴露底层处理细节,如stream的处理
      4. 简化Log,目前Log太多,定位问题时帮助不大
    4. 同步处理Zego
  3. Model层及控制逻辑优化
    1.  目前直播交互相关的控制逻辑存在以下问题
      1. Reducer太多:并不是每个State操作都要封装Reducer, Reducer是有理解和使用成本的
      2. State不明确或不合理:典型如ClientMap,应该拆分为具体的Client,减少初始化、逻辑判断成本
      3. 控制逻辑混乱:这部分是目前问题最大的地方,具体为:
        1. 逻辑控制(修改State、触发Reducer等)分布在UI Component、Model层、Agora的Hooks回调中,很容易造成状态控制不同步、无法快速Debug(定位逻辑位置)、后期维护麻烦
        2. 几乎没有备注
        3. 逻辑控制的大部分代码存在冗余的现象,典型的如调用多个Action执行State更新,多个相关的Action应合并为单个Action
    2. 优化目标:
      1. 精简Reducer:相对于Reducer,直接使用'dispatch({ type: 'update', payload: {stateA: '', stateB: '', stateC: ''} })' 更容易理解和维护,因为所有的交互都是围绕State,直接操作和消费State更直观
      2. State优化原则: 尽量不嵌套(不使用对象,典型如currentUser这种);职责明确且单一,典型如clientMap应该拆分为具体的client;注释准确:具体作用、引发结果、使用位置、特别说明等
      3. 控制逻辑:
        1. Component与逻辑解耦:把UI层、Hooks中的所有控制逻辑封装为Model层的effect,前端直接调用Effect或Reducer
        2. 多个逻辑的Effect进行明细备注:作用说明、逻辑说明
        3. 规范Effect:
          • 尽量避免副作用:典型如多个Effect同时操作和消费相同的State时很容易造成State不一致,这种情况下也比较不容易Debug;
          • 明确输入:不使用payload包裹所有参数,非常不利于外界调用和Debug
          • 删除输出(Return): 严格意义上Effect是不应该有Return,即Effect应该是把结果反映到State上,由State触发Component的更新
    3. 在修改以上问题时,会同步的修改涉及到的Component
  4. 弱网的优化:可以使用海外VPN或者开发者工具网络状态模拟来测试弱网情况。保证弱网的loading和提示完整,特别是对弱网的错误提示。比如由于网络导致的加入频道失败、推流失败等。各个loading也要考虑先增加上,防止错误界面;

具体实施

  1. 原则为:逐步实施,不影响现有功能迭代及Bug修复
  2. 任务优先级确认:梳理里程碑2.19中的任务列表并确认优先级
  3. 根据任务优先级,优化任务对应模块中存在的问题(针对性更强的优化和重构)
  4. 小步快跑:不论是修改还是测试,尽量减小更新和测试的粒度

 

时间节点

 

    整体的重构里程碑-直播课Web2.19 的预估完成时间大概到五一假期结束(5.5)

  1. 4月23日 - 4月26日(本周): 完成#9189H5直播架构
  2. 4月27日 - 4月30日(红花会前): 完成2.19剩余任务 & Agora/Zego梳理
  3. 5月1日 - 5月5日(假期): 重构

评论(3)

Evo
Evo 2020-04-23 13:20

好的, 我会把这些补充进去

Adam
Adam 2020-04-23 11:06

需要注意的:

  1. 处理agora的时候,同时需要处理zego的(目前我们是接入了2家直播服务商,是可以做到实时切换的)
  2. 弱网的优化:可以使用海外VPN或者开发者工具网络状态模拟来测试弱网情况。保证弱网的loading和提示完整,特别是对弱网的错误提示。比如由于网络导致的加入频道失败、推流失败等。各个loading也要考虑先增加上,防止错误界面

 

Adam
Adam 2020-04-23 09:42

游客