Dela via

Azure Communication Chat-klientbibliotek för JavaScript – version 1.5.3

  • Artikel

Med Azure Communication Services for Chat kan utvecklare lägga till chattfunktioner i sin app. Använd det här klientbiblioteket för att hantera chatttrådar och deras användare och skicka och ta emot chattmeddelanden.

Läs mer om Azure Communication Services här

Komma igång

Förutsättningar

Installera

npm install @azure/communication-chat

Stöd för webbläsare

JavaScript-paket

Om du vill använda det här klientbiblioteket i webbläsaren måste du först använda en bundler. Mer information om hur du gör detta finns i vår paketeringsdokumentation. I rollup.config.jslägger du till följande anpassade namnexporter i cjs plugin-program.


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

Viktiga begrepp

En chattkonversation representeras av en tråd. Varje användare i tråden kallas för chattdeltagare. Chattdeltagare kan chatta med varandra privat i en 1:1-chatt eller samlas i en 1:N-gruppchatt. Användarna får också uppdateringar nästan i realtid för när andra skriver och när de har läst meddelandena.

ChatClient

ChatClient är det primära gränssnittet för utvecklare som använder det här klientbiblioteket. Den innehåller asynkrona metoder för att skapa och ta bort en tråd.

ChatThreadClient

ChatThreadClient tillhandahåller asynkrona metoder för att utföra åtgärderna för meddelande- och chattdeltagare i chatttråden.

Exempel

Initiera ChatClient

Använd resurs-URL och användaråtkomsttoken för att initiera chattklienten.

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

Skapa en tråd med två användare

Använd metoden createThread för att skapa en chatttråd.

createChatThreadRequest används för att beskriva trådbegäran:

  • Använd topic för att ge ett trådämne;

createChatThreadOptions används för att ange valfria params för att skapa tråden:

  • Använd participants för att visa en lista över chattdeltagarna som ska läggas till i tråden.
  • Använd idempotencyToken för att ange en upprepningsbar begäran

createChatThreadResult returneras resultatet från skapandet av en tråd. Den innehåller en chatThread som är tråden som skapades, samt en errors egenskap som innehåller information om ogiltiga deltagare om de inte kunde läggas till i tråden.

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;

Skapa en ChatThreadClient

Med ChatThreadClient kan du utföra åtgärder som är specifika för en chatttråd, till exempel uppdatera chatttrådsämnet, skicka ett meddelande, lägga till deltagare i chatttråden osv.

Du kan initiera en ny ChatThreadClient med hjälp av getChatThreadClient-metoden för ChatClient med ett befintligt tråd-ID:

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Skicka ett meddelande till tråden

Använd sendMessage metod för att skicka ett meddelande till en tråd som identifieras av threadId.

sendMessageRequest används för att beskriva meddelandebegäran:

  • Använd content för att ange innehållet i chattmeddelandet.

sendMessageOptions används för att beskriva åtgärdens valfria params:

  • Använd senderDisplayName för att ange avsändarens visningsnamn.
  • Använd type för att ange meddelandetypen, till exempel "text" eller "html" ;

sendChatMessageResult är resultatet som returneras från att skicka ett meddelande innehåller det ett ID, vilket är meddelandets unika ID.

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;

Ta emot meddelanden från en tråd

Med realtidssignalering kan du prenumerera på att lyssna efter nya inkommande meddelanden och uppdatera de aktuella meddelandena i minnet i enlighet med detta.


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

Du kan också hämta chattmeddelanden genom att avsöka metoden listMessages med angivna intervall.

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

Lägga till användare i en tråd

När en tråd har skapats kan du sedan lägga till och ta bort användare från den tråden. Genom att lägga till användare ger du dem åtkomst för att kunna skicka meddelanden till tråden. Du måste börja med att hämta en ny åtkomsttoken och identitet för den användaren. Användaren behöver den åtkomsttoken för att initiera chattklienten. Mer information om token här: Autentisera till Azure Communication Services


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

await chatThreadClient.addParticipants(addParticipantsRequest);

Ta bort användare från en tråd

På samma sätt som ovan kan du också ta bort användare från en tråd. För att kunna ta bort måste du spåra ID:t för de deltagare som du har lagt till.


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

Prenumerera på anslutningsstatus för realtidsmeddelanden

Med prenumeration på händelser realTimeNotificationConnected och realTimeNotificationDisconnected kan du veta när anslutningen till anropsservern är aktiv.


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

Felsökning

Nästa steg

I den här snabbstarten lärde du dig att:

  • Skapa en chattklient
  • Skapa en tråd med 2 användare
  • Skicka ett meddelande till tråden
  • Ta emot meddelanden från en tråd
  • Ta bort användare från en tråd

Bidragande

Om du vill bidra till det här biblioteket kan du läsa bidragsguide för att lära dig mer om hur du skapar och testar koden.