Bagikan melalui

Mulai dengan contoh pahlawan chat

Penting

Sampel ini tersedia di GitHub.

Sampel Hero Obrolan Grup Azure Communication Services menunjukkan bagaimana Anda dapat menggunakan SDK Web Obrolan Communication Services untuk membangun pengalaman obrolan grup.

Artikel ini menjelaskan cara kerja sampel sebelum kami menjalankan sampel di komputer lokal Anda. Kami kemudian menyebarkan sampel ke Azure menggunakan sumber daya Azure Communication Services Anda sendiri.

Gambaran Umum

Sampel ini memiliki aplikasi sisi klien dan aplikasi sisi server. Aplikasi sisi klien adalah aplikasi web React/Redux yang menggunakan kerangka kerja UI Fasih Microsoft. Aplikasi ini mengirimkan permintaan ke aplikasi sisi server Node.js yang membantu aplikasi sisi klien terhubung ke Azure.

Berikut tampilan sampelnya:

Cuplikan layar memperlihatkan halaman arahan aplikasi sampel.

Saat Anda menekan Mulai Obrolan, aplikasi web mengambil token akses pengguna dari aplikasi sisi server. Gunakan token ini untuk menyambungkan aplikasi klien ke Azure Communication Services. Setelah token diambil, sistem meminta Anda untuk memasukkan nama Anda dan memilih emoji untuk mewakili Anda dalam obrolan.

Cuplikan layar memperlihatkan layar prechat aplikasi.

Setelah mengonfigurasi nama tampilan dan emoji, Anda dapat bergabung dengan sesi obrolan. Sekarang Anda melihat kanvas obrolan utama tempat pengalaman obrolan inti berada.

Cuplikan layar memperlihatkan layar utama aplikasi sampel.

Komponen layar obrolan utama:

  • Area Obrolan Utama: Pengalaman obrolan inti di mana pengguna dapat mengirim dan menerima pesan. Untuk mengirim pesan, Anda dapat menggunakan area input dan menekan Enter (atau menggunakan tombol kirim). Layar obrolan mengatur pesan obrolan yang diterima oleh pengirim dengan nama dan emoji yang benar. Anda melihat dua jenis pemberitahuan di area obrolan: 1) mengetik pemberitahuan saat pengguna mengetik dan 2) mengirim dan membaca pemberitahuan untuk pesan.
  • Header: Tempat pengguna melihat judul utas obrolan serta kontrol untuk mengaktifkan atau menonaktifkan bilah sisi peserta dan pengaturan, dan tombol tinggalkan untuk keluar dari sesi obrolan.
  • Bilah Sisi: Di mana peserta dan informasi tentang pengaturan ditampilkan saat beralih menggunakan kontrol di header. Bilah samping peserta berisi daftar peserta dalam obrolan dan tautan untuk mengundang peserta ke sesi obrolan. Bilah samping pengaturan memungkinkan Anda mengonfigurasi judul utas obrolan.

Selesaikan prasyarat dan langkah-langkah berikut untuk menyiapkan sampel.

Prasyarat

Sebelum menjalankan sampel untuk pertama kalinya

  1. Buka instans PowerShell, Terminal Windows, Prompt Perintah, atau yang setara dan navigasikan ke direktori tempat Anda ingin mengkloning sampel.

  2. Kloning repositori menggunakan string CLI berikut:

    git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git

    Atau kloning repositori menggunakan metode apa pun yang dijelaskan dalam Mengkloning repositori Git yang ada.

  3. Dapatkan Connection String dan Endpoint URL dari portal Azure atau dengan menggunakan Azure CLI.

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"

    Untuk informasi selengkapnya tentang string koneksi, lihat Membuat sumber daya Azure Communication Services

  4. Setelah Anda mendapatkan Connection String, Tambahkan string koneksi ke file Server/appsettings.json yang ditemukan di bawah folder Obrolan. Masukkan string koneksi Anda dalam variabel: ResourceConnectionString.

  5. Setelah Anda mendapatkan Endpoint, tambahkan string titik akhir ke file Server/appsetting.json . Masukkan titik akhir Anda dalam variabel: EndpointUrl.

  6. Dapatkan identity dari portal Microsoft Azure. Pilih Identitas & Token Akses Pengguna di portal Microsoft Azure. Buat pengguna dengan cakupan Chat.

  7. Setelah Anda mendapatkan identity string, tambahkan string identitas ke file Server/appsetting.json . Masukkan string identitas Anda dalam variabel: AdminUserId. Server tersebut menggunakan string untuk menambahkan pengguna baru ke utas obrolan.

Jalankan secara lokal

  1. Atur string koneksi Anda di Server/appsettings.json
  2. Atur string URL titik akhir Anda di Server/appsettings.json
  3. Atur string adminUserId Anda di Server/appsettings.json
  4. npm run setup dari direktori root
  5. npm run start dari direktori root

Anda dapat menguji sampel secara lokal dengan membuka beberapa sesi browser dengan URL obrolan Anda untuk mensimulasikan obrolan multi-pengguna.

Menerbitkan sampel ke Azure

  1. Di bawah direktori akar, jalankan perintah ini:

    npm run setup
npm run build
npm run package

  2. Gunakan ekstensi Azure dan terapkan direktori Chat/dist ke layanan aplikasi Anda

Membersihkan sumber daya

Jika ingin membersihkan dan menghapus langganan Azure Communication Services, Anda bisa menghapus sumber daya atau grup sumber daya. Menghapus grup sumber daya juga menghapus sumber daya apa pun yang terkait dengannya. Pelajari selengkapnya tentang membersihkan sumber daya.

Langkah berikutnya

Unduh sampel dari GitHub

Untuk informasi selengkapnya, lihat:

  • Sampel - Temukan lebih banyak sampel dan contoh di halaman gambaran umum sampel kami.
  • Redux - Manajemen status sisi klien
  • FluentUI - Pustaka UI yang didukung Microsoft
  • React - Pustaka untuk membangun antarmuka pengguna
  • Last updated on