如何做Flutter高可用SDK

這篇文章主要介紹“如何做Flutter高可用SDK”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“如何做Flutter高可用SDK”文章能幫助大家解決問題。

事出有因 - 我們?yōu)槭裁匆鯢lutter高可用SDK

移動(dòng)端APM其實(shí)已經(jīng)是一個(gè)很成熟的命題了，在Native世界這些年的發(fā)展中，曾經(jīng)誕生過很多用于監(jiān)控線上性能數(shù)據(jù)的SDK。但是由于Flutter相對于Native做了很多革命性的改變，導(dǎo)致Native的性能監(jiān)控在Flutter頁面上基本全部失效了?；谶@個(gè)背景，我們在去年啟動(dòng)了名為Flutter高可用SDK的項(xiàng)目，目的是讓Flutter頁面像Native頁面一樣可以被度量。

有的放矢 - 我們需要一個(gè)什么樣的SDK

性能監(jiān)控既然是一個(gè)成熟的命題，那么意味著我們有著充足的資源可以借鑒。我們借鑒了包括手淘的EMAS高可用、微信的Martix、美團(tuán)的Hertz等性能監(jiān)控SDK，并結(jié)合Flutter的實(shí)際情況我們確定了兩個(gè)問題，一個(gè)是需要收集什么性能指標(biāo)，一個(gè)是SDK需要有什么特性。

性能指標(biāo)：

1. 頁面滑動(dòng)流暢度：傳統(tǒng)體現(xiàn)滑動(dòng)流暢度主要是通過Fps，但是Fps有個(gè)問題是無法區(qū)分大量的輕微卡頓和少量的嚴(yán)重卡頓，但是對于用戶來說顯然體感差異是很大的，所以我們同時(shí)引入了Fps、滑動(dòng)時(shí)長、掉幀時(shí)長來進(jìn)行衡量是否流暢。

2. 頁面加載耗時(shí)：頁面加載耗時(shí)我們選了更能反映用戶體感的可交互時(shí)長，可交互時(shí)長是指從用戶點(diǎn)擊發(fā)起路由跳轉(zhuǎn)行為開始，到頁面內(nèi)容加載到可以發(fā)生交互結(jié)束的這一段時(shí)長。

3. Exception：這個(gè)指標(biāo)應(yīng)該不需要多做解釋。

SDK特性：

1. 準(zhǔn)確性：準(zhǔn)確性是一個(gè)性能監(jiān)控SDK的基礎(chǔ)要求，誤報(bào)或者錯(cuò)報(bào)會(huì)導(dǎo)致開發(fā)者付出很多不必要的排查時(shí)間。

2. 線上監(jiān)控：線上監(jiān)控意味著收集數(shù)據(jù)時(shí)付出的代價(jià)不能太大，不能讓監(jiān)控影響到App原本的性能。

3. 易于拓展：作為一個(gè)開源項(xiàng)目，根本目標(biāo)是希望大家都能參與進(jìn)來為社區(qū)做貢獻(xiàn)，所以SDK本身要易于拓展，同時(shí)需要一系列的規(guī)范來幫助大家進(jìn)行開發(fā)。

見微知著 - 從單個(gè)指標(biāo)看SDK

首先需要實(shí)現(xiàn)一個(gè)FpsRecorder，并繼承自BaseRecorder。這個(gè)類的目的是為了獲取到業(yè)務(wù)層中頁面Pop/Push的時(shí)機(jī)以及FlutterBinding提供的頁面開始渲染，結(jié)束渲染，發(fā)生點(diǎn)擊事件的時(shí)機(jī)，并通過這些時(shí)機(jī)來計(jì)算出源數(shù)據(jù)。對于瞬時(shí)Fps來說源數(shù)據(jù)即為每幀時(shí)長。

class FpsRecorder extends BaseRecorder {
    ///...
  @override
  void onReceivedEvent(BaseEvent event) {
    if (event is RouterEvent) {
      ///...
    } else if (event is RenderEvent) {
      switch (event.eventType) {
        case RenderEventType.beginFrame:
          _frameStopwatch.reset();
                _frameStopwatch.start();
          break;
        case RenderEventType.endFrame:
          _frameStopwatch.stop();
          PerformanceDataCenter().push(FrameData(_frameStopwatch.elapsedMicroseconds));
          break;
      }
    } else if (event is UserInputEvent) {
      ///...
    }
  }

  @override
  List<Type> subscribedEventList() {
    return <Type>[RenderEvent, RouterEvent, UserInputEvent];
  }
}

