Share via

Bibliothèque cliente Azure Communication Chat pour JavaScript - version 1.5.0

  • Article

Azure Communication Services pour 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, ainsi que pour envoyer et recevoir des messages de conversation.

En savoir plus sur Azure Communication Services ici

Prise en main

Prérequis

Installation de

npm install @azure/communication-chat

Prise en charge des navigateurs

Ensemble JavaScript

Pour utiliser cette bibliothèque cliente dans le navigateur, vous devez d’abord utiliser un bundler. Pour plus d’informations sur la façon de procéder, reportez-vous à notre documentation sur le regroupement. Dans rollup.config.js, ajoutez les exportations de noms personnalisées suivantes dans le 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 1 :1 ou se blottir dans une conversation de groupe 1 :N. Les utilisateurs obtiennent également des mises à jour en quasi-temps réel pour le moment où d’autres frappent 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 de message et de participants à la conversation dans le 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 fil avec deux utilisateurs

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

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

  • Utilisez topic pour donner une rubrique de thread ;

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

  • Permet participants de répertorier les participants à la 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 fil de conversation. Il contient un chatThread qui est le thread qui a été créé, ainsi qu’une errors propriété 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, comme mettre à jour la rubrique du fil de conversation, envoyer un message, ajouter des participants au fil de conversation, etc.

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

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Envoyer un message au fil

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

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

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

sendMessageOptions sert à décrire les paramètres facultatifs de l’opération :

  • Utilisez senderDisplayName pour spécifier le nom d’affichage de l’expéditeur ;
  • Utilisez type pour spécifier le type de message, par exemple « 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 fil

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


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

Vous pouvez aussi récupérer les messages de conversation en interrogeant la méthode listMessages selon des intervalles définis.

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

Ajouter des utilisateurs à un thread

Une fois qu’un thread est créé, vous pouvez 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 nouvelle identité pour cet utilisateur. L’utilisateur aura besoin de ce jeton d’accès pour initialiser son client de conversation. Plus d’informations sur les jetons ici : S’authentifier auprès de Azure Communication Services


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

await chatThreadClient.addParticipants(addParticipantsRequest);

Supprimer des utilisateurs d’un fil

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 la 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 découvert comment :

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

Contribution

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.