Web Worker API in JavaScript
Here is a simple example how a Web worker works in JavaScript:
Or here extracted:
Calling code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Worker demo</title>
</head>
<body>
<h1 id="input">Hello World!</h1>
<h1 id="result" style="color: red;"></h1>
<script>
function readInput() {
return document.getElementById("input").innerText;
}
function writeResult(text) {
return document.getElementById("result").innerText = text;
}
// initialize the worker
let worker = new Worker('uppercase-worker-function.js');
// send a message to the worker
worker.postMessage(readInput());
// receive a message from the worker
worker.onmessage = (event) => writeResult(event.data);
</script>
</body>
</html>
Called code:
onmessage = function (event) {
const text = event.data;
console.log('input: ' + text);
postMessage(text.toUpperCase());
};