DEV Community

Việt Anh Trần Hữu
Việt Anh Trần Hữu

Posted on

BroadCast Channel API

Hello mọi người lại là Slao đây

Chắc hẳn có những lúc bạn muốn đồng bộ dữ liệu giữa các tab trình duyệt của ứng dụng có nhiều tab mở đồng thời trong ứng dụng web mà không muốn phải sử dụng những WebSocket hay những API phức tạp. Thì đây BroadCast Channel sinh ra để giải quyết vấn đề đó

  • BroadcastChannel là gì

    BroadcastChannel là một API của trình duyệt cho phép các tab, cửa sổ, iframe, hoặc Service Workers giao tiếp trực tiếp với nhau thông qua một kênh truyền tải tin nhắn.

Image description

Bằng cách tạo một đối tượng BroadcastChannel, bạn có thể nhận bất kỳ tin nhắn nào được đăng lên nó. Bạn không cần phải duy trì tham chiếu đến các khung hoặc nhân viên mà bạn muốn liên lạc: họ có thể "đăng ký" một kênh cụ thể bằng cách xây dựng BroadcastChannel của riêng họ có cùng tên và có giao tiếp hai chiều giữa tất cả chúng.

  • Cách ứng dụng BroadcastChannel

    Tạo channel

Image description

Gửi message

Image description

Nhận message

Image description

Đóng channel

Image description

Image description

khi ấn vào click me thì ở trang cùng trang web nhưng ở tab khác sẽ nhận được thông tin

Image description

Image description

  • Lưu ý
    • Chỉ hoạt động giữa các tab hoặc cửa sổ trên cùng một origin (cùng domain và protocol).
    • Không thể giao tiếp giữa các domain khác nhau (do giới hạn bảo mật CORS).
    • Không phụ thuộc vào WebSocket hoặc server. Hoạt động hoàn toàn trên trình duyệt, tiết kiệm tài nguyên và nhanh chóng.
  • Ưu điểm
    • Nhanh và nhẹ.
    • Không cần server trung gian.
    • Hoạt động trên nhiều tab mà không ảnh hưởng hiệu suất.
    • Thao tác đơn giản (không cần cài đặt thư viện bên ngoài).

Top comments (0)