Partager via

Bibliothèque de client Azure Communication Chat pour JavaScript - version 1.5.4

  • Article

Azure Communication Services for Chat permet aux développeurs d’ajouter des fonctionnalités de conversation à leur application. Utilisez cette bibliothèque cliente pour gérer les threads de conversation et leurs utilisateurs, et envoyer et recevoir des messages de conversation.

En savoir plus sur azure Communication Services ici

Commencer

Conditions préalables

  • Un abonnement Azure .
  • Ressource Communication Services existante. Si vous devez créer la ressource, vous pouvez utiliser le portail Azure , le Azure PowerShellou leAzure CLI .
  • Node.js

Installation

npm install @azure/communication-chat

Prise en charge du navigateur

JavaScript Bundle

Pour utiliser cette bibliothèque cliente dans le navigateur, vous devez d’abord utiliser un bundler. Pour plus d’informations sur la procédure à suivre, reportez-vous à notre documentation de regroupement . Dans rollup.config.js, ajoutez les exportations de noms personnalisées suivantes dans cjs plug-in.


cjs({
  namedExports: {
    events: ["EventEmitter"],
    "@azure/communication-signaling": ["CommunicationSignalingClient", "SignalingClient"],
    "@opentelemetry/api": ["CanonicalCode", "SpanKind", "TraceFlags"]
  }
})

Concepts clés

Une conversation de conversation est représentée par un thread. Chaque utilisateur du thread est appelé participant à la conversation. Les participants à la conversation peuvent discuter entre eux en privé dans une conversation de 1:1 ou se bousculer dans une conversation de groupe 1 :N. Les utilisateurs obtiennent également des mises à jour en quasi-temps réel lorsque d’autres utilisateurs tapent et lorsqu’ils ont lu les messages.

ChatClient

ChatClient est l’interface principale pour les développeurs qui utilisent cette bibliothèque cliente. Il fournit des méthodes asynchrones pour créer et supprimer un thread.

ChatThreadClient

ChatThreadClient fournit des méthodes asynchrones pour effectuer les opérations des participants aux messages et des conversations au sein du thread de conversation.

Exemples

Initialiser ChatClient

Utilisez l’URL de ressource et le jeton d’accès utilisateur pour initialiser le client de conversation.

import { ChatClient } from '@azure/communication-chat';
import { AzureCommunicationTokenCredential } from "@azure/communication-common";

// Your unique Azure Communication service endpoint
const endpointUrl = '<ENDPOINT>';
const userAccessToken = '<USER_ACCESS_TOKEN>';
const tokenCredential = new AzureCommunicationTokenCredential(userAccessToken);
const chatClient = new ChatClient(endpointUrl, tokenCredential);

Créer un thread avec deux utilisateurs

Utilisez la méthode createThread pour créer un thread de conversation.

createChatThreadRequest est utilisé pour décrire la demande de thread :

  • Utilisez topic pour donner une rubrique de thread ;

createChatThreadOptions est utilisé pour définir les paramètres facultatifs pour créer le thread :

  • Utilisez participants pour répertorier les participants de conversation à ajouter au thread ;
  • Utiliser idempotencyToken pour spécifier une requête reproductible

createChatThreadResult est le résultat retourné par la création d’un thread. Il contient un chatThread qui est le thread créé, ainsi qu’une propriété errors qui contiendra des informations sur les participants non valides s’ils n’ont pas pu être ajoutés au thread.

const createChatThreadRequest = {
  topic: "Hello, World!"
};
const createChatThreadOptions = {
  participants: [
    {
      id: { communicationUserId: '<USER_ID>' },
      displayName: '<USER_DISPLAY_NAME>'
    }
  ]
};
const createChatThreadResult = await chatClient.createChatThread(
  createChatThreadRequest,
  createChatThreadOptions
);
const threadId = createChatThreadResult.chatThread.id;

Créer un ChatThreadClient

