<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>I love you</title>
<style>
body { background-color: lightpink; }
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
button { padding: 10px; margin: 5px; }
#log { border: 1px solid #ccc; padding: 10px; height: 200px; overflow-y: scroll; margin-top: 20px; background: deeppink; }
</style>
</head>
<body>
<div class="container">
<h1>Web Worker Broadcast "I love you"</h1>
<p>
Click "Start Workers" to create ten web workers. Then click "Broadcast Message" to send a message to all of them at once.
</p>
<button id="start-button">Start Workers</button>
<button id="broadcast-button" disabled>Broadcast Message</button>
<button id="stop-button" disabled>Stop Workers</button>
<h2>Message Log</h2>
<div id="log"></div>
</div>
<script src="broadcast.js"></script>
</body>
</html>
// I love you - broadcast.js
document.addEventListener('DOMContentLoaded', () => {
const startButton = document.getElementById('start-button');
const broadcastButton = document.getElementById('broadcast-button');
const stopButton = document.getElementById('stop-button');
const log = document.getElementById('log');
let workers = [];
const NUM_WORKERS = 10;
const channel = new BroadcastChannel('love-channel');
function logMessage(text, color = 'black') {
const p = document.createElement('p');
p.textContent = `[${new Date().toLocaleTimeString()}] ${text}`;
p.style.color = color;
log.appendChild(p);
log.scrollTop = log.scrollHeight;
}
// Set up the main page to listen for replies from the workers.
channel.onmessage = (event) => {
logMessage(`Main thread received from a worker: "${event.data}"`, 'green');
};
startButton.addEventListener('click', () => {
if (workers.length === 0) {
for (let i = 0; i < NUM_WORKERS; i++) {
const worker = new Worker('worker.js');
workers.push(worker);
logMessage(`Created Worker ${i + 1}`, 'blue');
}
logMessage(`Total of ${NUM_WORKERS} workers created.`, 'blue');
startButton.disabled = true;
broadcastButton.disabled = false;
stopButton.disabled = false;
}
});
broadcastButton.addEventListener('click', () => {
logMessage('Broadcasting "I love you" to all workers...', 'red');
// The main page broadcasts a message to all listeners on the channel.
channel.postMessage('I love you');
});
stopButton.addEventListener('click', () => {
if (workers.length > 0) {
workers.forEach((worker, index) => {
worker.terminate();
logMessage(`Terminated Worker ${index + 1}`, 'gray');
});
workers = [];
channel.close(); // Important: close the channel when done.
logMessage('All workers terminated and channel closed.', 'gray');
startButton.disabled = false;
broadcastButton.disabled = true;
stopButton.disabled = true;
}
});
});
// I love you - worker.js
const channel = new BroadcastChannel('love-channel');
channel.onmessage = (event) => {
// A worker receives the message from the channel.
const message = event.data;
console.log(`Worker received: "${message}"`);
// The worker can also send a reply back to the channel.
channel.postMessage(`"${message}" too!`);
};