[Edit]

JavaScript - send messages between windows with BroadcastChannel

1 contributors

2 contributions

0 discussions

8 points

Created by:

Elleanor-Williamson

380

In this article, we would like to show you how we can communicate between different browser tabs.

Messages sending beetween windows with BroadcastChannel - JavaScript — Messages sending between windows with BroadcastChannel - JavaScript

Quick solution:

xxxxxxxxxx
 
const broadcastChannel = new BroadcastChannel('my-channel-name');
​
broadcastChannel.addEventListener('message', event => {
    const message = event.data;
    ...
});
​
const broadcastMessage = (message) => {
    broadcastChannel.postMessage(message);
};

BroadcastChannel allows communication between tabs, frames, iframes and windows. The connection is made in the browser and doesn't need a backend.

The message is broadcast using the postMessage() method and the recipients are windows that listen through the addEventListener.

Note:

Open this post in two or more tabs/windows, run example and send messages.

Practical example:

xxxxxxxxxx
 
<html>
  <body>
    <div id="window-name">Window name: null</div>
    <div>
      <input id="message-text" />
      <button onclick="handleClick()">Broadcast</button>
    </div>
    <div>
      <div>Recived messages:</div>
      <textarea id="recived-messages" style="width: 260px; height: 200px"></textarea>
    </div>
    <script>
      
        const windowNameElement = document.querySelector('#window-name');
        const messageTextElement = document.querySelector('#message-text');
        const recivedMessagesElement = document.querySelector('#recived-messages');
​
        // ---------------------------------
​
        const windowName = `window-${Date.now()}${Math.random()}`; // ~~ unique window name
        const channelName = 'my-notifications'; // any name here
        
        const broadcastChannel = new BroadcastChannel(channelName);
​
        broadcastChannel.addEventListener('message', event => {
            const message = event.data;
            recivedMessagesElement.value += `${message.windowName}: ${message.windowMessage}\n`;
        });
​
        const broadcastMessage = (windowMessage) => {
            const message = {
                windowName: windowName,
                windowMessage: windowMessage
            };
            broadcastChannel.postMessage(message);
        };
​
        // ---------------------------------
      
        windowNameElement.innerText = `Window name: ${windowName}`;
​
        const handleClick = (windowMessage) => {
            broadcastMessage(messageTextElement.value);
            messageTextElement.value = '';
        };
​
    </script>
  </body>
</html>