Mulai menggunakan sampel hero obrolan

  • Artikel

Penting

Sampel ini tersedia di GitHub.

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

Dalam Mulai cepat Sampel ini, kami mempelajari 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 antarmuka pengguna Fluent Microsoft. Aplikasi ini mengirim permintaan ke aplikasi sisi server Node.js yang membantu aplikasi sisi klien terhubung ke Azure.

Berikut tampilan sampelnya:

Cuplikan layar menunjukkan halaman arahan aplikasi sampel.

Saat Anda menekan Mulai Obrolan, aplikasi web mengambil token akses pengguna dari aplikasi sisi server. Anda kemudian menggunakan 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 menunjukkan layar pra-obrolan aplikasi.

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

Cuplikan layar yang menampilkan layar utama aplikasi contoh.

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). Pesan obrolan yang diterima diatur 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: Di mana pengguna melihat judul utas obrolan dan kontrol untuk mengalihkan bilah sisi peserta dan pengaturan, dan tombol tinggalkan untuk keluar dari sesi obrolan.
  • Bilah Sisi: Di mana peserta dan pengaturan informasi 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. Connection String Dapatkan 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 Azure. Buat pengguna dengan Chat cakupan.

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

Eksekusi lokal

  1. Atur string koneksi Anda diServer/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 akar
  5. npm run start dari direktori akar

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
  1. Menggunakan ekstensi Azure dan menyebarkan direktori Obrolan/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 lebih lanjut, baca artikel berikut:

  • 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