Merge pull request #4 from openwebf/feat/js_thread_model

andycall · web-flow · commit f589fb36c0ff · 2024-08-14T18:07:55.000+08:00
feat: update js_thread_mode readme
diff --git a/demos/js_thread_mode/README.md b/demos/js_thread_mode/README.md
@@ -1,16 +1,45 @@
-# js_thread_mode
+# JSRuntime Thread Mode
 
-js thread mode demo
+This demo illustrates the JSRuntime management in WebF with different threading modes. There are three threading models:
 
-## Getting Started
+1. Flutter UI Thread.
+2. Different dedicated Thread (Different Dedicated threads are used for different WebFPage).
+3. Same dedicated Thread (Same Dedicated threads are used for different WebFPage).
 
-This project is a starting point for a Flutter application.
+For more information about `Dedicated Thread Mode`, see the [documentation](https://openwebf.com/docs/tutorials/performance_optimization/multiple_thread_mode/#sharing-a-single-thread-across-multiple-webf-instances).
 
-A few resources to get you started if this is your first Flutter project:
+And the demo can test two ways to launch a new FlutterEngine:
 
-- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+1. Create a FlutterEngine using FlutterEngineGroup.
+2. Create a FlutterEngine directly.
 
-For help getting started with Flutter development, view the
-[online documentation](https://docs.flutter.dev/), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+
+# How to use
+
+Just run it like a normal flutter project.
+
+# How to debug
+
+1. Change the webf dependency in `pubspec.yaml` to a local path.
+2. View the creation and destruction logs of JSRuntime on different threads. (Refer to [the test code](https://github.com/openwebf/webf/commit/1b30372558b4b7d4556a0451618dbf3e2250955e))
+
+If we use the webf test code above, interact with the test page as follows: 
+ 
+1. On the home page click the button "FlutterEngineGroup (supported iOS/Android) ". 
+2. Click the button "Different dedicated thread" on the new page. 
+3. The Webf test page loads successfully Back to the home page.
+
+We can see the following Log:
+
+
+```
+[JSRuntime Lifecycle] threadId 0x16c8e3000 DartIsolateContext construction
+[JSRuntime Lifecycle] threadId 0x3090cb000 InitializeJSRuntime Begin
+[JSRuntime Lifecycle] threadId 0x3090cb000 InitializeJSRuntime Done
+[JSRuntime Lifecycle] threadId 0x3090cb000 FinalizeJSRuntime Begin
+[JSRuntime Lifecycle] threadId 0x3090cb000 FinalizeJSRuntime Done
+[JSRuntime Lifecycle] threadId 0x16c8e3000 FinalizeJSRuntime Begin
+[JSRuntime Lifecycle] threadId 0x16c8e3000 FinalizeJSRuntime Fail. runtime_ == nullptr
+```
+
+This indicates that neither the DartIsolateContext construct nor the destructor creates the JSRuntime.
diff --git a/demos/js_thread_mode/ios/Runner.xcodeproj/project.pbxproj b/demos/js_thread_mode/ios/Runner.xcodeproj/project.pbxproj
@@ -8,6 +8,7 @@
 
 /* Begin PBXBuildFile section */
 		001078082C660B33005FA74A /* WebFFlutterViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 001078072C660B33005FA74A /* WebFFlutterViewController.swift */; };
+		00B9B3542C69FB9C00CA5A49 /* WebFDoubleFlutterViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 00B9B3532C69FB9C00CA5A49 /* WebFDoubleFlutterViewController.swift */; };
 		1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; };
 		1568F40A0DDB1345025BA771 /* Pods_RunnerTests.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 872E661C9B11EA53E4D00FC2 /* Pods_RunnerTests.framework */; };
 		331C808B294A63AB00263BE5 /* RunnerTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 331C807B294A618700263BE5 /* RunnerTests.swift */; };
@@ -44,6 +45,7 @@
 
 /* Begin PBXFileReference section */
 		001078072C660B33005FA74A /* WebFFlutterViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WebFFlutterViewController.swift; sourceTree = "<group>"; };
+		00B9B3532C69FB9C00CA5A49 /* WebFDoubleFlutterViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WebFDoubleFlutterViewController.swift; sourceTree = "<group>"; };
 		036DF617EDBD2EEEC487B26C /* Pods-RunnerTests.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RunnerTests.profile.xcconfig"; path = "Target Support Files/Pods-RunnerTests/Pods-RunnerTests.profile.xcconfig"; sourceTree = "<group>"; };
 		1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = "<group>"; };
 		1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = "<group>"; };
@@ -154,6 +156,7 @@
 				74858FAE1ED2DC5600515810 /* AppDelegate.swift */,
 				74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */,
 				001078072C660B33005FA74A /* WebFFlutterViewController.swift */,
