Nắm vững API Kênh Phát sóng JavaScript để Giao tiếp Giữa các Tab

Trang chủ » JavaScript » Nắm vững API Kênh Phát sóng JavaScript để Giao tiếp Giữa các Tab

Bạn đã bao giờ tự hỏi làm thế nào một số trang web dường như biết ngay lập tức khi bạn đăng xuất ở tab khác, hoặc làm thế nào giỏ hàng cập nhật trên ba cửa sổ khác nhau mà không cần làm mới trang? Trong một thời gian dài, các nhà phát triển phải dựa vào những giải pháp tạm thời rườm rà như thăm dò máy chủ hoặc can thiệp vào các sự kiện localStorage. May mắn thay, hiện đã có một giải pháp tích hợp sẵn, thanh lịch ngay trong trình duyệt giúp xử lý những công việc phức tạp này mà không cần bất kỳ thư viện bên thứ ba nào.

API Kênh Phát sóng hoạt động như một hệ thống truyền tải thông điệp nhẹ, cho phép các ngữ cảnh duyệt web khác nhau—như tab, iframe và web worker—giao tiếp với nhau miễn là chúng có cùng nguồn gốc (nghĩa là cùng giao thức, tên miền và cổng). Đây là một bước đột phá trong việc tạo ra các ứng dụng web phản hồi nhanh, mang lại trải nghiệm liền mạch thay vì một tập hợp các trang riêng lẻ.

API Kênh Phát sóng hoạt động như thế nào trên thực tế?

Về bản chất, API này xoay quanh khái niệm về một kênh được đặt tênHãy tưởng tượng nó giống như tần số radio; bất kỳ cửa sổ hoặc công nhân nào dò cùng tần số đều có thể nghe thấy những gì mọi người khác đang phát sóng. Khi bạn khởi tạo một đối tượng... BroadcastChannel đối tượng có tên cụ thể, về cơ bản bạn đang đăng ký kênh đóNếu kênh chưa tồn tại, trình duyệt sẽ tự động tạo kênh đó.

Việc gửi dữ liệu vô cùng đơn giản. Bằng cách gọi... postMessage() phương phápBạn có thể gửi một tin nhắn đến mọi ngữ cảnh khác hiện đang lắng nghe. Một trong những phần thú vị nhất là nó sử dụng... thuật toán nhân bản có cấu trúcĐiều này có nghĩa là bạn không chỉ bị giới hạn ở các chuỗi ký tự; bạn có thể gửi... các đối tượng phức tạp, mảng, Map, Set, hoặc thậm chí là Blobs mà không cần phải chạy thủ công JSON.stringify() or JSON.parse()Điều này giúp tiết kiệm rất nhiều thời gian xử lý.

Các phương pháp thiết yếu và xử lý sự kiện

Để bắt đầu, bạn cần tạo kênh: const myChannel = new BroadcastChannel('app_sync');Để nhận dữ liệu đến, bạn thiết lập một... onmessage xử lý sự kiện hoặc dùng addEventListener('message', ...)Khi một tin nhắn đến, đối tượng sự kiện sẽ chứa một data Tài sản nắm giữ thông tin được truyền tải.

• postMessage(data): Gửi đối tượng được chỉ định đến tất cả các thuê bao được kết nối khác.
• close()Đây là một bước quan trọng đối với việc quản lý bộ nhớ. Gọi phương thức này ngắt kết nối đối tượng từ kênh này, cho phép trình thu gom rác của trình duyệt dọn dẹp các tài nguyên.
• name: Một thuộc tính chỉ đọc cho phép bạn xác minh đối tượng hiện đang được liên kết với kênh nào.

Điều quan trọng cần lưu ý là bên phát sóng không nhận được tin nhắn của chính mình . Nếu bạn gửi tin nhắn từ Tab A, chỉ Tab B và Tab C mới kích hoạt sự kiện tin nhắn của chúng. Đây là một lợi thế lớn vì nó ngăn chặn các vòng lặp vô hạn thường gây khó khăn cho các nhà phát triển khi làm việc với WebSockets hoặc các cơ chế vòng lặp ngược khác.

So sánh Broadcast Channel với các API khác

