이 문서에서 wevdev용 스레드 프로그래밍과 웹용 flutter에 대해 설명했습니다.

스레드 프로그래밍을 구현하기 위해 Flutter에서 격리를 사용할 수 있습니다.
그러나 웹용 Flutter는 현재 격리를 지원하지 않습니다.

이 문서에서는 격리 대신 작업자를 사용합니다.

Dart의 비동기 프로그래밍

다트:분리

dart:isolate를 사용할 수 있습니다.

import 'dart:isolate' as iso;

Future main() async {
  iso.ReceivePort receivePort = iso.ReceivePort();
  iso.Isolate.spawn(workerMain, receivePort.sendPort);

  receivePort.listen((message) {
    print("host: ${message}");
  });
}

workerMain(sendPort) async { 
    for(var message in ["01","02","03"]) {
        (sendPort as iso.SendPort).send(message);
        await Future.delayed(Duration(seconds: 1));
    }
}

웹용 작업자

dart1은 dart:isoate를 지원하지만 darr2는 현재 웹용 isoate를 지원하지 않습니다.
dart1은 작업자를 사용하여 격리를 구현했습니다.
Dart1 시리즈 dart:isolate에 이어 Worker를 사용해보자.

부모.다트

import 'dart:html' as html;

main() async {
  if(html.Worker.supported) {
      var myWorker = new html.Worker("ww.dart.js");
      myWorker.onMessage.listen((event) {
        print("main:receive: ${event.data}");
      });
      myWorker.postMessage("Hello!!");
  } else {
    print('Your browser doesn\'t support web workers.');
  }
}

아이.다트

import 'dart:async';
import 'dart:html' as html;

import 'dart:js' as js;
import 'package:js/js.dart' as pjs;
import 'package:js/js_util.dart' as js_util;

@pjs.JS('self')
external dynamic get globalScopeSelf;


Stream<T> callbackToStream<J, T>(String name, T Function(J jsValue) unwrapValue) {
  var controller = StreamController<T>.broadcast(sync: true);
  js_util.setProperty(js.context['self'], name, js.allowInterop((J event) {
    controller.add(unwrapValue(event));
  }));
  return controller.stream;
}

void jsSendMessage( dynamic object, dynamic m) {
  js.context.callMethod('postMessage',[m]);
}

main() {
    callbackToStream('onmessage', (html.MessageEvent e)  {
      return js_util.getProperty(e, 'data');
    }).listen((message) {
      print('>>> ${message}');
      jsSendMessage(js.context, 'callback: ${message}');
    });
}

추신

격리 시 부모에게 자식에게 메시지를 보내는 경우

import 'dart:isolate' as iso;
Future<int> main(List<String> args, iso.SendPort sendPoet) async {
  print("Start Main");
  iso.ReceivePort receivePort = iso.ReceivePort();
  receivePort.listen((message) {
    print("main:receive: ${message}");
    if(message is iso.SendPort) {
      (message as iso.SendPort).send("Hello!! Client");
    }
  });

  await iso.Isolate.spawnUri(new Uri.file("./child.dart"), [], receivePort.sendPort);

  return 0;
}

import 'dart:isolate' as iso;

int main(List<String> args, iso.SendPort sendPort) {
  print("Hello, World!!");
  sendPort.send("Start a child");
  iso.ReceivePort receivePort = iso.ReceivePort();
  receivePort.listen((message) {
    print("child: receive message: ${message}");
    sendPort.send(message);
  });
  sendPort.send(receivePort.sendPort);

  return 0;
}

dart2native 제한

iso.Isolate.spawnUri에는 dart2native에 제한이 있습니다.

Unsupported operation: Isolate.spawnUri is not supported when using AOT compilation

웹 개발 제한

webdev serve 에서 작업자를 빌드하지 못했습니다.

수동으로 빌드해야 합니다.

dart2js web/xxx.dart -o web/xxx.dart.js

암호

https://github.com/kyorohiro/dart.tiny_worker

다음..

웹 및 dart:io용 flutter 및 flutter의 공통 인터페이스 정보