+				00B9B3532C69FB9C00CA5A49 /* WebFDoubleFlutterViewController.swift */,
 			);
 			path = Runner;
 			sourceTree = "<group>";
@@ -379,6 +382,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				00B9B3542C69FB9C00CA5A49 /* WebFDoubleFlutterViewController.swift in Sources */,
 				74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */,
 				001078082C660B33005FA74A /* WebFFlutterViewController.swift in Sources */,
 				1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */,
diff --git a/demos/js_thread_mode/ios/Runner/AppDelegate.swift b/demos/js_thread_mode/ios/Runner/AppDelegate.swift
@@ -24,6 +24,10 @@ import UIKit
                     // 执行相应操作
                     self?.createNewEngineWithoutGroup()
                     result(nil)
+                } else if call.method == "newDoubleEngine" {
+                    // 执行相应操作
+                    self?.newDoubleEngine()
+                    result(nil)
                 } else {
                     result(FlutterMethodNotImplemented)
                 }
@@ -59,8 +63,22 @@ import UIKit
         window?.rootViewController?.present(flutterVC, animated: true, completion: nil)
     }
     
+    private func newDoubleEngine() {
+        let newEngine1 = engineGroup?.makeEngine(withEntrypoint: "mainDoubleEngine", libraryURI: nil)
+        if ((newEngine1) != nil) {
+            GeneratedPluginRegistrant.register(with: newEngine1!)
+        }
+        let newEngine2 = engineGroup?.makeEngine(withEntrypoint: "mainDoubleEngine", libraryURI: nil)
+        if ((newEngine2) != nil) {
+            GeneratedPluginRegistrant.register(with: newEngine2!)
+        }
+        let flutterVC = WebFDoubleFlutterViewController(engine1: newEngine1!, engine2: newEngine2!)
+        window?.rootViewController?.present(flutterVC, animated: true, completion: nil)
+    }
+    
     private func destoryEngine(engineId: Int) {
         let flutterEngine = flutterEngines[engineId]
         flutterEngine?.destroyContext();
+        flutterEngines.removeValue(forKey: engineId)
     }
 }
diff --git a/demos/js_thread_mode/ios/Runner/WebFDoubleFlutterViewController.swift b/demos/js_thread_mode/ios/Runner/WebFDoubleFlutterViewController.swift
@@ -0,0 +1,34 @@
+import UIKit
+import Flutter
+
+class WebFDoubleFlutterViewController: UIViewController {
+    private let flutterVC1: WebFFlutterViewController
+    private let flutterVC2: WebFFlutterViewController
+
+    init(engine1: FlutterEngine, engine2: FlutterEngine) {
+        flutterVC1 = WebFFlutterViewController(engine: engine1, nibName: nil, bundle: nil)
+        flutterVC2 = WebFFlutterViewController(engine: engine2, nibName: nil, bundle: nil)
+        super.init(nibName: nil, bundle: nil)
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        addChild(flutterVC1)
+        addChild(flutterVC2)
+        let safeFrame = self.view.frame
+        let halfHeight = self.view.frame.height / 2.0
+        flutterVC1.view.frame = CGRect(
+          x: safeFrame.minX, y: safeFrame.minY, width: safeFrame.width, height: halfHeight)
+        flutterVC2.view.frame = CGRect(
+          x: safeFrame.minX, y: flutterVC1.view.frame.maxY, width: safeFrame.width, height: halfHeight)
+        self.view.addSubview(flutterVC1.view)
+        self.view.addSubview(flutterVC2.view)
+        flutterVC1.didMove(toParent: self)
+        flutterVC2.didMove(toParent: self)
+    }
+}
diff --git a/demos/js_thread_mode/lib/main.dart b/demos/js_thread_mode/lib/main.dart
@@ -9,17 +9,29 @@ import 'package:webf/devtools.dart';
 import 'package:webf/webf.dart';
 
 @pragma('vm:entry-point')
-void mainWithoutNewEngine() => runApp(MyApp(showNewEngineButton: false));
+void mainWithoutNewEngine() => runApp(MyApp(
+      showNewEngineButton: false,
+      disableDoublePage: false,
+    ));
+
+@pragma('vm:entry-point')
+void mainDoubleEngine() =>
+    runApp(MyApp(showNewEngineButton: false, disableDoublePage: true));
 
 void main() {
   runApp(MyApp(
     showNewEngineButton: true,
+    disableDoublePage: false,
   ));
 }
 
 class MyApp extends StatelessWidget {
-  MyApp({super.key, required this.showNewEngineButton});
+  MyApp(
+      {super.key,
+      required this.showNewEngineButton,
+      required this.disableDoublePage});
   bool showNewEngineButton = true;
+  bool disableDoublePage = false;
 
   // This widget is the root of your application.
   @override
@@ -29,20 +41,29 @@ class MyApp extends StatelessWidget {
       // theme: ThemeData.dark(),
       debugShowCheckedModeBanner: false,
       home: FirstPage(
-          title: 'Landing Bay', showNewEngineButton: showNewEngineButton),
+        title: 'Landing Bay',
+        showNewEngineButton: showNewEngineButton,
+        disableDoublePage: disableDoublePage,
+      ),
     );
   }
 }
 
 class FirstPage extends StatefulWidget {
   FirstPage(
-      {super.key, required this.title, required this.showNewEngineButton});
+      {super.key,
+      required this.title,
+      required this.showNewEngineButton,
+      required this.disableDoublePage});
   final String title;
