图解Flutter建立Isolate的过程及通讯

Flutter的代码都是默认跑在root isolate上的,负责渲染，还有UI交互。 使用场景：有耗时的任务，比如读写文件、密集型计算等，需要新建一个isolate来处理，看上去类似js的Web Worker

如何创建一个isolate呢？

先看下示意图，总共需要4步来做：

1. 第一步及第二步是建立类似握手的一个过程
2. 第三步和第四步是发送数据及处理数据并返回的过程

具体示例代码

看代码前先了解几个关键类：

1. 使用SendPort是isolate之间的唯一通讯方式，可以发送任何信息。
2. ReceivePort 是一个非广播流，只能有一个监听者，监听后才可以收到message

对应的测试代码：

  loadData() async {
    // 通过spawn新建一个Isolate，绑定静态方法并传递App端port1
    print('spawn1');
    ReceivePort receivePort = ReceivePort();//App端的监听
    await Isolate.spawn(dataLoader, receivePort.sendPort`);//spawn(port1)
    print('spawn2');

    // 获取新Isolate端的port2
    SendPort sendPort = await receivePort.first;
    print('spawn3');
    //把要做的任务 使用Isolate端的port2 传递过去
    List dataList = await sendReceive(sendPort, 'https://jsonplaceholder.typicode.com/posts');//要做的具体任务，封装成Future方法
    print('spawn4');
    print('dataList $dataList');
  }

  // Isolate端的处理方法
  static dataLoader(SendPort sendPort) async {
    // 创建监听port2,并通过app端port1，回传Isolate端的port2
    ReceivePort receivePort = ReceivePort();//Isolate端的监听
    print('Loader1');
    sendPort.send(receivePort.sendPort);// port1.send(port2);
    print('Loader2');
    // 监听所有App端发来的消息，并进行处理，可以传key，参数，做区分处理等等
    await for (var msg in receivePort) {
      String requestURL = msg[0];
      SendPort callbackPort = msg[1];// port3
      print(requestURL);
      print('Loader3');

     /// 假设处理任务
      final dataList = await Future.delayed(Duration(seconds: 5), () {
        return ['sdf', 'ggg'];
      });
      print('Loader4');
      // 回调返回值给调用者
      callbackPort.send(dataList);
      print('Loader5');
    }
  }

  /// 创建自己的监听port，并且向新isolate发送消息
  ///
  /// 为什么要创建port3呢？
  ///
  /// 因为ReceivePort是Stream，只能监听一次，为了更好的隔离任务监听，所以就新建了个，
  /// 而且尽量每个任务都自己写一个监听，彼此互不影响
  Future sendReceive(SendPort sendPort, String url) {
    // 任务监听器
    ReceivePort receivePort = ReceivePort();
    print('send1');
    // 发送要做的事情
    sendPort.send([url, receivePort.sendPort]);//port2.send(tohandletask, port3);
    print('send2');
    // 接收到返回值，返回给调用者
    return receivePort.first;
  }

上面代码对应的日志如下：

flutter: spawn1
flutter: Loader1
flutter: Loader2
flutter: spawn2
flutter: spawn3
flutter: send1
flutter: send2
flutter: https://jsonplaceholder.typicode.com/posts
flutter: Loader3
flutter: Loader4
flutter: Loader5
flutter: spawn4
flutter: dataList [sdf, ggg]

如有问题欢迎指正~~