Bạn có thể đang nghĩ, “Tại sao không dùng…” window.postMessage()?” Trong khi postMessage() Nó rất mạnh mẽ, nó đòi hỏi... tham chiếu trực tiếp đến cửa sổ đích (như cửa sổ bật lên hoặc iframe). API Kênh Phát sóng là một hệ thống "phát một lần và quên đi"; bạn không cần biết ai đang nghe, điều này làm cho nó trở nên dễ sử dụng. linh hoạt hơn đáng kể đối với các tình huống nhiều tab.

So với SharedWorkers , Broadcast Channel đơn giản hơn nhiều. SharedWorkers rất tốt để quản lý các trạng thái chia sẻ phức tạp hoặc một kết nối WebSocket duy nhất cho nhiều tab, nhưng đối với các thông báo nhẹ hoặc đồng bộ hóa trạng thái , Broadcast Channel là lựa chọn phù hợp hơn. Tương tự, trong khi API MessageChannel được thiết kế cho giao tiếp một-đối-một thông qua các cổng, Broadcast Channel được xây dựng cho việc phát sóng một-đối-nhiều.

Các trường hợp sử dụng thực tế và triển khai thực tiễn

Có vô số cách để áp dụng điều này vào thực tế. Một ví dụ điển hình là đồng bộ hóa trạng thái xác thực . Khi người dùng nhấn 'Đăng xuất' trong một tab, bạn có thể phát đi thông báo 'auth_logout', khiến tất cả các tab đang mở khác ngay lập tức chuyển hướng đến trang đăng nhập.

Các ứng dụng thông minh khác bao gồm:

• Giỏ hàngCập nhật số lượng sản phẩm trong tiêu đề trên tất cả các tab ngay khi người dùng thêm sản phẩm.
• Sở thích của người sử dụngNếu người dùng chuyển sang 'Chế độ tối' trong một cửa sổ, bạn có thể kích hoạt sự thay đổi chủ đề Trên toàn bộ phiên làm việc ngay lập tức.
• Công cụ cộng tác: Đồng bộ hóa vị trí con trỏ hoặc thay đổi văn bản trong trình soạn thảo tài liệu dùng chung cho một trải nghiệm trực tiếp liền mạch.
• Điều phối nhân viên dịch vụ: Hướng dẫn trình xử lý dịch vụ xóa bộ nhớ đệm hoặc cập nhật tài nguyên mà không cần phải duyệt qua thủ công tất cả các máy khách đang hoạt động bằng cách sử dụng self.clients.matchAll().

Hạn chế và khả năng tương thích

Mặc dù hữu ích, nhưng vẫn có một vài hạn chế cần lưu ý. Thứ nhất, nó chỉ hoạt động trên cùng một miền . Bạn không thể sử dụng nó để giao tiếp với các miền khác vì lý do bảo mật. Thứ hai, không có lịch sử tin nhắn ; nếu một tab tham gia kênh muộn, nó sẽ không thấy các tin nhắn đã được gửi trước khi kết nối. Cuối cùng, nó không cung cấp bất kỳ đảm bảo nào về việc gửi thành công , vì vậy nếu bạn cần xác nhận rằng tin nhắn đã được nhận, bạn sẽ cần xây dựng giao thức xác nhận riêng của mình.

Về khả năng tương thích trình duyệt, API này hiện là một phần của chuẩn Widely Available , có nghĩa là nó được hỗ trợ bởi tất cả các phiên bản hiện đại của Chrome, Firefox và Safari. Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, bạn sẽ phải tìm kiếm các polyfill, mặc dù đối với hầu hết các dự án hiện đại, nó đã sẵn sàng để sử dụng trong môi trường sản xuất.

Bằng cách triển khai API này, các nhà phát triển có thể loại bỏ các thủ thuật lưu trữ kém hiệu quả và tạo ra trải nghiệm người dùng được đồng bộ hóa cao . Nó đơn giản hóa kiến ​​trúc của các ứng dụng đa cửa sổ bằng cách cung cấp một phương thức gốc, an toàn và hiệu quả để xử lý giao tiếp thời gian thực trong trình duyệt của người dùng.