Add multiple instances example

This example shows how to create multiple application instances from a single wasm module.

Add multiple instances example
This example shows how to create multiple application instances from a single wasm module.
15d1fa90 · Morten Sorvig · 02d75c35 · 15d1fa90
Commit 15d1fa90 authored Nov 18, 2022 by Morten Sorvig
--- a/examples/multiple_instances/index.html
+++ b/examples/multiple_instances/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Qt Multiple Instances</title>
+    <script src="../testapp/testapp.js"></script>
+
+    <script>
+        // This example shows how to create two wasm instance from
+        // a shared wasm module. The module is downloaded and compiled
+        // once.
+
+        // This requires configuring Emscripten to use a custom instantiate
+        // function. This function then calls WebAssembly.instantiate() on
+        // the shared module object.
+
+        // Fetch and compile wasm module (once).
+        let module = WebAssembly.compileStreaming(fetch("../testapp/testapp.wasm"));
+
+        async function instantiateWasm(imports, successCallback) {
+            try {
+                let output = await WebAssembly.instantiate(await module, imports);
+                successCallback(output);
+            } catch (e) {
+                console.error(e);
+            }
+            return {};
+        }
+
+        async function instantiateApp(targetElement) {
+            let container = document.getElementById(targetElement);
+            let instance = await createQtAppInstance({
+                "qtContainerElements": [container],
+                "instantiateWasm": instantiateWasm,
+            });
+            container.style.visibility = "visible";
+        }
+
+        // Create instances at window load
+        window.addEventListener('load', () => {
+            instantiateApp("appcontainer1");
+            instantiateApp("appcontainer2");
+        })
+    </script>
+  </head>
+  <body>
+    <h1>Qt for WebAssembly: Multiple Instances</h1>
+
+    <p>This example shows how to create multiple application instances from
+       a single WebAssembly module. The WebAssembly binary is downloaded once,
+       and compiled to a module once.</p>
+
+    <p>The application windows will appear below, when loaded.</p>
+
+    <div id="appcontainer1" style="width:320px; height:200px; visibility:hidden"></div>
+    <p>Window below not showing? Upgrade to Qt >= 6.5.</p >
+    <div id="appcontainer2" style="width:320px; height:200px; visibility:hidden"></div>
+  </body>
+</html>
\ No newline at end of file