Delen via

Azure Communication Chat-clientbibliotheek voor JavaScript - versie 1.5.0

  • Artikel

met Azure Communication Services voor chat kunnen ontwikkelaars chatmogelijkheden toevoegen aan hun app. Gebruik deze clientbibliotheek om chatthreads en hun gebruikers te beheren en chatberichten te verzenden en te ontvangen.

Lees hier meer over Azure Communication Services

Aan de slag

Vereisten

Installeren

npm install @azure/communication-chat

Browserondersteuning

JavaScript-bundel

Als u deze clientbibliotheek in de browser wilt gebruiken, moet u eerst een bundler gebruiken. Raadpleeg onze bundeldocumentatie voor meer informatie over hoe u dit doet. Voeg rollup.config.jsin de volgende aangepaste naamexports toe in cjs de invoegtoepassing.


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

Belangrijkste concepten

Een chatgesprek wordt vertegenwoordigd door een thread. Elke gebruiker in de thread wordt een chatdeelnemer genoemd. Chatdeelnemers kunnen privé met elkaar chatten in een 1:1-chat of in een 1:N-groepschat. Gebruikers krijgen ook bijna realtime updates voor wanneer anderen typen en wanneer ze de berichten hebben gelezen.

ChatClient

ChatClient is de primaire interface voor ontwikkelaars die deze clientbibliotheek gebruiken. Het biedt asynchrone methoden voor het maken en verwijderen van een thread.

ChatThreadClient

ChatThreadClient biedt asynchrone methoden voor het uitvoeren van de bewerkingen van bericht- en chatdeelnemers binnen de chat-thread.

Voorbeelden

ChatClient initialiseren

Gebruik resource-URL en gebruikerstoegangstoken om de chatclient te initialiseren.

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);

Een gesprek met twee gebruikers maken

Gebruik de methode createThread om een chat-thread te maken.

createChatThreadRequest wordt gebruikt om de thread-aanvraag te beschrijven:

  • Gebruik topic om een threadonderwerp te geven;

createChatThreadOptions wordt gebruikt om de optionele params in te stellen om de thread te maken:

  • Gebruik participants om de chatdeelnemers weer te geven die aan de thread moeten worden toegevoegd;
  • Gebruik idempotencyToken om een herhaalbare aanvraag op te geven

createChatThreadResult is het resultaat dat wordt geretourneerd door het maken van een thread. Het bevat een chatThread die de thread is die is gemaakt, evenals een errors eigenschap die informatie bevat over ongeldige deelnemers als ze niet aan de thread kunnen worden toegevoegd.

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;

Een ChatThreadClient maken

Met De ChatThreadClient kunt u bewerkingen uitvoeren die specifiek zijn voor een chatgesprek, zoals het onderwerp van de chatthread bijwerken, een bericht verzenden, deelnemers toevoegen aan de chatthread, enzovoort.

U kunt een nieuwe ChatThreadClient initialiseren met behulp van de getChatThreadClient methode van de ChatClient met een bestaande thread-id:

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Een bericht naar een gesprek verzenden

Gebruik sendMessage de methode om een bericht te verzenden naar een thread die wordt geïdentificeerd door threadId.

sendMessageRequest wordt gebruikt om de berichtaanvraag te beschrijven:

  • Gebruik content om de inhoud van het chatbericht op te geven;

sendMessageOptions wordt gebruikt om de optionele bewerkingsparameters te beschrijven:

  • Gebruik senderDisplayName om de weergavenaam van de afzender op te geven.
  • Gebruik type om het berichttype op te geven, zoals 'tekst' of 'html';

sendChatMessageResult is het resultaat dat wordt geretourneerd door het verzenden van een bericht, het bevat een id, de unieke id van het bericht.

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;

Berichten van een gesprek ontvangen

Met realtime signalering kunt u zich abonneren om te luisteren naar nieuwe inkomende berichten en de huidige berichten dienovereenkomstig bij te werken in het geheugen.


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

U kunt chatberichten ook ophalen door de methode listMessages op opgegeven intervallen te pollen.

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

Gebruikers toevoegen aan een thread

Zodra een thread is gemaakt, kunt u gebruikers toevoegen aan en verwijderen uit die thread. Door gebruikers toe te voegen, geeft u ze toegang om berichten naar de thread te kunnen verzenden. U moet beginnen met het ophalen van een nieuw toegangstoken en een nieuwe identiteit voor die gebruiker. De gebruiker heeft dat toegangstoken nodig om zijn chat-client te initialiseren. Meer informatie over tokens: Verifiëren bij Azure Communication Services


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

await chatThreadClient.addParticipants(addParticipantsRequest);

Gebruikers verwijderen uit een gesprek

Net als hierboven kunt u ook gebruikers uit een thread verwijderen. Als u wilt verwijderen, moet u de id's bijhouden van de deelnemers die u hebt toegevoegd.


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

Abonneren op de verbindingsstatus van realtime meldingen

Abonnement op gebeurtenissen realTimeNotificationConnected en realTimeNotificationDisconnected stelt u in staat om te weten wanneer de verbinding met de oproepserver actief is.


// 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
});

Problemen oplossen

Volgende stappen

In deze quickstart hebt u de volgende zaken geleerd:

  • Een chatruimte maken
  • Een thread maken met 2 gebruikers
  • Een bericht naar een gesprek verzenden
  • Berichten van een gesprek ontvangen
  • Gebruikers verwijderen uit een gesprek

Bijdragen

Als u een bijdrage wilt leveren aan deze bibliotheek, leest u de handleiding voor bijdragen voor meer informatie over het bouwen en testen van de code.