Kullanmaya başlayın sohbet hero örneğiyle birlikte

Grup Azure İletişim Hizmetleri Hero Örneği,İletişim Hizmetleri Sohbet Web SDK'sı ile bir grup çağırma deneyimi oluşturmak için nasıl kullanıla bir örnektir.

Bu Örnek hızlı başlangıçta, örneği yerel makineniz üzerinde çalıştırmadan önce örneğin nasıl çalıştığını öğreneceğiz. Ardından kendi kaynaklarınızı kullanarak örneği Azure'a Azure İletişim Hizmetleri.

Genel Bakış

Örnekte hem istemci tarafı uygulaması hem de sunucu tarafı uygulaması vardır. İstemci tarafı uygulaması, Microsoft'un React kullanıcı arabirimi çerçevesini kullanan bir Fluent/Redux web uygulamasıdır. Bu uygulama, istemci ASP.NET Core Azure'a bağlanmasına yardımcı olan bir sunucu tarafı uygulamaya istek gönderir.

Örnek şu şekildedir:

"Sohbet Başlat" düğmesine bastığınızda, web uygulaması sunucu tarafı uygulamasından bir kullanıcı erişim belirteci getirir. Bu belirteç daha sonra istemci uygulamasını Azure İletişim Hizmetleri. Belirteç alındıktan sonra, sohbette sizi temsil edecek olan adını ve emojinizi belirtmeniz istenir.

Görünen adı ve emojinizi yapılandırdıktan sonra sohbet oturumuna katılabilirsiniz. Şimdi temel sohbet deneyiminin bulunduğu ana sohbet tuvali görüyorsunuz.

Ana sohbet ekranı bileşenleri:

• Ana Sohbet Alanı: Bu, kullanıcıların ileti göndererek aldığı temel sohbet deneyimidir. İleti göndermek için giriş alanı kullanabilir ve Enter tuşuna basabilirsiniz (veya gönder düğmesini kullanabilirsiniz). Alınan sohbet iletileri, gönderen tarafından doğru ad ve emoji ile kategorilere ayrılmış. Sohbet alanında iki tür bildirim olduğunu görüyorsunuz: 1) kullanıcı yazarken bildirim yazma ve 2) iletiler için bildirim gönder ve oku.
• Üst Bilgi: Burada kullanıcı sohbet iş parçacığının başlığını, katılımcıyı ve ayarları yan çubukları açma denetimlerini ve sohbet oturumundan çıkmak için bir bırak düğmesini görebilir.
• Kenar Çubuğu: Burada katılımcılar ve ayar bilgileri üst bilgide denetimler kullanılarak iki durumlu olarak gösterilir. Katılımcılar yan çubuğu, sohbette yer alan katılımcıların listesini ve sohbet oturumuna katılımcıları davet etme bağlantısını içerir. Ayarlar yan çubuğu sohbet iş parçacığı başlığını yapılandırmaya olanak sağlar.

Aşağıda önkoşullar ve örneği ayarlama adımları hakkında daha fazla bilgi bulabilirsiniz.

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı oluşturun. Ayrıntılar için bkz. Ücretsiz hesap oluşturma.
• Node.js (8.11.2 ve üzeri)
• Visual Studio (2017 ve üzeri)
• .NET Core 3.1 (Visual Studio örneğinize karşılık gelen 32-64 bit sürümünün yüklü olduğundan emin olun)
• Bir Azure İletişim Hizmetleri oluşturun. Ayrıntılar için bkz. Kaynak Azure İletişim Hizmetleri oluşturma. Bu hızlı başlangıç için kaynak bağlantı dizenizi kaydetmeniz gerekir.

İstemci uygulamasına hizmet & dağıtma

Tek iş parçacıklı sohbet örneği temelde bir istemci ve sunucu uygulaması olan iki "uygulamadır".

chat.csproj Visual Studio açın ve Hata Ayıklama modunda çalıştırarak sohbet ön uç hizmetini başlatın. Sunucu uygulaması tarayıcıdan ziyaret edildiklerinde trafiği yerel olarak dağıtılan sohbet ön uç hizmetine yönlendirecek.

Çok kullanıcılı bir sohbetin benzetimini yapmak için sohbet url'si ile birden çok tarayıcı oturumu açarak örneği yerel olarak test edebilirsiniz.

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

1. PowerShell, Windows Terminal, Komut İstemi veya eşdeğer bir örnek açın ve örneği klonlamak istediğiniz dizine gidin.
2. git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
3. Connection Stringİlkeden Azure portal. Bağlantı dizeleri hakkında daha fazla bilgi için bkz. Azure İletişim Hizmetleri oluşturma
4. dosyasını alırsanız, Bağlantı dizesini Sohbet klasörünün altında Connection String bulunan Chat/appsettings.json dosyasına ekleyin. Bağlantı dizenizi şu değişkene girdi: ResourceConnectionString .

Yerel çalıştırma

1. Sohbet klasörüne gidin ve çözümü Chat.csproj Visual Studio
2. Projeyi çalıştırın. Tarayıcı localhost:5000'de açılır.

Sorun giderme

• Çözüm derlemez, NPM yüklemesi/derlemesi sırasında hatalara neden olur

  C# çözümünü temizleme/yeniden oluşturma

Örneği Azure'da yayımlama

1. Projeye sağ tıklayın ve Chat Yayımla'yı seçin.
2. Yeni bir yayımlama profili oluşturun ve Azure aboneliğinizi seçin.
3. Yayımlamadan önce, bağlantı dizenizi ile ekleyin ve anahtar olarak değerini doldurun ve bağlantı dizenizi Edit App Service Settings ResourceConnectionString (appsettings.json'dan kopyalanan) değer olarak ekleyin.

Kaynakları temizleme

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

Sonraki adımlar

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

• Sohbet kavramları hakkında bilgi
• Sohbet SDK'mızı tanıma
• Contoso Med Uygulaması örneğini gözden geçirme

Ek okuma

• Örnekler - Örneklere genel bakış sayfamızda daha fazla örnek ve örnek bulabilirsiniz.
• Redux - İstemci tarafı durum yönetimi
• FluentUI - Microsoft destekli UI kitaplığı
• React - Kullanıcı arabirimleri oluşturma kitaplığı
• ASP.NET Core - Web uygulamaları için çerçeve