Sohbet hero örneğini kullanmaya başlama

  • Makale

Önemli

Bu örnek GitHub'da kullanılabilir.

Azure İletişim Hizmetleri Grup Sohbeti Hero Örneği, İletişim Hizmetleri Sohbet Web SDK'sının grup sohbeti deneyimi oluşturmak için nasıl kullanılabileceğini gösterir.

Bu Örnek hızlı başlangıcında, örneği yerel makinenizde çalıştırmadan önce örneğin nasıl çalıştığını öğreneceksiniz. Ardından kendi Azure İletişim Hizmetleri kaynaklarınızı kullanarak örneği Azure'a dağıtıyoruz.

Genel bakış

Örnekte hem istemci tarafı uygulaması hem de sunucu tarafı uygulaması vardır. İstemci tarafı uygulaması , Microsoft'un Fluent UI çerçevesini kullanan bir React/Redux web uygulamasıdır. Bu uygulama, istemci tarafı uygulamasının Azure'a bağlanmasına yardımcı olan bir Node.js sunucu tarafı uygulamasına istekler gönderir.

Örnek şöyle görünür:

Örnek uygulamanın giriş sayfasını gösteren ekran görüntüsü.

Sohbet Başlat'a bastığınızda, web uygulaması sunucu tarafı uygulamasından bir kullanıcı erişim belirteci getirir. Ardından bu belirteci istemci uygulamasını Azure İletişim Hizmetleri bağlamak için kullanırsınız. Belirteç alındıktan sonra sistem adınızı girmenizi ve sizi sohbette temsil etmek için bir emoji seçmenizi ister.

Uygulamanın sohbet öncesi ekranını gösteren ekran görüntüsü.

Görünen adınızı ve emojinizi yapılandırdıktan sonra sohbet oturumuna katılabilirsiniz. Artık çekirdek sohbet deneyiminin bulunduğu ana sohbet tuvalini görürsünüz.

Örnek uygulamanın ana ekranını gösteren ekran görüntüsü.

Ana sohbet ekranının bileşenleri:

  • Ana Sohbet Alanı: Kullanıcıların ileti gönderip alabildiği temel sohbet deneyimi. İleti göndermek için giriş alanını kullanabilir ve Enter tuşuna basabilirsiniz (veya gönder düğmesini kullanabilirsiniz). Alınan sohbet iletileri gönderene göre doğru ad ve emojiyle düzenlenir. Sohbet alanında iki tür bildirim görürsünüz: 1) kullanıcı yazarken bildirim yazma ve 2) iletiler için bildirimler gönderip okuma.
  • Üst bilgi: Kullanıcının sohbet yazışmasının başlığını ve katılımcı ile ayarların yan çubuklarını değiştirme denetimlerini ve sohbet oturumundan çıkmak için bir bırak düğmesini gördüğü yer.
  • Yan Çubuk: Üst bilgideki denetimler kullanılarak geçiş yapıldığında katılımcıların ve ayar bilgilerinin görüntülendiği yer. Katılımcılar yan çubuğunda sohbetteki katılımcıların listesi ve katılımcıları sohbet oturumuna davet etmek için bir bağlantı bulunur. Ayarlar yan çubuğu sohbet yazışması başlığını yapılandırmanızı sağlar.

Örneği ayarlamak için aşağıdaki önkoşulları ve adımları tamamlayın.

Önkoşullar

Örneği ilk kez çalıştırmadan önce

  1. PowerShell, Windows Terminal, Komut İstemi veya eşdeğer bir örneği açın ve örneği kopyalamak istediğiniz dizine gidin.

  2. Aşağıdaki CLI dizesini kullanarak depoyu kopyalayın:

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

    Veya Mevcut Git deposunu kopyalama bölümünde açıklanan herhangi bir yöntemi kullanarak depoyu kopyalayın.

  3. Connection String Azure portalından veya Azure CLI kullanarak ve Endpoint URL alın.

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

    bağlantı dizesi hakkında daha fazla bilgi için bkz. Azure İletişim Hizmetleri kaynakları oluşturma

  4. öğesini aldıktan Connection Stringsonra, sohbet klasörünün altında bulunan Sunucu/appsettings.json dosyasına bağlantı dizesi ekleyin. bağlantı dizesi şu değişkene giriş: ResourceConnectionString.

  5. öğesini aldıktan Endpointsonra uç nokta dizesini Sunucu/appsetting.json dosyasına ekleyin. Uç noktanızı değişkenine girin: EndpointUrl.

  6. identity Azure portalından alın. Azure portalında Kimlikler ve Kullanıcı Erişim Belirteçleri'ni seçin. Kapsamı olan Chat bir kullanıcı oluşturun.

  7. Dizeyi identity aldıktan sonra, kimlik dizesini Sunucu/appsetting.json dosyasına ekleyin. Kimlik dizenizi değişkenine yazın: AdminUserId. Bu, sohbet yazışmasına yeni kullanıcılar ekleyecek sunucu kullanıcısıdır.

Yerel çalıştırma

  1. bağlantı dizesiServer/appsettings.json
  2. uç nokta URL dizenizi Server/appsettings.json
  3. adminUserId dizenizi Server/appsettings.json
  4. npm run setup kök dizinden
  5. npm run start kök dizinden

Çok kullanıcılı bir sohbetin benzetimini yapmak için sohbetinizin URL'siyle birden çok tarayıcı oturumu açarak örneği yerel olarak test edebilirsiniz.

Örneği Azure'da yayımlama

  1. Kök dizinin altında şu komutları çalıştırın:
npm run setup
npm run build
npm run package
  1. Azure uzantısını kullanma ve Chat/dist dizinini uygulama hizmetinize dağıtma

Kaynakları temizleme

İletişim Hizmetleri aboneliğini temizlemek ve kaldırmak istiyorsanız, kaynağı veya kaynak grubunu silebilirsiniz. Kaynak grubunun silinmesi, kaynak grubuyla ilişkili diğer tüm kaynakları da siler. Kaynakları temizleme hakkında daha fazla bilgi edinin.

Sonraki adımlar

Örneği GitHub'dan indirin

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

  • Örnekler - Örneklere genel bakış sayfamızda daha fazla örnek ve örnek bulabilirsiniz.
  • Redux - İstemci tarafı durum yönetimi
  • FluentUI - Microsoft tarafından desteklenen kullanıcı arabirimi kitaplığı
  • React - Kullanıcı arabirimleri oluşturmak için kitaplık