Bagikan melalui

Pustaka klien Azure Communication Chat untuk JavaScript - versi 1.5.0

  • Artikel

Azure Communication Services untuk Obrolan 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

Memulai

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 cjs plugin.


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

Konsep utama

Percakapan obrolan diwakili oleh utas. Setiap pengguna di 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.

ChatClient

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

Membuat utas dengan dua pengguna

Gunakan metode createThread untuk membuat utas obrolan.

createChatThreadRequest digunakan untuk mendeskripsikan permintaan utas:

  • Gunakan topic untuk memberikan topik utas;

createChatThreadOptions digunakan untuk mengatur param opsional untuk membuat utas:

  • Gunakan participants untuk mencantumkan peserta obrolan untuk 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 errors properti yang akan berisi informasi tentang peserta yang tidak valid jika mereka gagal ditambahkan ke utas.

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 getChatThreadClient metode ChatClient dengan id utas yang ada:

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 'text' atau 'html' ;

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

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 di memori.


// 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 polling metode listMessages pada interval tertentu.

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 mulai dengan mendapatkan token akses dan identitas baru untuk pengguna tersebut. Pengguna akan membutuhkan token akses tersebut untuk menginisialisasi klien obrolan mereka. Informasi selengkapnya tentang token di sini: Mengautentikasi ke Azure Communication Services


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.


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.


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

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.