Comment créer des fils de discussion et des messages de citation avec le PubNub Chat SDK

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 fonctionnalités 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 pris 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 les utilisateurs et les canaux avec le Chat SDK

Créer des fils de discussion et des messages de citation

L'une des raisons pour lesquelles nous avons introduit le PubNub Chat SDK était de répondre aux commentaires que nous avons reçus des développeurs de chat utilisant nos SDKs traditionnels. Bien que tous nos SDKs PubNub rendent trivial l'échange de messages en temps réel entre les utilisateurs, nous avons vu que de nombreux développeurs avaient besoin d'implémenter les mêmes fonctionnalités de chat que les utilisateurs attendaient, des fonctionnalités telles que l'organisation des messages dans des threads, la citation d'un message précédent, ou le marquage d'autres utilisateurs. Avec le PubNub Chat SDK, nous avons pris ces fonctionnalités de chat standard et exposé des API pour vous permettre de les implémenter facilement dans votre propre application ; ce guide vous guidera dans l'implémentation des deux premiers exemples, la création d'un fil de discussion et la citation d'un message précédent.

Conditions préalables

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 SDK Chat, mais pour les fils de discussion et les citations, 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.

Fils de messages

La documentation sur les fils de messages se trouve dans la documentation sur les messages et explique certains détails de l'implémentation ; essentiellement, chaque fil de messages nécessite son propre canal PubNub pour gérer la communication, mais cette implémentation vous est cachée si vous utilisez le Chat SDK.

Étant donné un message racine existant, vous pouvez créer un fil d'exécution à partir de ce message en utilisant l'API createThread(). Étant donné qu'il ne peut y avoir qu'un seul fil d'exécution pour chaque message, il est préférable de vérifier si un fil d'exécution existe déjà avant d'en créer un nouveau à l'aide de l'API hasThread()

if (!rootMessage.hasThread)
{
  threadChannel = await rootMessage.createThread()
}

createThread() renvoie un objet ThreadChannel dont les méthodes sont similaires à celles de Channel. Par exemple, si vous souhaitez lire l'historique complet d'une conversation avec des threads, le pseudocode pourrait ressembler à ceci :

FOREACH message in Channel
  message.getHistory()
  IF (message.hasThread() THEN
    threadChannel = message.getThread()
    threadChannel.getHistory()
  END IF
END FOREACH

Vous pouvez envoyer des messages texte sur un canal de threads de la même manière que vous envoyez des messages sur un canal standard, à l'aide de l'API sendText().

const threadChannel = rootMessage.getThread()
threadChannel.sendText(“hello”)

Citation de messages

La citation d'un message est un exemple de l'une des fonctionnalités de notre SDK Chat qui fournit un contexte au message envoyé, que le destinataire peut interpréter. Pouvoir envoyer un texte (sendText()) comme dans l'exemple précédent est une bonne chose, mais qu'en est-il si vous souhaitez inclure un fichier dans votre message ? Que se passe-t-il si vous voulez marquer des utilisateurs ou des canaux dans votre message ? Ou, ce qui est le plus pertinent pour ce guide, que faire si vous voulez citer un message précédent dans le message actuel ? Tous ces scénarios sont gérés à l'aide d'un MessageDraft.

Un MessageDraft est un type fondamental dans le Chat SDK et sera utilisé par la plupart des implémentations de chat pour offrir une expérience riche en fonctionnalités à vos utilisateurs. Vous devrez créer un nouvel objet MessageDraft chaque fois qu'un nouveau message de chat est composé, puis vous pourrez appeler l'API addQuote() pour faire référence à un message précédent.

L'objet MessageDraft est abordé plus en détail dans le guide décrivant comment mentionner les utilisateurs et les canaux:

Déclarer une variable pour contenir le brouillon du message

 const [newMessageDraft, setNewMessageDraft] = useState<MessageDraft>()

Dans le cadre de l'initialisation de votre chat, et après l'envoi d'un message, initialiser un nouveau MessageDraft.

setNewMessageDraft(threadChannel.createMessageDraft())

Chaque fois que votre texte d'entrée change (c'est-à-dire que l'utilisateur tape quelque chose), informez-en le brouillon du message.

//  Note: Within the onChange() handler for the input field 
const response = await newMessageDraft.onChange(event.currentTarget.value)

Ajouter un message précédent en tant que citation en réponse à une action de l'utilisateur

newMessageDraft.addQuote(message)

Envoyer le message lorsque c'est nécessaire

newMessageDraft.send()

Tout cela est plus facile à comprendre si vous le voyez dans une démo fonctionnelle...

La mise en place de l'ensemble

Vous pouvez voir un exemple très simple de fils de messages et de citations de messages dans la courte démo ci-dessous :

Il s'agit d'une démonstration réelle, en direct, qui fonctionne, alors n'hésitez pas à lancer la démo dans plusieurs onglets pour voir les messages reçus en temps réel. Comme il s'agit d'une application partagée, l'option "Réinitialiser l'état de l'application" vous permettra de faire table rase du passé.

Démonstration interactive

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

Le code de cette démonstration est disponible sur GitHub, mais voici quelques extraits du code pertinent de l'application qui montrent comment il s'articule :

//  Input field onChange handler
async function handleInput(event: React.FormEvent<HTMLInputElement>)
{
  //  No special rendering for Message Draft with this app
  if (!newMessageDraft) return
  const response = await newMessageDraft.onChange(event.currentTarget.value)
}

La logique de soumission d'un message. Cette démo est codée en dur pour toujours répondre au canal de discussion

async function handleSend(event: React.SyntheticEvent) {
  newMessageDraft.send()
  setNewMessageDraft(threadChannel.createMessageDraft())
  setQuotedMessagePreview("")
  setText("")
}

L'utilisateur appuie sur le bouton "Citer le message".

async function handleQuoteMessage(message: Message)
{
  if (!newMessageDraft) return;
  setQuotedMessagePreview(message.text)
  newMessageDraft.addQuote(message)
}

N'oubliez pas que vous ne pouvez pas citer un message provenant d'un autre canal, c'est pourquoi la démo vous permet uniquement de citer des messages provenant du même fil de discussion.

Démonstration : Créer des fils de discussion et citer des messages avec notre démo React Native sur mobile

Vous pouvez jouer avec ces fonctionnalités en utilisant notre démo Chat SDK pour mobile, disponible en tant que démo hébergée avec le code source complet sur GitHub. Vous devriez également voir la démo rendue dans une iFrame au bas de cette section.

Suivez les étapes suivantes pour créer un fil de discussion et citer un message dans notre démo :

1. Connectez-vous à l'application, en choisissant un identifiant aléatoire pour chaque appareil.
2. Commencez une conversation à partir du deuxième appareil, en sélectionnant l'utilisateur connecté au premier appareil.
3. Ajoutez quelques messages à la conversation
4. Appuyez longuement sur l'un des messages.
5. Sélectionnez "Répondre dans le fil de discussion" et envoyez une réponse.
6. Appuyez longuement sur l'un des messages (il peut également s'agir de la réponse que vous venez d'envoyer).
7. Sélectionnez "Citer le message
8. Envoyez un message contenant le texte cité.
9. 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 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.