Shared Worker 與普通的 Web Worker 類似,但不同之處在于它可以被多個瀏覽器窗口、標簽頁或者iframe共享,使得這些上下文之間能夠相互通信。下面是一個使用 Shared Worker 的完整示例。
共享Worker腳本(sharedWorker.js)
self.addEventListener('connect', function(event) {var port = event.ports[0];port.onmessage = function(e) {console.log('Received message:', e.data);if (e.data.type === 'broadcast') {port.postMessage({ type: 'broadcast', data: e.data.message, origin: e.origin });} else if (e.data.type === 'ping') {port.postMessage({ type: 'pong', data: 'Pong from Shared Worker!', origin: e.origin });}};port.start();port.postMessage({ type: 'ready', message: 'Shared Worker is ready!', origin: location.origin });
});
HTML 頁面1(page1.html)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Page 1</title>
</head>
<body><h2>Page 1</h2><button onclick="sendPing()">Ping Shared Worker</button><div id="response"></div><script>if (navigator.userAgent.indexOf("Trident") !== -1) {alert("Internet Explorer does not support Shared Workers.");} else {var worker = new SharedWorker('sharedWorker.js');worker.port.start();worker.port.onmessage = function(e) {if (e.data.type === 'ready') {document.getElementById('response').innerText = e.data.message;} else if (e.data.type === 'pong') {document.getElementById('response').innerText = 'Received: ' + e.data.data;} else if (e.data.type === 'broadcast') {document.getElementById('response').innerText += '\nBroadcast from ' + e.data.origin + ': ' + e.data.data;}};function sendPing() {worker.port.postMessage({ type: 'ping', message: 'Ping from Page 1' });}}</script>
</body>
</html>
HTML 頁面2(page2.html)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Page 2</title>
</head>
<body><h2>Page 2</h2><button onclick="broadcastMessage()">Broadcast Message</button><div id="response"></div><script>if (navigator.userAgent.indexOf("Trident") !== -1) {alert("Internet Explorer does not support Shared Workers.");} else {var worker = new SharedWorker('sharedWorker.js');worker.port.start();worker.port.onmessage = function(e) {if (e.data.type === 'ready') {document.getElementById('response').innerText = e.data.message;} else if (e.data.type === 'broadcast') {document.getElementById('response').innerText += '\nBroadcast from ' + e.data.origin + ': ' + e.data.data;}};function broadcastMessage() {var message = prompt("Enter a message to broadcast:");if (message) {worker.port.postMessage({ type: 'broadcast', message: message });}}}</script>
</body>
</html>
在這個例子中,sharedWorker.js
作為一個Shared Worker,能夠接收來自多個頁面的消息,并根據消息類型執行不同的操作。page1.html
可以向Shared Worker發送ping請求并接收pong響應,同時也能接收其他頁面通過Worker廣播的消息。page2.html
則可以輸入消息并廣播給所有連接到該Shared Worker的頁面。這樣,多個頁面可以通過Shared Worker實現數據的共享和通信。