Abonnez-vous à un canal de présence et le registre actuel arrive avec l'abonnement, de sorte que la salle s'affiche peuplée plutôt que vide. Ensuite, chaque client reçoit les mêmes arrivées et départs. Votre backend attribue à chaque membre son identité lors de la signature de l'abonnement, ce qui rend la liste fiable.
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 membre est une personne, pas un socket.
Trois onglets font un seul membre.
La présence fait partie de l<hub>API Bird Realtime</hub>, et elle compte les identités plutôt que les sessions. Un membre rejoint la liste lorsque sa première connexion sabonne et la quitte lorsque sa dernière se déconnecte ; les onglets intermédiaires ne produisent rien, le registre ne clignote donc pas chaque fois que quelqu'un ouvre une fenêtre en double. Si vous avez besoin du nombre de sockets, c'est un paramètre d'application distinct et un événement distinct.
Ce que la présence vous apporte
Le registre, les changements, et l'identité sur laquelle les deux reposent. Le tout signé par votre propre backend.
- 01
Le registre, dès l'arrivée.
bird:subscription_succeeded contient la liste actuelle des membres, de sorte que le premier rendu reflète la salle réelle. Vous appliquez les arrivées et départs par-dessus au lieu de construire la liste à partir d'un état vide.
- 02
Une identité que vous contrôlez.
Votre endpoint d'autorisation renvoie un identifiant de membre et des informations facultatives, puis signe cette chaîne exacte. Un client peut demander à s'abonner mais ne peut pas choisir qui il est. Limitez les informations du membre à de petites données de profil public comme un nom d'affichage ou un avatar : chaque membre du canal les reçoit, et elles sont plafonnées à 1 Ko.
- 03
Lectures depuis votre serveur.
Listez les membres d'un canal, ou demandez le member_count sans les lister, directement depuis l'API. Aucun abonnement n'est nécessaire, votre backend peut donc savoir qui est dans une salle sans y entrer. Le comptage de membres est réservé à la présence ; le demander sur un canal public ou privé est une erreur de validation, car ces canaux n'ont pas de membres.
- 04
Événements client entre pairs.
Un canal de présence est l'un des deux endroits où un client peut déclencher un événement directement vers les autres, de sorte que les indicateurs de saisie et les positions de curseur ne touchent jamais votre API. Dix par seconde par connexion, et l'expéditeur ne reçoit pas son propre événement.
- 05
Comptage de connexions, quand vous le souhaitez.
Les membres indiquent qui est là. Activez le comptage de connexions et les événements de comptage, et bird:connection_count indique combien de sockets sont ouverts sur le canal, soit le nombre auquel la personne aux trois onglets contribue trois.
Événements adressés à un membre
Parfois la destination est une personne, pas une salle.
Un membre connecté peut être adressé directement, sans canal à nommer ni abonnement à autoriser. Un seul appel atteint chaque connexion que cette identité détient, à travers chaque onglet et appareil, et personne d'autre, même si un autre membre écoute le même nom d'événement. S'il n'a aucune connexion active, l'appel réussit quand même : la livraison n'est pas mise en file d'attente, stockez donc la notification et chargez-la à son retour. La même identité est ce que la déconnexion cible lorsqu'une session doit prendre fin immédiatement.
// 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");
Une liste de contacts n'est pas une salle.
La présence indique qui est dans cette salle avec moi. Les événements watchlist indiquent si les personnes qui m'intéressent sont en ligne quelque part. L'identité signée d'un membre peut contenir jusqu'à 100 identifiants de membres, et avec les événements watchlist activés, la connexion est informée lorsque l'un d'entre eux se connecte ou se déconnecte, avec le statut actuel de toute la liste livré juste après la connexion. Comme la liste réside dans l'identité signée, votre endpoint décide qui peut surveiller qui. Pas de canal par relation, et les personnes surveillées n'ont rien d'autre à faire que se connecter.
Aller plus loin dans la documentation.
Les canaux de présence couvrent le registre, les informations des membres et les lectures côté serveur. L'autorisation des canaux est le contrat que votre backend implémente, envoyer des événements à un membre compare les événements membre avec les canaux privés, et les événements watchlist sont la variante liste de suivi.
Mettez-le en pratique.
Poursuivez avec la documentation, les guides et les exemples sur ce sujet. Les ressources sont en anglais.
Le reste de Realtime
Une application, une paire de clés. Explorez les autres fonctionnalités.
Affichez le salon, pas un état de chargement.
Présence, événements client et livraison adressée aux membres sont inclus dans chaque application Realtime. Le plan gratuit couvre 100 connexions simultanées.