ChatThreadClient vous permet d’effectuer des opérations spécifiques à un thread de conversation, telles que la mise à jour de la rubrique de thread de conversation, l’envoi d’un message, l’ajout de participants au fil de conversation, etc.

Vous pouvez initialiser un nouveau ChatThreadClient à l’aide de la méthode getChatThreadClient de ChatClient avec un ID de thread existant :

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Envoyer un message au thread

Utilisez sendMessage méthode pour envoyer un message à un thread identifié par threadId.

sendMessageRequest est utilisé pour décrire la demande de message :

  • Utilisez content pour fournir le contenu du message de conversation ;

sendMessageOptions est utilisé pour décrire les paramètres facultatifs de l’opération :

  • Utilisez senderDisplayName pour spécifier le nom complet de l’expéditeur ;
  • Utilisez type pour spécifier le type de message, tel que « text » ou « html » ;

sendChatMessageResult est le résultat retourné par l’envoi d’un message, il contient un ID, qui est l’ID unique du message.

const sendMessageRequest =
{
  content: 'Hello Geeta! Can you share the deck for the conference?'
};
const sendMessageOptions:SendMessageOptions = {
  senderDisplayName: "Jack",
  type: "text"
};
const sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);
const messageId = sendChatMessageResult.id;

Recevoir des messages d’un thread

Avec la signalisation en temps réel, vous pouvez vous abonner pour écouter de nouveaux messages entrants et mettre à jour les messages actuels en mémoire en conséquence.


// open notifications channel
await chatClient.startRealtimeNotifications();
// subscribe to new notification
chatClient.on("chatMessageReceived", (e) => {
  console.log("Notification chatMessageReceived!");
  // your code here
});

Vous pouvez également récupérer des messages de conversation en interrogeant la méthode listMessages à intervalles spécifiés.

for await (const chatMessage of chatThreadClient.listMessages()) {
   // your code here
}

Ajouter des utilisateurs à un thread

Une fois qu’un thread est créé, vous pouvez ensuite ajouter et supprimer des utilisateurs de ce thread. En ajoutant des utilisateurs, vous leur donnez accès pour pouvoir envoyer des messages au thread. Vous devez commencer par obtenir un nouveau jeton d’accès et une identité pour cet utilisateur. L’utilisateur a besoin de ce jeton d’accès pour initialiser son client de conversation. Plus d’informations sur les jetons ici : s’authentifier auprès d’Azure Communication Services


const addParticipantsRequest =
{
  participants: [
    {
      id: { communicationUserId: '<NEW_PARTICIPANT_USER_ID>' },
      displayName: 'Jane'
    }
  ]
};

await chatThreadClient.addParticipants(addParticipantsRequest);

Supprimer des utilisateurs d’un thread

Comme ci-dessus, vous pouvez également supprimer des utilisateurs d’un thread. Pour supprimer, vous devez suivre les ID des participants que vous avez ajoutés.


await chatThreadClient.removeParticipant({ communicationUserId: '<MEMBER_ID>' });

S’abonner à l’état de connexion des notifications en temps réel

L’abonnement aux événements realTimeNotificationConnected et realTimeNotificationDisconnected vous permet de savoir quand la connexion au serveur d’appels est active.


// subscribe to realTimeNotificationConnected event
chatClient.on('realTimeNotificationConnected', () => {
  console.log("Real time notification is now connected!");
  // your code here
});

// subscribe to realTimeNotificationDisconnected event
chatClient.on('realTimeNotificationDisconnected', () => {
  console.log("Real time notification is now disconnected!");
  // your code here
});

Dépannage

Étapes suivantes

Dans ce guide de démarrage rapide, vous avez appris à :

  • Créer un client de conversation
  • Créer un thread avec 2 utilisateurs
  • Envoyer un message au thread
  • Recevoir des messages d’un thread
  • Supprimer des utilisateurs d’un thread

Contribuant

Si vous souhaitez contribuer à cette bibliothèque, lisez le guide de contribution pour en savoir plus sur la génération et le test du code.