Bagikan melalui

Pustaka klien Azure Communication Chat untuk JavaScript - versi 1.6.0

Azure Communication Services for Chat memungkinkan pengembang menambahkan kemampuan obrolan ke aplikasi mereka. Gunakan pustaka klien ini untuk mengelola utas obrolan dan pengguna mereka, serta mengirim dan menerima pesan obrolan.

Baca selengkapnya tentang Azure Communication Services di sini

Persiapan

Prasyarat

Menginstal

npm install @azure/communication-chat

Dukungan browser

Bundel JavaScript

Untuk menggunakan pustaka klien ini di browser, pertama-tama Anda perlu menggunakan bunder. Untuk detail tentang cara melakukan ini, silakan lihat dokumentasi bundling kami. Di rollup.config.js, tambahkan ekspor nama yang disesuaikan berikut di plugin cjs.


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

Konsep utama

Percakapan obrolan diwakili oleh utas. Setiap pengguna dalam utas disebut peserta obrolan. Peserta obrolan dapat mengobrol satu sama lain secara pribadi dalam obrolan 1:1 atau berkumpul di obrolan grup 1:N. Pengguna juga mendapatkan pembaruan hampir real time ketika orang lain mengetik dan ketika mereka telah membaca pesan.

Klien Obrolan

ChatClient adalah antarmuka utama untuk pengembang yang menggunakan pustaka klien ini. Ini menyediakan metode asinkron untuk membuat dan menghapus utas.

ChatThreadClient

ChatThreadClient menyediakan metode asinkron untuk melakukan operasi peserta pesan dan obrolan dalam utas obrolan.

Contoh

Menginisialisasi ChatClient

Gunakan url sumber daya dan token akses pengguna untuk menginisialisasi klien obrolan.

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

Membuat utas dengan dua pengguna

Gunakan metode createThread untuk membuat utas obrolan.

createChatThreadRequest digunakan untuk menjelaskan permintaan utas:

  • Gunakan topic untuk memberikan topik utas;

createChatThreadOptions digunakan untuk mengatur param opsional untuk membuat utas:

  • Gunakan participants untuk mencantumkan peserta obrolan yang akan ditambahkan ke utas;
  • Gunakan idempotencyToken untuk menentukan permintaan yang dapat diulang

createChatThreadResult adalah hasil yang dikembalikan dari pembuatan utas. Ini berisi chatThread yang merupakan utas yang dibuat, serta properti errors yang akan berisi informasi tentang peserta yang tidak valid jika mereka gagal ditambahkan ke utas.

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;

Membuat ChatThreadClient

ChatThreadClient akan memungkinkan Anda melakukan operasi khusus untuk utas obrolan, seperti memperbarui topik utas obrolan, mengirim pesan, menambahkan peserta ke utas obrolan, dll.

Anda dapat menginisialisasi ChatThreadClient baru menggunakan metode getChatThreadClient ChatClient dengan id utas yang ada:

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

Mengirim pesan ke utas

Gunakan metode sendMessage untuk mengirim pesan ke utas yang diidentifikasi oleh threadId.

sendMessageRequest digunakan untuk menjelaskan permintaan pesan:

  • Gunakan content untuk menyediakan konten pesan obrolan;

sendMessageOptions digunakan untuk menjelaskan param opsional operasi:

  • Gunakan senderDisplayName untuk menentukan nama tampilan pengirim;
  • Gunakan type untuk menentukan jenis pesan, seperti 'teks' atau 'html' ;

sendChatMessageResult adalah hasil yang dikembalikan dari pengiriman pesan, berisi ID, yang merupakan ID unik pesan.

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;

Menerima pesan dari utas

Dengan sinyal real-time, Anda dapat berlangganan untuk mendengarkan pesan masuk baru dan memperbarui pesan saat ini dalam memori yang sesuai.

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

Atau Anda dapat mengambil pesan obrolan dengan melakukan polling metode listMessages pada interval yang ditentukan.

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
}

Menambahkan Pengguna ke utas

Setelah utas dibuat, Anda kemudian dapat menambahkan dan menghapus pengguna dari utas tersebut. Dengan menambahkan pengguna, Anda memberi mereka akses untuk dapat mengirim pesan ke utas. Anda harus memulai dengan mendapatkan token akses dan identitas baru untuk pengguna tersebut. Pengguna akan memerlukan token akses tersebut untuk menginisialisasi klien obrolan mereka. Informasi selengkapnya tentang token di sini: Mengautentikasi ke 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);

Menghapus Pengguna dari utas

Mirip dengan di atas, Anda juga dapat menghapus pengguna dari utas. Untuk menghapus, Anda harus melacak ID peserta yang telah Anda tambahkan.

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

Berlangganan status koneksi pemberitahuan real time

Berlangganan peristiwa realTimeNotificationConnected dan realTimeNotificationDisconnected memungkinkan Anda mengetahui kapan koneksi ke server panggilan aktif.

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

Pemecahan masalah

Penebangan kayu

Mengaktifkan pengelogan dapat membantu menemukan informasi yang berguna tentang kegagalan. Untuk melihat log permintaan dan respons HTTP, atur variabel lingkungan AZURE_LOG_LEVEL ke info. Atau, pengelogan dapat diaktifkan saat runtime dengan memanggil setLogLevel di @azure/logger:

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

setLogLevel("info");

Langkah berikutnya

Dalam mulai cepat ini, Anda mempelajari cara:

  • Membuat klien obrolan
  • Membuat utas dengan 2 pengguna
  • Mengirim pesan ke utas
  • Menerima pesan dari utas
  • Menghapus Pengguna dari utas

Berkontribusi

Jika Anda ingin berkontribusi pada pustaka ini, baca panduan berkontribusi untuk mempelajari selengkapnya tentang cara membuat dan menguji kode.

  • Last updated on