Delen via

Azure Communication Chat-clientbibliotheek voor JavaScript - versie 1.5.4

  • 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.

Meer informatie over Azure Communication Services hier

Slag

Voorwaarden

Installeren

npm install @azure/communication-chat

Browserondersteuning

JavaScript-bundel

Als u deze clientbibliotheek in de browser wilt gebruiken, moet u eerst een bundelaar gebruiken. Raadpleeg onze bundeldocumentatievoor meer informatie over hoe u dit doet. Voeg in rollup.config.jsde volgende aangepaste naamexports toe in cjs-invoegtoepassing.


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

Sleutelbegrippen

Een chatgesprek wordt vertegenwoordigd door een thread. Elke gebruiker in de thread wordt een chatdeelnemer genoemd. Chatdeelnemers kunnen privé met elkaar chatten in een chatsessie van 1:1 of in een groepschat van 1:N. 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 om het bericht en de chatdeelnemers in de chatthread uit te voeren.

Voorbeelden

ChatClient initialiseren

Gebruik de resource-URL en het toegangstoken voor gebruikers 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 thread maken met twee gebruikers

Gebruik de methode createThread om een chatthread te maken.

createChatThreadRequest wordt gebruikt om de threadaanvraag te beschrijven:

  • Gebruik topic om een threadonderwerp te geven;

createChatThreadOptions wordt gebruikt om de optionele parameters 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 wordt het resultaat geretourneerd van het maken van een thread. Het bevat een chatThread de thread die is gemaakt, evenals een errors eigenschap die informatie over ongeldige deelnemers bevat als ze niet aan de thread konden 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 chat-thread bijwerken, een bericht verzenden, deelnemers toevoegen aan de chat-thread, 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 verzenden naar de thread

Gebruik sendMessage 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 parameters van de bewerking 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 het resultaat is dat wordt geretourneerd van het verzenden van een bericht, bevat het een id. Dit is 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 ontvangen van een thread

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


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

U kunt ook chatberichten ophalen door de methode listMessages te peilen met opgegeven intervallen.

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

Gebruikers toevoegen aan een thread

Zodra een thread is gemaakt, kunt u vervolgens gebruikers toevoegen aan en verwijderen uit die thread. Door gebruikers toe te voegen, geeft u hen 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 de chatclient te initialiseren. Meer informatie over tokens hier: 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 thread

Net als hierboven kunt u gebruikers ook verwijderen uit een thread. 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

Met een abonnement op gebeurtenissen realTimeNotificationConnected en realTimeNotificationDisconnected kunt u weten wanneer de verbinding met de aanroepserver 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
});

Probleemoplossing

Volgende stappen

In deze quickstart hebt u het volgende geleerd:

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

Bijdragen

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