Megosztás a következőn keresztül:


Azure Communication Chat JavaScript-ügyféloldali kódtár – 1.6.0-s verzió

Az Azure Communication Services for Chat lehetővé teszi a fejlesztők számára a csevegési képességek hozzáadását az alkalmazásukhoz. Ezzel az ügyféloldali kódtárral kezelheti a csevegési szálakat és a felhasználókat, valamint csevegőüzeneteket küldhet és fogadhat.

További információ az Azure Communication Services itt

Kezdetekhez

Előfeltételek

Telepítése

npm install @azure/communication-chat

Böngészőtámogatás

JavaScript-csomag

Ahhoz, hogy ezt az ügyfélkódtárat a böngészőben használhassa, először egy kötegelőt kell használnia. Ennek módjáról további információt a csomagküldő dokumentációbantalál. A rollup.config.jsadja hozzá a következő testreszabott névexportálásokat cjs beépülő modulban.


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

Főbb fogalmak

A csevegést egy szál képviseli. A szál minden felhasználója csevegő résztvevő. A csevegés résztvevői privát csevegést végezhetnek egy 1:1-s csevegésben, vagy egy 1:N csoportos csevegésben. A felhasználók közel valós idejű frissítéseket kapnak arról is, hogy mások mikor gépelnek, és mikor olvasták az üzeneteket.

ChatKliens

ChatClient az ügyfélkódtárat használó fejlesztők elsődleges felülete. Aszinkron metódusokat biztosít egy szál létrehozásához és törléséhez.

ChatThreadClient

ChatThreadClient aszinkron metódusokat biztosít az üzenet és a csevegés résztvevőinek a csevegési szálon belüli műveleteihez.

Példák

A ChatClient inicializálása

A csevegőügyfél inicializálásához használja az erőforrás URL-címét és a felhasználói hozzáférési jogkivonatot.

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

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

Szál létrehozása két felhasználóval

Csevegési szál létrehozásához használja a createThread metódust.

createChatThreadRequest a szálkérelem leírására szolgál:

  • Tématéma topic használata;

createChatThreadOptions a választható paramok beállítására szolgál a szál létrehozásához:

  • A participants használatával listázhatja a csevegés résztvevőit, hogy hozzáadják a szálhoz;
  • Ismétlődő kérés megadása a idempotencyToken használatával

createChatThreadResult egy szál létrehozásának eredménye. Tartalmaz egy chatThread, amely a létrehozott szál, valamint egy errors tulajdonságot, amely információkat tartalmaz az érvénytelen résztvevőkről, ha nem adták hozzá őket a szálhoz.

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

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

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;

ChatThreadClient létrehozása

A ChatThreadClient lehetővé teszi a csevegési szálra vonatkozó műveletek végrehajtását, például a csevegési téma frissítését, üzenet küldését, résztvevők hozzáadását a csevegési szálhoz stb.

Az új ChatThreadClient inicializálásához használja a ChatClient getChatThreadClient metódusát egy meglévő szálazonosítóval:

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

Üzenet küldése a szálnak

A sendMessage metódussal üzenetet küldhet a threadId által azonosított szálnak.

sendMessageRequest az üzenetkérelem leírására szolgál:

  • A content használatával adja meg a csevegőüzenet tartalmát;

sendMessageOptions a művelet választható paramjeinek leírására szolgál:

  • A senderDisplayName használatával adja meg a feladó megjelenítendő nevét;
  • A type használatával adja meg az üzenet típusát, például "szöveg" vagy "html" ;

sendChatMessageResult az üzenet küldésével visszaadott eredmény, amely egy azonosítót tartalmaz, amely az üzenet egyedi azonosítója.

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

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;

Üzenetek fogadása egy szálról

Valós idejű jelzéssel előfizethet az új bejövő üzenetek figyelésére, és ennek megfelelően frissítheti az aktuális üzeneteket a memóriában.

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

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

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

Másik lehetőségként lekérheti a csevegőüzeneteket a listMessages metódus meghatározott időközönként történő lekérdezésével.

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

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

Felhasználók hozzáadása szálhoz

Miután létrehozott egy szálat, hozzáadhat és eltávolíthat felhasználókat ebből a szálból. Felhasználók hozzáadásával hozzáférést ad nekik ahhoz, hogy üzeneteket tudjanak küldeni a szálra. Először le kell kérnie egy új hozzáférési jogkivonatot és identitást az adott felhasználóhoz. A felhasználónak szüksége lesz erre a hozzáférési jogkivonatra a csevegőügyfél inicializálásához. További információ a jogkivonatokról: Hitelesítés az Azure Communication Services

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

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

await chatThreadClient.addParticipants(addParticipantsRequest);

Felhasználók eltávolítása egy szálból

A fentiekhez hasonlóan a felhasználókat is eltávolíthatja egy szálból. Az eltávolításhoz nyomon kell követnie a hozzáadott résztvevők azonosítóit.

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

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

Feliratkozás valós idejű értesítések kapcsolati állapotára

Az eseményekre való előfizetés realTimeNotificationConnected és realTimeNotificationDisconnected lehetővé teszi, hogy megtudja, mikor aktív a kapcsolat a híváskiszolgálóval.

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

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

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

Hibaelhárítás

Fakitermelés

A naplózás engedélyezése segíthet a hibákról szóló hasznos információk feltárásában. A HTTP-kérések és válaszok naplójának megtekintéséhez állítsa a környezeti változót a AZURE_LOG_LEVEL következőre info: . Alternatívaként a naplózás futásidőben is engedélyezhető a setLogLevel hívásával a @azure/logger.

import { setLogLevel } from "@azure/logger";

setLogLevel("info");

Következő lépések

Ebben a rövid útmutatóban megtanulta, hogyan:

  • Csevegőügyfél létrehozása
  • Szál létrehozása 2 felhasználóval
  • Üzenet küldése a szálnak
  • Üzenetek fogadása egy szálról
  • Felhasználók eltávolítása egy szálból

Hozzájárulás

Ha hozzá szeretne járulni ehhez a kódtárhoz, olvassa el a közreműködői útmutatót, amelyből többet is megtudhat a kód összeállításáról és teszteléséről.