Using Isolate in web app

Target

To execute intensive computations and avoid blocking the responsiveness of your web app, use dart:isolate to achieve it.

Dynamics

Filling Station:
- Check the live demo and get code at Github
- Official API – dart:isolate

Procedures of creation of Isolate

Step 1. create a “RecievePort” for main thread

Step 2. spwan a new isolate and handover your “SendPort” to spawned isolate. So far the road to right side is carfed

Step 3. isolate thread spwaned and “SendPort” passed-in

Step 4. create a “RecievePort” for isolate thread itself

Step 5. send back “SendPort” of isolate thread to main thread via passed-in “SendPort”. Now 2-way communication is built

Landing

In lib/main_app.dart, spawn Isolate and send messages like this:

	ReceivePort main_receive; // "RecievePort" for main(/root) thread
	SendPort remote_sender; // "SendPort" of main_receive
	void initIsolate() {
	// create a "RecievePort" for current thread, which is main thread at this point
	main_receive = new ReceivePort();
	// listen to upcoming messages
	main_receive.listen((payload) {
	if (remote_sender is SendPort) {
	// according to our settings, the very 1st returned message is absolutely the "SendPort" of spawned the Isolate
	// later on, by using remote_sender.send(value), we can send messages to our isolate thread
	remote_sender = payload;
	} else {
	// otherwise, the message is the result of computed output we want
	output(payload);
	}
	});
	}
	// now, it's time to spawn an "Isolate", "workerUri" is the path to our "Isolate" program, so far this file must be put under the root hierarchy of web folder
	String workerUri = 'remote_isolate.dart';
	// use "spawnUri" method with following attributes: the "Isolate" dart to run, the args any general main method will take, and lastly get our "SendPort" out of our main "RecievePort"
	Future<Isolate> remoteIsolate = Isolate.spawnUri(
	Uri.parse(workerUri), [], main_receive.sendPort)
	// errors while spawning
	.catchError((IsolateSpawnException e){
	print("Error in spawning isolate = $e");
	});
	}

view raw using-isolate.main.partial.dart hosted with ❤ by GitHub

In web/remote_isolate.dart, initialize spawned Isolate and send back messages like this:

Tips: All Isolate programs must be put under the web folder

	SendPort main_sender; // a instance of "SendPort" of main_receive
	// Isolate is a brand new program start with main, "SendPort" of main_receive passed-in
	main(List<String> args, SendPort sender) {
	// create a "RecievePort" for isolate thread
	var remote_receive = new ReceivePort();
	// store "SendPort" of main_receive
	main_sender = sender;
	// send "SendPort" of isolate thread back to main thread
	main_sender.send(remote_receive.sendPort);
	// listen to upcoming messages
	remote_receive.listen((payload) {
	print("received $payload");
	sendOutput(fibonacci(payload));
	});
	}
	void sendOutput(int value) {
	// send messege back to main thread via "SendPort" of main_receive
	main_sender.send(value);
	}

view raw using-isolate.remote_isolate.partial.dart hosted with ❤ by GitHub