我們在beginFrame時(shí)打下開始點(diǎn)，在endFrame時(shí)打下結(jié)束點(diǎn)，即可得到每幀的時(shí)長?？梢钥吹轿覀兪占搅嗣繋瑫r(shí)長后，將其封裝為了一個(gè)FrameData并push到了PerformanceDataCenter中。PerformanceDataCenter會(huì)將該數(shù)據(jù)分發(fā)給訂閱了FrameData的Processor中，所以我們需要新建一個(gè)FpsProcessor訂閱并處理這些源數(shù)據(jù)。

class FpsProcessor extends BaseProcessor {
    ///...
  @override
  void process(BaseData data) {
    if (data is FrameData) {
      ///...
      if (isFinishedWithSample(currentTime)) {
        ///當(dāng)時(shí)間間隔大于1s，則計(jì)算一次FPS
        _startSampleTime = currentTime;
        collectSample(currentTime);
      }
    }
  }

  @override
  List<Type> subscribedDataList() {
    return [FrameData];
  }
  
  void collectSample(int finishSampleTime) {
    ///...
    PerformanceDataCenter().push(FpsUploadData(avgFps: fps));
  }
  ///...
}

FpsProcessor將獲取到的每幀時(shí)長收集起來并計(jì)算1s內(nèi)的瞬時(shí)Fps值（具體的統(tǒng)計(jì)方法可以參考上文提到的前一篇文章的實(shí)現(xiàn)，這里不過多的進(jìn)行描述）。同樣的在計(jì)算完Fps值后，我們將其封裝為了一個(gè)FpsUploadData并再一次push到了PerformanceDataCenter中。PerformanceDataCenter會(huì)將FpsUploadData交給訂閱了它的Uploader進(jìn)行處理，所以我們需要新建一個(gè)MyUploader訂閱并處理這些數(shù)據(jù)。

class MyUploader extends BaseUploader {
  @override
  List<Type> subscribedDataList() {
    return <Type>[
      FpsUploadData, //TimeUploadData, ScrollUploadData, ExceptionUploadData,
    ];
  }

  @override
  void upload(BaseUploadData data) {
    if (data is FpsUploadData) {
      _sendFPS(data.pageInfoData.pageName, data.avgFps);
    }
    ///...
  }
}

Uploader可以通過subscribedDataList()選擇需要訂閱的UploadData，并通過upload()接收notify并進(jìn)行上報(bào)。理論上一個(gè)Uploader對應(yīng)一個(gè)上傳渠道，使用者可以按需實(shí)現(xiàn)如LocalLogUploader、NetworkUploader等將數(shù)據(jù)上報(bào)到不同的地方。

縱觀全局 - SDK整體結(jié)構(gòu)設(shè)計(jì)

SDK總體可以分為4層，并大量的使用了發(fā)布-訂閱模式利用2個(gè)Center進(jìn)行連接，這種模式的好處在于可以使得層與層之間做到完全的解耦，使得對于數(shù)據(jù)的處理可以更加靈活多變。

API

這一層中主要是一些對外暴露的接口。比如init()需要使用者在runApp()前進(jìn)行調(diào)用，以及業(yè)務(wù)層需要調(diào)用pushEvent()方法給SDK提供的一些時(shí)機(jī)。

Recorder

這一層的主要職責(zé)是用Evnet所提供的時(shí)機(jī)進(jìn)行相應(yīng)的源數(shù)據(jù)收集并交給訂閱了該數(shù)據(jù)的Processor進(jìn)行處理。比如FPS采集中的每幀時(shí)長即為源數(shù)據(jù)。這一層的設(shè)計(jì)主要是為了使得源數(shù)據(jù)可以被利用在不同的地方，比如每幀時(shí)長除了用于計(jì)算FPS，還可以用來計(jì)算卡頓秒數(shù)。

使用時(shí)需要繼承BaseRecoder，通過subscribedEventList()選擇訂閱的Event，在onReceivedEvent()中處理接收到的Event

abstract class BaseRecorder with TimingObserver {
  BaseRecorder() {
    PerformanceEventCenter().subscribe(this, subscribedEventList());
  }
}
mixin TimingObserver {
  void onReceivedEvent(BaseEvent event);

  List<Type> subscribedEventList();
}

Processor

這一層主要是將源數(shù)據(jù)加工為最終可以被上報(bào)的數(shù)據(jù)，并交給訂閱了該數(shù)據(jù)的Uploader進(jìn)行上報(bào)。比如FPS采集中根據(jù)收集到的每幀時(shí)長進(jìn)行計(jì)算，得到這一段時(shí)間內(nèi)的FPS值。

使用時(shí)需要繼承BaseProcessor，通過subscribedDataList()選擇訂閱的Data類型，在process()中對接收到的Data進(jìn)行處理。

