Presencia en tiempo real

Quién está aquí. Sin consultar su API.

Suscríbase a un canal de presencia y el listado actual llega con la suscripción, de modo que la sala se muestra con sus participantes en lugar de vacía. A partir de ahí, cada cliente recibe las mismas incorporaciones y salidas. Su backend asigna a cada miembro su identidad al firmar la suscripción, lo que hace que la lista sea confiable.

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() });
});

Un miembro es una persona, no un socket.

Tres pestañas son un solo miembro.

La presencia es parte de la Bird Realtime API y cuenta identidades en lugar de sesiones. Un miembro se une a la lista cuando su primera conexión se suscribe y la abandona cuando la última se desconecta; las pestañas intermedias no generan nada, así que el listado no parpadea cada vez que alguien abre una ventana duplicada. Si necesita el recuento de sockets, eso es un ajuste de aplicación independiente y un evento separado.

Lo que la presencia le ofrece

El listado, los cambios y la identidad en la que se apoyan ambos. Todo firmado por su propio backend.

  1. 01

    El listado, al llegar.

    bird:subscription_succeeded incluye la lista actual de miembros, de modo que la primera representación es la sala real. Usted aplica las incorporaciones y salidas sobre ella en lugar de construir la lista desde un estado vacío.

  2. 02

    Una identidad que usted controla.

    Su endpoint de autorización devuelve un id de miembro e información opcional del miembro, y firma exactamente esa cadena. Un cliente puede solicitar suscribirse, pero no puede elegir quién es. Limite la información del miembro a datos de perfil público pequeños, como un nombre visible o un avatar: cada miembro del canal la recibe y tiene un límite de 1 KB.

  3. 03

    Lecturas desde su servidor.

    Liste los miembros de un canal, o solicite member_count sin listarlos, directamente desde la API. Ninguna de las dos opciones necesita suscripción, así que un backend puede saber quién está en una sala sin unirse a ella. El recuento de miembros es exclusivo de presencia; solicitarlo en un canal público o privado es un error de validación, porque esos canales no tienen miembros.

  4. 04

    Eventos de cliente entre pares.

    Un canal de presencia es uno de los dos lugares donde un cliente puede emitir un evento directamente a los demás, de modo que los indicadores de escritura y las posiciones de cursor nunca tocan su API. Diez por segundo por conexión, y el emisor no recibe su propio evento.

  5. 05

    Recuentos de conexiones, cuando los necesite.

    Los miembros responden quién está aquí. Active el conteo de conexiones y los eventos de recuento de conexiones, y bird:connection_count indicará cuántos sockets están abiertos en el canal, que es el número al que la persona con tres pestañas contribuye tres.

Eventos dirigidos a miembros

A veces el destino es una persona, no una sala.

Un miembro autenticado puede ser contactado directamente, sin necesidad de nombrar un canal ni autorizar una suscripción. Una sola llamada alcanza todas las conexiones que esa identidad mantiene, en cada pestaña y dispositivo, y a nadie más, incluso si otro miembro vincula el mismo nombre de evento. Si no tiene una conexión activa, la llamada igualmente tiene éxito: la entrega no se encola, así que almacene la notificación y cárguela cuando regrese. La misma identidad es el objetivo de la desconexión cuando una sesión debe terminar de inmediato.

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");

Una lista de contactos no es una sala.

La presencia responde quién está en esta sala conmigo. Los eventos de lista de seguimiento responden si las personas que me interesan están en línea en cualquier lugar. La identidad firmada de un miembro puede incluir hasta 100 ids de miembros, y con los eventos de lista de seguimiento habilitados, la conexión es notificada cuando cualquiera de ellos se conecta o desconecta, con el estado actual de toda la lista entregado justo después de iniciar sesión. Como la lista reside dentro de la identidad firmada, su endpoint decide quién puede observar a quién. Sin un canal por relación, y las personas observadas no hacen nada más que iniciar sesión.

Profundice en la documentación.

Canales de presencia cubre el listado, la información de miembros y las lecturas del lado del servidor. Autorización de canales es el contrato que implementa su backend, enviar eventos a un miembro compara los eventos de miembros con los canales privados, y eventos de lista de seguimiento es la variante de lista de seguidos.

Ponlo en práctica.

Continúa con la documentación, guías y ejemplos sobre este tema. Los recursos están en inglés.

Prueba el ejercicio y obtén un resumen de implementación

Muestra la sala, no un estado de carga.

Presencia, eventos del cliente y entrega dirigida a miembros están incluidos en cada aplicación Realtime. El plan gratuito cubre 100 conexiones simultáneas.

Empieza con un canal.
Añade los demás cuando estés listo.

Una clave API de prueba es tuya de inmediato. El acceso a producción se desbloquea cuando añades un método de pago y verificas un remitente.

¿Usas Claude Code, Cursor o Codex? Copia un prompt de configuración y tu agente instalará el Bird CLI y las habilidades por ti. Elige el tuyo:

Cursor