gustavohenrique/sharedworker.md

## sharedworker.md

      
    Raw
  

              sharedworker.md
            
          
    SharedWorker

Remember:

Worker does not have DOM access
console.log does not work
The state is shared between tabs

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Shared Worker</title>
  </head>
  <body>
    <input type="text" id="txt" />
    <div><button id="btn">Send</button></div>
    <script src="index.js"></script>
  </body>
</html>
index.js

if (!window.SharedWorker) {
    console.error('SharedWorker is not supported.');
}

const worker = new SharedWorker('worker.js');
worker.port.onmessage = function({ data }) {
    console.log('Received message:', data);
};
worker.port.start();

function sendMessageToWorker(message) {
    worker.port.postMessage({
        value: `ping ${message}`
    });
};

function send() {
    const message = document.querySelector('#txt').value;
    sendMessageToWorker(message);
}

document.addEventListener('DOMContentLoaded', () => {
    const btn = document.querySelector('#btn');
    btn.addEventListener('click', send);
});
workers.js

self.addEventListener('connect', function(e) {
    const port = e.ports[0];
    port.postMessage('Hey, we are connected!');
    port.addEventListener('message', ({ data }) => {
        port.postMessage(`pong ${data.value}`);
    });
    port.start();
});