Realtime presence

Siapa yang ada di sini. Tanpa bertanya ke API Anda.

Subscribe ke channel presence dan daftar anggota terkini langsung hadir bersama subscription, sehingga ruangan tampil terisi alih-alih kosong. Setelah itu, setiap klien mendengar join dan leave yang sama. Backend Anda menetapkan identitas setiap anggota saat menandatangani subscription, itulah yang membuat daftar ini dapat dipercaya.

room.ts
18 members
import type { Member } from "@messagebird/realtime";

const room = bird.subscribe("presence-room-42");

room.bind("bird:subscription_succeeded", () => {
  // The roster is already here. Paint it before anyone moves.
  render({ me: room.myId, members: [...room.members.values()] });
});

room.bind<Member>("bird:member_added", (member) => join(member.member_id));
room.bind<Member>("bird:member_removed", (member) => leave(member.member_id));

input.addEventListener("input", () => {
  room.trigger("client-typing", { at: Date.now() });
});

Anggota adalah orang, bukan socket.

Tiga tab adalah satu anggota.

Presence adalah bagian dari Bird Realtime API, dan menghitung identitas, bukan sesi. Seorang anggota masuk ke daftar saat koneksi pertamanya subscribe dan keluar saat koneksi terakhirnya terputus; tab-tab di antaranya tidak menghasilkan apa pun, sehingga daftar tidak berkedip setiap kali seseorang membuka jendela duplikat. Jika Anda membutuhkan jumlah socket, itu adalah pengaturan aplikasi terpisah dan event terpisah.

Apa yang presence berikan

Daftar anggota, perubahannya, dan identitas untuk menghubungkan keduanya. Semuanya ditandatangani oleh backend Anda sendiri.

  1. 01

    Daftar anggota, saat tiba.

    bird:subscription_succeeded membawa daftar anggota terkini, sehingga tampilan pertama adalah ruangan yang sesungguhnya. Anda menerapkan join dan leave di atasnya, bukan membangun daftar dari keadaan kosong.

  2. 02

    Identitas yang Anda kendalikan.

    Endpoint otorisasi Anda mengembalikan member id dan member info opsional, lalu menandatangani string tersebut. Klien dapat meminta subscribe tetapi tidak dapat memilih siapa dirinya. Batasi member info pada data profil publik kecil seperti nama tampilan atau avatar: setiap anggota channel menerimanya, dan dibatasi maksimal 1 KB.

  3. 03

    Baca dari server Anda.

    Tampilkan daftar anggota channel, atau minta member_count tanpa menampilkan daftar, langsung dari API. Keduanya tidak memerlukan subscription, sehingga backend dapat menjawab siapa yang ada di ruangan tanpa bergabung. Member count hanya untuk presence; memintanya pada channel public atau private adalah validation error, karena channel tersebut tidak memiliki anggota.

  4. 04

    Client event antar peer.

    Channel presence adalah salah satu dari dua tempat di mana klien dapat memicu event langsung ke klien lain, sehingga indikator mengetik dan posisi kursor tidak pernah menyentuh API Anda. Sepuluh per detik per koneksi, dan pengirim tidak menerima event-nya sendiri.

  5. 05

    Jumlah koneksi, saat Anda membutuhkannya.

    Members menjawab siapa yang ada di sini. Aktifkan penghitungan koneksi dan event jumlah koneksi, dan bird:connection_count menjawab berapa banyak socket yang terbuka di channel, yaitu angka di mana orang dengan tiga tab berkontribusi tiga.

Event yang ditujukan ke anggota

Terkadang tujuannya adalah orang, bukan ruangan.

Anggota yang sudah masuk dapat dihubungi langsung, tanpa channel yang perlu disebutkan dan tanpa subscription yang perlu diotorisasi. Satu panggilan menjangkau setiap koneksi yang dimiliki identitas tersebut, di semua tab dan perangkat, dan tidak ada orang lain, bahkan jika anggota lain mengikat nama event yang sama. Jika mereka tidak memiliki koneksi aktif, panggilan tetap berhasil: pengiriman tidak diantrikan, jadi simpan notifikasi dan muat saat mereka kembali. Identitas yang sama adalah target disconnect saat sebuah sesi harus diakhiri sekarang.

members.ts
server
// Address the person, not a channel. Every tab, every device.
await bird.realtime.members.send(APP_ID, "u_42", {
  event: "order.shipped",
  data: { order_id: "ord_123" },
});

// The roster, read from your server. No subscription needed.
const roster = await bird.realtime.channels.members(APP_ID, "presence-room-42");

// Password changed. Close every connection they hold.
await bird.realtime.members.disconnect(APP_ID, "u_42");

Daftar teman bukan ruangan.

Presence menjawab siapa yang ada di ruangan ini bersama saya. Event watchlist menjawab apakah orang-orang yang saya pedulikan sedang online di mana pun. Identitas bertanda tangan seorang anggota dapat membawa hingga 100 member id, dan dengan event watchlist diaktifkan, koneksi diberi tahu saat salah satu dari mereka online atau offline, dengan status terkini seluruh daftar dikirimkan tepat setelah masuk. Karena daftar tersebut ada di dalam identitas bertanda tangan, endpoint Anda yang menentukan siapa boleh memantau siapa. Tidak ada channel per hubungan, dan orang-orang yang dipantau tidak perlu melakukan apa pun selain masuk.

Pelajari lebih dalam di dokumentasi.

Channel presence mencakup daftar anggota, member info, dan pembacaan dari sisi server. Mengotorisasi channel adalah kontrak yang diimplementasikan backend Anda, mengirim event ke anggota membandingkan member event dengan channel private, dan event watchlist adalah varian daftar ikuti.

Terapkan dalam praktik.

Lanjutkan dengan dokumentasi, panduan, dan contoh untuk topik ini. Sumber daya tersedia dalam bahasa Inggris.

Coba praktiknya dan dapatkan ringkasan implementasi

Tampilkan ruangan, bukan status memuat.

Presence, client event, dan pengiriman tertuju anggota tersedia di setiap aplikasi Realtime. Paket gratis mencakup 100 koneksi bersamaan.

Mulai dengan satu channel.
Tambahkan yang lain saat Anda siap.

API key uji coba langsung tersedia untuk Anda. Akses produksi terbuka setelah Anda menambahkan metode pembayaran dan memverifikasi pengirim.

Menggunakan Claude Code, Cursor, atau Codex? Salin prompt pengaturan dan agen Anda akan menginstal Bird CLI dan skill untuk Anda. Pilih milik Anda:

Cursor