-  final bool showNewEngineButton;
+  bool showNewEngineButton = true;
+  bool disableDoublePage = false;
 
   @override
   State<StatefulWidget> createState() {
-    return FirstPageState(showNewEngineButton: showNewEngineButton);
+    return FirstPageState(
+        showNewEngineButton: showNewEngineButton,
+        disableDoublePage: disableDoublePage);
   }
 }
 
@@ -53,10 +74,12 @@ enum ThreadMode {
 }
 
 class FirstPageState extends State<FirstPage> {
-  FirstPageState({required this.showNewEngineButton});
+  FirstPageState(
+      {required this.showNewEngineButton, required this.disableDoublePage});
 
   static const platform = MethodChannel('com.example.flutter/new_engine');
-  final bool showNewEngineButton;
+  bool showNewEngineButton = true;
+  bool disableDoublePage = false;
 
   DedicatedThreadGroup threadGroup = DedicatedThreadGroup();
 
@@ -113,7 +136,54 @@ class FirstPageState extends State<FirstPage> {
       ),
     ];
 
+    if (disableDoublePage == false) {
+      buttons.add(const SizedBox(height: 20));
+      buttons.add(ElevatedButton(
+        onPressed: () {
+          Navigator.push(context, MaterialPageRoute(builder: (context) {
+            return WebFDemoTwoPage(
+                controller1: webFController(ThreadMode.differentDedicated),
+                controller2: webFController(ThreadMode.differentDedicated));
+          }));
+        },
+        child: const Text('Different dedicated thread (Double page)'),
+      ));
+      buttons.add(const SizedBox(height: 20));
+      buttons.add(ElevatedButton(
+        onPressed: () {
+          Navigator.push(context, MaterialPageRoute(builder: (context) {
+            return WebFDemoTwoPage(
+                controller1: webFController(ThreadMode.sameDedicated),
+                controller2: webFController(ThreadMode.sameDedicated));
+          }));
+        },
+        child: const Text('Same dedicated thread (Double page)'),
+      ));
+      buttons.add(const SizedBox(height: 20));
+      buttons.add(ElevatedButton(
+        onPressed: () {
+          Navigator.push(context, MaterialPageRoute(builder: (context) {
+            return WebFDemoTwoPage(
+                controller1: webFController(ThreadMode.sameSingle),
+                controller2: webFController(ThreadMode.sameSingle));
+          }));
+        },
+        child: const Text('Same single thread (Double page)'),
+      ));
+    }
+
     if (showNewEngineButton) {
+      buttons.add(const SizedBox(height: 20));
+      buttons.add(ElevatedButton(
+        onPressed: () async {
+          try {
+            await platform.invokeMethod('newDoubleEngine');
+          } on PlatformException catch (e) {
+            print("Failed to create engine: '${e.message}'.");
+          }
+        },
+        child: const Text('Double Engine（supported iOS）'),
+      ));
       buttons.add(const SizedBox(height: 20));
       buttons.add(ElevatedButton(
         onPressed: () async {
@@ -181,3 +251,52 @@ class _WebFDemoState extends State<WebFDemo> {
         ));
   }
 }
+
+class WebFDemoTwoPage extends StatefulWidget {
+  final WebFController controller1;
+  final WebFController controller2;
+
+  const WebFDemoTwoPage({
+    super.key,
+    required this.controller1,
+    required this.controller2,
+  });
+
+  @override
+  _WebFDemoTwoPageState createState() => _WebFDemoTwoPageState();
+}
+
+class _WebFDemoTwoPageState extends State<WebFDemoTwoPage> {
+  @override
+  void dispose() {
+    widget.controller1.dispose();
+    widget.controller2.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('WebF Demo'),
+      ),
+      body: LayoutBuilder(
+        builder: (BuildContext context, BoxConstraints constraints) {
+          double halfHeight = constraints.maxHeight / 2;
+          return Column(
+            children: [
+              SizedBox(
+                height: halfHeight,
+                child: WebF(controller: widget.controller1),
+              ),
+              SizedBox(
+                height: halfHeight,
+                child: WebF(controller: widget.controller2),
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}