abstract class BaseProcessor{
  void process(BaseData data);

  List<Type> subscribedDataList();

  BaseProcessor(){
    PerformanceDataCenter().registerProcessor(this, subscribedDataList());
  }
}

Uploader

這一層主要是由使用者自己去實(shí)現(xiàn)，因?yàn)槊恳晃皇褂谜呦Ｍ麑?shù)據(jù)上報(bào)到的地方都不一樣，所以SDK內(nèi)部會(huì)提供相應(yīng)的基類，只需要跟隨著基類的規(guī)范來寫，即可獲取到訂閱的數(shù)據(jù)。

使用時(shí)需要繼承BaseUploader，通過subscribedDataList()選擇訂閱的Data類型，在upload()中對接收到的UploadData進(jìn)行處理。

abstract class BaseUploader{

  void upload(BaseUploadData data);

  List<Type> subscribedDataList();

  BaseUploader(){
    PerformanceDataCenter().registerUploader(this, subscribedDataList());
  }
}

PerformanceDataCenter

單例，用于接收BaseData（源數(shù)據(jù)）以及UploadData（加工后的數(shù)據(jù)），并將這些時(shí)機(jī)分發(fā)給訂閱了他們的Processor和Uploader進(jìn)行處理。

在BaseProcessor和BaseUploader的構(gòu)造函數(shù)中，分別調(diào)用了PerformanceDataCenter的register方法進(jìn)行訂閱該操作會(huì)把對應(yīng)的實(shí)例存在PerformanceDataCenter的兩個(gè)Map中，這樣的數(shù)據(jù)結(jié)構(gòu)使得一個(gè)DataType可以對應(yīng)多個(gè)訂閱者。

final Map<Type, Set<BaseProcessor>> _processorMap = <Type, Set<BaseProcessor>>{};

final Map<Type, Set<BaseUploader>> _uploaderMap = <Type, Set<BaseUploader>>{};

當(dāng)調(diào)用PerformanceDataCenter.push()方法push數(shù)據(jù)時(shí)，會(huì)根據(jù)Data的類型進(jìn)行分發(fā)，交給所有訂閱了該數(shù)據(jù)類型的Proceesor/Uploader。

PerformanceEventCenter

單例，設(shè)計(jì)思路和PerformanceDataCenter類似，但這里是用于接收業(yè)務(wù)層提供的Event（相應(yīng)的時(shí)機(jī)），并將這些時(shí)機(jī)分發(fā)給訂閱了他們的Recorder進(jìn)行處理。Event的種類主要有：（其中業(yè)務(wù)狀態(tài)需要使用者提供，其它時(shí)機(jī)SDK內(nèi)部已經(jīng)完成收集）

• App狀態(tài)：App前后臺(tái)切換

• 頁面狀態(tài)：幀渲染開始、幀渲染結(jié)束

• 業(yè)務(wù)狀態(tài)：頁面發(fā)生Pop/Push、頁面發(fā)生滑動(dòng)、業(yè)務(wù)中發(fā)生Exception

見仁見智 - SDK的打開方式

如果你是SDK的使用者，那么你只需要關(guān)注API層以及Uploader層，你只需要進(jìn)行以下幾步操作：

1. 在Pubspec中引用高可用SDK；

2. 在runApp()方法被調(diào)用前，調(diào)用init()方法將SDK初始化；

3. 在你的業(yè)務(wù)代碼中，通過pushEvent()方法給SDK提供一些必要的時(shí)機(jī)，比如路由的Pop以及Push；

4. 自定義一個(gè)Uploader類，將數(shù)據(jù)以你希望的格式上報(bào)到你所使用的數(shù)據(jù)收集平臺(tái)。

如果你希望能為高可用SDK貢獻(xiàn)一份力量，那么希望你遵守以下幾點(diǎn)設(shè)計(jì)規(guī)范并向我們提出Push Request，我們會(huì)及時(shí)進(jìn)行Review并將反饋給到你。

1. 使用發(fā)布-訂閱模式，發(fā)布者先將數(shù)據(jù)交給對應(yīng)的數(shù)據(jù)中心，再由數(shù)據(jù)中心分發(fā)給相應(yīng)的訂閱者。

2. 數(shù)據(jù)流向從Recorder到Processor再到Uploader，通過數(shù)據(jù)進(jìn)行驅(qū)動(dòng)，API通過Event驅(qū)動(dòng)Recorder，Recorder通過BaseData驅(qū)動(dòng)Processor，Processor通過UploadData驅(qū)動(dòng)Uploader。

關(guān)于“如何做Flutter高可用SDK”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。