BroadcastChannel API: Giao tiếp giữa các tab hoặc cửa sổ trong trình duyệt

BroadcastChannel API là gì?

BroadcastChannel API là một công cụ đơn giản nhưng mạnh mẽ, cho phép các ngữ cảnh duyệt web như tab, cửa sổ, iframe, web worker và service worker giao tiếp trực tiếp với nhau, miễn là chúng cùng một nguồn gốc (origin). Khi một thông điệp được gửi qua một kênh cụ thể, tất cả các trình nghe (listener) đã đăng ký với kênh đó sẽ nhận được thông điệp này.

Cách sử dụng BroadcastChannel API

1. Tạo một channel

Hàm tạo BroadcastChannel lấy một tham số duy nhất: tên của kênh. Tên xác định kênh và sống trên các bối cảnh duyệt web.

// Connect to the channel named "channel_name".
const channel = new BroadcastChannel('channel_name');

2. Gửi thông điệp

// Send a message on "channel_name".
channel.postMessage('This is a test message.');

3. Lắng nghe thông điệp

// Listen for messages on "channel_name".
channel.onmessage = function(e) {
  console.log('Received', e.data);
};

4. Đóng channel khi không sử dụng

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

Dữ liệu được hỗ trợ trong BroadcastChannel

BroadcastChannel hỗ trợ nhiều loại dữ liệu, bao gồm:

  • Chuỗi (String)
  • Đối tượng (Object)
  • Mảng (Array)
  • Blob
  • ArrayBuffer
  • Map

Ví dụ – gửi Blob hoặc File

const blob = new Blob(['foo', 'bar'], { type: 'text/plain' });
channel.postMessage(blob);

Lưu ý rằng một channel sẽ không nhận được thông điệp do chính nó gửi ra. Điều này có nghĩa là nếu bạn gửi một thông điệp từ một tab, tab đó sẽ không nhận được thông điệp đó (sự kiện onmessage sẽ không kích hoạt.)

Trình duyệt hỗ trợ BroadcastChannel API

BroadcastChannel API được hỗ trợ trên các trình duyệt sau:

  • Chrome 54+
  • Firefox 38+
  • Edge 79+
  • Opera 41+
if ('BroadcastChannel' in self) {
   // BroadcastChannel API supported!
   console.log('BroadcastChannel API supported!');
 }

Đối với các trình duyệt không hỗ trợ, bạn có thể sử dụng thư viện polyfill như broadcast-channel để đảm bảo tính tương thích. https://github.com/pubkey/broadcast-channel

Demo

Bạn có thể check demo ở đây https://trongcong.github.io/broadcastchannel-api-demo/, mở link demo ở 2 tab và xem kết quả

Project on GitHub

Oh My Zsh: Nâng cao trải nghiệm terminal với giao diện đẹp và các plugin tăng hiệu suất! Git cherry-pick là gì? Cách sử dụng và ví dụ Git Rebase: Gộp nhiều commit thành một để tối ưu hóa lịch sử commit 11 tính năng JavaScript mới tuyệt vời trong ES13 (ES2022) CSS diệu kỳ: Các thuộc tính CSS mà bạn có thể chưa biết Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Làm quen với các components thường dùng khi tạo Gutenberg Block

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.