webpack/examples/module-worker/example.js at main · miloscript/webpack · GitHub

History

97 lines (84 loc) · 2.25 KB

Raw

document.body.innerHTML = `

<form>

<button id="send">Send Message</button>

</form>

<p>Computing fibonacci without worker:</p>

<p>Computing fibonacci with worker:</p>

const history = document.getElementById("history");

const message = document.getElementById("message");

const send = document.getElementById("send");

const fib1 = document.getElementById("fib1");

const output1 = document.getElementById("output1");

const fib2 = document.getElementById("fib2");

const output2 = document.getElementById("output2");

/// CHAT with shared worker ///

const chatWorker = new SharedWorker(

new URL("./chat-worker.js", import.meta.url),

{

name: "chat",

type: "module"

}

);

let historyTimeout;

const scheduleUpdateHistory = () => {

clearTimeout(historyTimeout);

historyTimeout = setTimeout(() => {

chatWorker.port.postMessage({ type: "history" });

}, 1000);

};

scheduleUpdateHistory();

const from = `User ${Math.floor(Math.random() * 10000)}`;

send.addEventListener("click", e => {

chatWorker.port.postMessage({

type: "message",

content: message.value,

from

});

message.value = "";

message.focus();

e.preventDefault();

});

chatWorker.port.onmessage = event => {

const msg = event.data;

switch (msg.type) {

case "history":

history.innerText = msg.history.join("\n");

scheduleUpdateHistory();

break;

}

};

/// FIBONACCI without worker ///

fib1.addEventListener("change", async () => {

try {

const value = parseInt(fib1.value, 10);

const { fibonacci } = await import("./fibonacci");

const result = fibonacci(value);

output1.innerText = `fib(${value}) = ${result}`;

} catch (e) {

output1.innerText = e.message;

}

});

/// FIBONACCI with worker ///

const fibWorker = new Worker(new URL("./fib-worker.js", import.meta.url), {

name: "fibonacci",

type: "module"

/* webpackEntryOptions: { filename: "workers/[name].js" } */

});

fib2.addEventListener("change", () => {

try {

const value = parseInt(fib2.value, 10);

fibWorker.postMessage(`${value}`);

} catch (e) {

output2.innerText = e.message;

}

});

fibWorker.onmessage = event => {

output2.innerText = event.data;

};

webpack/examples/module-worker/example.js at main · miloscript/webpack · GitHub

Expand file tree

Breadcrumbs

example.js

Latest commit

History

Breadcrumbs

example.js

File metadata and controls