Angular Cross Chat Tab with the BroadcastChannel API

Introducing the BroadcastChannel API

The BroadcastChannel API allows communication of different browsing contexts (windows, tabs, iframes). It’s explicitly designed to broadcast messages to other windows/tabs of the same origin.

The BroadcastChannel API was first introduced in 2015 and has gained wide support across modern browsers. As of 2023, it’s supported in:

• Chrome (54+)
• Firefox (38+)
• Edge (79+)
• Safari (15.4+)
• Opera (41+)

We can check caniuse.com for the most up-to-date browser support information.

How BroadcastChannel Works

Here’s a basic example:

// Create or join a channel
const channel = new BroadcastChannel('my-channel');

// Listen for messages
channel.onmessage = (event) => {
  console.log('Received message:', event.data);
};

// Send a message
channel.postMessage('Hello from this tab!');

// Close the channel when you're done
channel.close();

Key Concepts

• Channel Creation: When we create a BroadcastChannel, we either create a new channel or join an existing one with the same name.

• Message Broadcasting: Messages sent through postMessage() are broadcasted to all other tabs/windows that have joined the same channel.

• Same-Origin Policy: BroadcastChannel only works for pages from the same origin(protocol, domain, and port).

• Data Types: We can send various data types, including objects, arrays, and ArrayBuffers.

Limitations and Considerations

BroadcastChannel has some limitations:

• Same-Origin Restriction: It only works within the same origin, so we can’t use it to communicate between different domains.

• No Persistence: Messages are not stored. If no other tabs are listening when a message is sent, it’s lost.

• No Guaranteed Delivery: There’s no built-in mechanism to ensure message delivery or order.

• Performance: While generally efficient, it could impact performance.

Implementing Cross-Tab Communication in Angular

We’ll create a simple chat application that works across multiple tabs using Angular and the BroadcastChannel API. This will demonstrate real-time updates and typing indicators shared across tabs.

GitHub repository: https://github.com/nhannguyendevjs/cross-tab-chat

Demo link: https://cross-tab-chat.vercel.app/

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/
• Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs