Introduction au PubNub Chat SDK

Le PubNub Chat SDK, disponible pour les applications TypeScript et JavaScript, expose un ensemble d'API conçues pour faciliter l'ajout de fonctions de chat puissantes et flexibles à votre application avec un minimum de développement. Les options de chat telles que les citations, les mentions d'utilisateurs, les références de canaux, les fils de discussion, les accusés de lecture et les indicateurs de frappe sont prises en charge de manière native par le SDK, ce qui vous permet de créer rapidement une application complète.

Veuillez vous référer à notre documentation et à notre exemple d'application de chat pour commencer à utiliser le SDK Chat. Notre tutoriel vous guidera à travers les fonctionnalités de base du Chat SDK et abordera certaines fonctions plus avancées, tandis que notre démo hébergée vous montrera le Chat SDK en action.

Ce mode d'emploi fait partie d'une série d'articles consacrés aux fonctionnalités les plus puissantes du PubNub Chat SDK. La série peut être lue dans n'importe quel ordre, mais la liste des articles connexes se trouve ci-dessous :

• Comment gérer l'appartenance à un canal d'utilisateurs avec le SDK Chat
• Comment ajouter des réactions et des Emojis aux messages avec le Chat SDK
• Comment créer des fils de discussion et des messages de citation avec le Chat SDK
• Comment mentionner des utilisateurs et des canaux avec le Chat SDK

Gestion de l'appartenance à un canal d'utilisateurs

Le Chat SDK définit plusieurs types qui sont importants pour comprendre l'appartenance à un canal :

• Lesutilisateurs représentent les personnes qui participent à une conversation.
• Lescanaux représentent une conversation entre plusieurs utilisateurs. La documentation utilise l'analogie selon laquelle chaque canal représente une "salle de discussion" unique. Les canaux peuvent être directs (c'est-à-dire une conversation 1:1 entre deux utilisateurs seulement), "de groupe" (c'est-à-dire entre plusieurs utilisateurs nommés) ou "publics".
• Lesadhésions représentent une relation entre les utilisateurs et les canaux, avec des métadonnées facultatives.

Ce guide explique comment créer et gérer les adhésions à un canal.

Comment les utilisateurs rejoignent-ils un canal ?

Un utilisateur peut devenir membre d'un canal de plusieurs façons. Lorsque des canaux directs ou de groupe sont créés, le ou les utilisateurs de cette conversation sont spécifiés en tant qu'arguments lors de la création.

Dans l'exemple ci-dessous, tiré de la documentation, les deux utilisateurs "agent-007" et "agent-008" deviennent membres du canal "group-chat-1

// reference both agents you want to talk to
const user1 = await chat.getUser("agent-007")
const user2 = await chat.getUser("agent-008")

// add the channel ID, name, and topic
const { channel, hostMembership, inviteeMembership } = await chat.createGroupConversation(
  {
    users: 
    [
      user1,
      user2
    ],
    channelId: "group-chat-1"
    …
  }
)

Vous pouvez demander si un utilisateur est membre d'un canal de plusieurs façons, et vous trouverez tous les détails dans la documentation relative à l'appartenance à un canal. Par exemple, pour obtenir les membres du canal que nous venons de créer :

// reference the "channel" object
const channel = await chat.getChannel("group-chat-1")
const members = await channel.getMembers()
//  members contains both users, so members.total === 2

Si les utilisateurs ne sont pas affectés à un canal lors de sa création, ils peuvent le rejoindre ou le quitter plus tard en utilisant les méthodes join() et leave() correspondantes, ce qui permet d'avoir des canaux dynamiques. Les utilisateurs peuvent également être invités à devenir membres d'un canal.

Vous pouvez voir ce comportement dans la courte démo ci-dessous. Puisqu'il s'agit d'une démo en direct, remarquez que l'appartenance à un canal persistera même après le rafraîchissement de la page.

Démonstration interactive

Si le contenu intégré n'est pas disponible sur cette page, il peut également être consulté à l'adresse https://chat-sdk-how-to-membership.netlify.app/.

Le code de cette démo est disponible sur GitHub, mais les points clés sont les suivants :

Assurez-vous d'avoir une instance de l'objet Chat instanciée dans votre application

const chat = await Chat.init({
  publishKey: "YOUR_PUBLISH_KEY",
  subscribeKey: "YOUR_SUBSCRIBE_KEY",
  userId: "YOUR_USER_ID",
})

Il y a beaucoup de paramètres possibles que vous pouvez passer au Chat SDK, mais pour l'appartenance à un canal, vous n'avez pas besoin de plus que la clé de publication standard, la clé d'abonnement et l'identifiant de l'utilisateur. Si tout cela est nouveau pour vous et que vous ne savez pas par où commencer, veuillez consulter la section sur la configuration initiale dans notre documentation.

Rejoindre un canal. Ce code s'enregistre également pour recevoir les mises à jour des membres, ce qui est abordé dans la section suivante.

async function join(channelName: string)
  {
    if (chat)
    {
      const channel = await chat.getChannel(channelName)
      const channelMembership = await channel?.join(() => null)
      channelMembership?.membership.streamUpdates(async (membership) => {
        //  Stream updates on the channel as follows
        console.log(membership)
      })

      //  For brevity, ignore that this call could contain multiple pages of memberships
      const {memberships} = await chat.currentUser.getMemberships()
      setMyMemberships(memberships) 
    }
  }

Comme mentionné dans les commentaires du code ci-dessus, l'appel à user.getMemberships() peut contenir des données paginées s'il y a trop de canaux.

Le code qui alimente les boutons "quitter le canal" dans la démo est le suivant :

async function leave(channelName: string)
  {
    if (chat)
    {
      const channel = await chat.getChannel(channelName)
      await channel?.leave();
      //  For brevity, ignore that this call could contain multiple pages of memberships
      const {memberships} = await chat.currentUser.getMemberships()
      setMyMemberships(memberships) 
    }
  }

Pour que la démo reste simple, il n'y a qu'un seul utilisateur et seule l'adhésion de l'utilisateur est prise en compte. Dans une application réelle, vous aurez plusieurs utilisateurs, chacun avec son propre canal. Une démonstration plus réaliste est disponible pour notre Chat SDK et est décrite à la fin de ce guide.

Métadonnées relatives à l'appartenance à un canal

L'objet Membership vous permet de spécifier des métadonnées personnalisées liées à l'association entre le canal et l'utilisateur ; par exemple, s'il s'agit d'un chat lié à une demande d'assistance, vous pouvez stocker le rôle de l'utilisateur sous la forme {role : 'support technician'}.

Les métadonnées peuvent être déclarées lors de la création de l'adhésion ou peuvent être mises à jour à tout moment par l'utilisateur individuel.

Pour garder une trace de la mise à jour des métadonnées d'adhésion, le SDK Chat fournit les méthodes streamUpdates() et streamUpdatesOn() pour l'objet Adhésion.

Comme le montre la démo précédente, vous pouvez suivre les modifications apportées aux métadonnées d'adhésion de la manière suivante :

channelMembership?.membership.streamUpdates(async (membership) => {
  //  Stream updates on the channel as follows
  console.log(membership)
})

Pourquoi les utilisateurs devraient-ils rejoindre un canal ?

On pourrait supposer que les utilisateurs doivent rejoindre un canal pour recevoir des messages sur ce canal, mais ce n'est pas le cas. Pour recevoir des messages sur un canal, vous pouvez invoquer la méthode connect(), où vous pouvez fournir un rappel à invoquer chaque fois qu'un message est reçu. Si vous n'êtes pas membre d'un canal lors de sa création, vous devrez appeler connect() séparément, mais l'appel à join() invoquera connect() pour vous automatiquement.

Si vous êtes familier avec PubNub, cet appel connect() est analogue à subscribe() et addListener().

Pourquoi rejoindre un canal ? L'adhésion à un canal et l'appartenance à un canal sont fondamentales pour que le Chat SDK comprenne les relations entre les utilisateurs. Elles sont donc nécessaires pour utiliser de nombreuses autres fonctions puissantes du SDK, telles que les accusés de réception, les mentions d'utilisateurs, le nombre de messages non lus, la modération et l'indicateur de frappe.

Résumé de l'adhésion

• De quoi s'agit-il ? Une relation entre un utilisateur et un canal, avec des métadonnées personnalisables.
• Comment une adhésion est-elle créée ? Les utilisateurs peuvent être associés à un canal lors de sa création, ou ils peuvent se joindre eux-mêmes ou être invités par d'autres à un canal après sa création.
• Comment un membre est-il détruit ? Les utilisateurs peuvent quitter un canal à tout moment
• Comment un membre est-il suivi ? Les membres d'un canal peuvent être interrogés à l'aide de fonctions getter, et vous pouvez être informé des changements en vous inscrivant aux mises à jour.
• Pièges courants : L'appartenance à un canal ne signifie pas toujours que vous recevrez des messages sur ce canal ; prenez soin de lire la documentation lorsque vous devez appeler connect() séparément.
• D'autres restrictions ? Bien que vous puissiez rejoindre des canaux "publics", plusieurs fonctionnalités, telles que les accusés de réception ou l'indicateur de frappe, ne sont pas prises en charge pour ce type de canal.
• Quelles sont les fonctionnalités requises sur le jeu de clés PubNub ? Veillez à activer App Context sur votre clavier.

Démonstration : Adhésion à un canal utilisateur en action

Notre démo Chat SDK pour Mobile, disponible en tant que démo hébergée avec le code source complet disponible sur GitHub, utilise l'adhésion pour gérer les conversations des utilisateurs. Vous devriez également voir la démo affichée dans une iFrame au bas de cette section.

Suivez les étapes suivantes pour voir les adhésions utilisées dans notre démo :

1. Connectez-vous à l'application, en choisissant un identifiant aléatoire pour chacun des deux appareils.
2. Créez un groupe en cliquant sur l'icône "nouveau chat", puis en sélectionnant "Créer un chat de groupe
3. Choisissez les deux identifiants sous lesquels vous venez de vous connecter et attribuez un nom au groupe.
4. En coulisses, l'application a créé une adhésion pour associer chacun des deux utilisateurs au groupe nouvellement créé.
5. Entrez dans la conversation de groupe en cliquant sur l'entité créée dans la section "Groupes".
6. Cliquez sur le nom du groupe en haut de l'écran pour afficher les paramètres de discussion de votre utilisateur (comme indiqué dans l'image de gauche ci-dessus).
7. Remarquez que le nom de cet utilisateur est un "membre" de la discussion.
8. Notez que si vous vous retirez de la conversation ou même si vous vous déconnectez de l'application et y revenez, les réactions sont conservées et lues dans l'historique des messages.

Si le contenu intégré n'est pas disponible sur cette page, il peut également être consulté à l'adresse https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/.

Comment PubNub peut-il vous aider ?

Cet article a été publié à l'origine sur PubNub.com

Notre plateforme aide les développeurs à construire, fournir et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie périphérique en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub

Découvrez le Live Tour pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer

Créez un compte PubNub pour un accès immédiat et gratuit aux clés PubNub.

Commencer

La documentation PubNub vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre SDK.