BroadcastChannel API: Komunikasi Antar Tab Browser tanpa Server

Aplikasi web sering dibuka di lebih dari satu tab. Pengguna mungkin mengubah preferensi di satu tab, menyelesaikan proses di tab lain, atau membuka dasbor yang sama beberapa kali. Tanpa mekanisme komunikasi, setiap tab dapat menampilkan keadaan yang berbeda sampai halaman dimuat ulang. BroadcastChannel API menyediakan cara sederhana bagi konteks browser pada origin yang sama untuk saling mengirim pesan tanpa membuat koneksi server khusus.

API ini berguna untuk menyebarkan perubahan status ringan, misalnya memberi tahu tab lain bahwa pengguna sudah keluar, data lokal telah diperbarui, atau sebuah proses telah selesai. Namun, BroadcastChannel bukan sistem antrean pesan dan bukan pengganti penyimpanan permanen. Pesan hanya diterima oleh konteks yang sedang membuka kanal pada saat pesan dikirim.

Apa itu BroadcastChannel API?

BroadcastChannel adalah antarmuka JavaScript untuk komunikasi satu-ke-banyak di antara konteks penjelajahan yang memenuhi batasan origin dan partisi penyimpanan browser. Konteks tersebut dapat mencakup beberapa tab, jendela, iframe yang sesuai, dan lingkungan worker yang mendukung API ini. Semua pihak harus menggunakan nama kanal yang sama, misalnya app-events.

Berbeda dari WebSocket atau Server-Sent Events, BroadcastChannel tidak menghubungkan browser ke server. Pesan disebarkan di dalam lingkungan browser. Karena itu, API ini cocok untuk koordinasi antartab pada perangkat yang sama, bukan untuk mengirim pembaruan ke pengguna lain atau menyinkronkan perangkat berbeda.

Membuat kanal dan mengirim pesan

Penggunaan dasarnya singkat. Setiap konteks membuat objek BroadcastChannel dengan nama yang sama, memasang penangan pesan, lalu memanggil postMessage() ketika ada perubahan yang perlu diketahui konteks lain.

const channel = new BroadcastChannel("app-events");

channel.addEventListener("message", (event) => {
  if (event.data?.type === "preferences-updated") {
    console.log("Preferensi diperbarui di tab lain");
    // Muat ulang data lokal yang relevan.
  }
});

// Panggil setelah perubahan benar-benar berhasil disimpan.
channel.postMessage({
  type: "preferences-updated",
  changedAt: Date.now()
});

Contoh tersebut mengirim objek yang dapat diproses melalui structured clone. Hindari mengirim objek kompleks yang tidak dapat disalin, seperti fungsi atau elemen DOM. Untuk pesan yang lebih rumit, kirim pengenal atau data minimum lalu biarkan setiap tab membaca sumber data yang sesuai.

Menyinkronkan status aplikasi secara praktis

Salah satu penggunaan umum adalah menyebarkan peristiwa logout. Setelah aplikasi berhasil menghapus sesi lokal atau menerima konfirmasi logout dari mekanisme autentikasi, tab aktif dapat mengirim pesan seperti { type: "logout" }. Tab lain yang menerima pesan kemudian membersihkan tampilan sensitif dan mengarahkan pengguna ke halaman masuk.

Pesan tersebut sebaiknya menjadi sinyal untuk memperbarui antarmuka, bukan satu-satunya kontrol keamanan. Setiap permintaan ke server tetap harus memeriksa autentikasi dan otorisasi secara mandiri. Jangan mengirim token akses, kata sandi, data pembayaran, atau rahasia lain melalui kanal. Konteks yang memenuhi syarat untuk bergabung dengan kanal dapat menerima pesannya.

BroadcastChannel juga dapat dipakai untuk memperbarui lencana notifikasi, menyegarkan cache data antartab, atau mencegah pengguna melihat status lama setelah suatu tindakan selesai. Tetapkan tipe pesan yang jelas dan validasi struktur datanya sebelum diproses. Dengan begitu, pesan yang tidak dikenal tidak menyebabkan perubahan antarmuka yang tidak terduga.

Menangani siklus hidup kanal

Setiap tab yang tidak lagi memerlukan kanal sebaiknya memanggil close(). Langkah ini menandai objek sebagai tidak aktif dan membantu browser melepaskan sumber daya yang tidak lagi diperlukan. Pada aplikasi berbasis komponen, buat kanal saat komponen atau layanan komunikasi dimulai, lalu tutup saat komponen dibongkar atau layanan dihentikan.

const channel = new BroadcastChannel("app-events");

function handleMessage(event) {
  if (event.data?.type === "refresh-needed") {
    refreshCurrentView();
  }
}

channel.addEventListener("message", handleMessage);

// Saat layanan tidak lagi digunakan:
function disposeChannel() {
  channel.removeEventListener("message", handleMessage);
  channel.close();
}

Jangan mengasumsikan bahwa pesan akan tersimpan jika tidak ada penerima. Jika tab dibuka setelah pesan dikirim, tab baru tidak otomatis memperoleh riwayat tersebut. Untuk keadaan yang harus bertahan setelah halaman ditutup, simpan data di IndexedDB, server, atau mekanisme penyimpanan lain yang sesuai, lalu gunakan BroadcastChannel hanya sebagai pemberitahuan bahwa data perlu dibaca ulang.

Batasan dan alternatif

BroadcastChannel bekerja dalam batasan keamanan browser. Origin yang berbeda tidak dapat begitu saja bergabung ke kanal yang sama, dan kebijakan partisi penyimpanan dapat memengaruhi konteks mana yang bisa berkomunikasi. Dukungan browser modern cukup luas, tetapi aplikasi sebaiknya tetap memeriksa ketersediaan API sebelum menggunakannya.

Jika API tidak tersedia, pilihan sederhana adalah mendengarkan peristiwa storage pada perubahan nilai di localStorage. Peristiwa tersebut dikirim ke dokumen lain yang berbagi penyimpanan, bukan ke jendela yang melakukan perubahan itu sendiri. Untuk komunikasi yang membutuhkan koneksi dua arah dengan server, gunakan teknologi seperti WebSocket. Pilih mekanisme berdasarkan cakupan dan kebutuhan, bukan sekadar karena salah satu API lebih baru.

Kesimpulan

BroadcastChannel API memudahkan tab atau konteks browser yang sesuai untuk bertukar pesan tanpa server perantara. Gunakan pesan yang terstruktur, validasi data yang diterima, dan jangan menganggap komunikasi antar-tab sebagai batas keamanan. Tutup channel saat tidak lagi diperlukan dan sediakan fallback untuk lingkungan yang tidak mendukung API.