Aracılığıyla paylaş

Öğretici: Azure Web PubSub hizmeti ve Azure Static Web Apps ile sunucusuz sohbet uygulaması oluşturma

Azure Web PubSub, WebSocket kullanarak gerçek zamanlı mesajlaşma web uygulamaları oluşturmanıza yardımcı olur. Azure Static Web Apps, bir kod deposundan tam yığın web uygulamalarını otomatik olarak derlemenize ve Azure'a dağıtmanıza yardımcı olur. Bu öğreticide, gerçek zamanlı bir sohbet odası uygulaması oluşturmak için Web PubSub ve Static Web Apps'i birlikte kullanmayı öğreneceksiniz.

Daha açık belirtmek gerekirse, şunların nasıl yapılacağını öğrenirsiniz:

  • Sunucusuz sohbet uygulaması oluşturma
  • Web PubSub işlevi giriş ve çıkış bağlamalarıyla çalışma
  • Static Web Apps ile çalışma

Önemli

Ham bağlantı dizesi yalnızca tanıtım amacıyla bu makalede görünür.

bağlantı dizesi, uygulamanızın Azure Web PubSub hizmetine erişmesi için gereken yetkilendirme bilgilerini içerir. bağlantı dizesi içindeki erişim anahtarı, hizmetinizin kök parolasına benzer. Üretim ortamlarında erişim anahtarlarınızı her zaman koruyun. Anahtarlarınızı güvenli bir şekilde yönetmek ve döndürmek ve bağlantınızın WebPubSubServiceClientgüvenliğini sağlamak için Azure Key Vault kullanın.

Erişim anahtarlarını diğer kullanıcılara dağıtmaktan, sabit kodlamaktan veya başkalarının erişebileceği herhangi bir yerde düz metin olarak kaydetmekten kaçının. Ele geçirilmiş olabileceklerini düşünüyorsanız anahtarlarınızı döndürün.

Genel bakış

Azure Web PubSub'un Azure Static Web Apps ile nasıl çalıştığını gösteren diyagram.

GitHub veya Azure Repos, Statik Web Uygulamaları için kaynak denetimi sağlar. Azure seçtiğiniz depo dalını izler ve kaynak depoda her kod değişikliği olduğunda web uygulamanızın yeni bir derlemesi otomatik olarak çalıştırılır ve Azure'a dağıtılır. Sürekli teslim, GitHub Actions ve Azure Pipelines tarafından sağlanır. Statik Web Apps yeni derlemeyi algılar ve uç nokta kullanıcısına sunar.

Bu öğreticiyle sağlanan örnek sohbet odası uygulaması aşağıdaki iş akışına sahiptir.

  1. Kullanıcı uygulamada oturum açtığında, web PubSub hizmeti istemci bağlantı URL'si oluşturmak için Azure İşlevleri login API'si tetikleniyor.
  2. İstemci Web PubSub'a bağlantı isteğini başlatırken, hizmet kullanıcının kimliğini doğrulamak için İşlevler connect API'sini tetikleyen bir sistem connect olayı gönderir.
  3. İstemci Azure Web PubSub hizmetine bir ileti gönderdiğinde, hizmet bir kullanıcı message olayıyla yanıt verir ve İşlevler message API'si, tüm bağlı istemcilere iletinin yayımlanması için tetikler.
  4. Azure Web PubSub'daki olaylar önceden tanımlanmış parametresiyle validate(https://$STATIC_WEB_APP/api/{event}) yapılandırıldığında, İşlevler API'si düzenli aralıklarla CloudEvents Kötüye Kullanım Koruması{event}tetiklenir.

Not

İşlevLER API'leri connect ve message Azure Web PubSub hizmeti bu iki olayla yapılandırıldığında tetiklenir.

Önkoşullar

Web PubSub kaynağı oluşturma

  1. Aşağıdaki komutu kullanarak Azure CLI'da oturum açın.

    az login

  2. Kaynak grubu oluşturun.

    az group create \
  --name my-awps-swa-group \
  --location "eastus2"

  3. Web PubSub kaynağı oluşturun.

    az webpubsub create \
  --name my-awps-swa \
  --resource-group my-awps-swa-group \
  --location "eastus2" \
  --sku Free_F1

  4. Erişim anahtarını daha sonra kullanmak üzere alın ve basılı tutun.

    Ham bağlantı dizesi yalnızca tanıtım amacıyla bu makalede görünür. Üretim ortamlarında erişim anahtarlarınızı her zaman koruyun. Anahtarlarınızı güvenli bir şekilde yönetmek ve döndürmek ve bağlantınızın WebPubSubServiceClientgüvenliğini sağlamak için Azure Key Vault kullanın.

    az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group

    AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>

    Yer tutucuyu <YOUR_AWPS_ACCESS_KEY> önceki adımdaki değeriyle primaryConnectionString değiştirin.

Depo oluşturma

Bu makalede, kullanmaya başlamanızı kolaylaştırmak için bir GitHub şablon deposu kullanılmaktadır. Şablonda Azure Static Web Apps'e dağıttığınız bir başlangıç uygulaması bulunur.

  1. Bu öğretici için https://github.com/Azure/awps-swa-sample/generate yeni bir depo oluşturmak için adresine gidin.
  2. Kendinizi Sahip olarak seçin ve deponuza my-awps-swa-app adını verin.
  3. Tercihinize göre bir Genel veya Özel depo oluşturabilirsiniz. Her ikisi de öğretici için çalışır.
  4. Şablondan depo oluştur’u seçin.

Statik web uygulaması oluşturma

Artık depo oluşturulduğuna göre, Azure CLI'dan statik bir web uygulaması oluşturabilirsiniz.

  1. GitHub kullanıcı adınızı tutmak için bir değişken oluşturun.

    GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>

    Yer tutucuyu <YOUR_GITHUB_USER_NAME> GitHub kullanıcı adınız ile değiştirin.

  2. Deponuzdan yeni bir statik web uygulaması oluşturun. Bu komutu çalıştırdığınızda CLI, GitHub etkileşimli oturum açma işlemini başlatır. Yetkilendirmeyi tamamlamak için iletiyi izleyin.

    az staticwebapp create \
    --name my-awps-swa-app \
    --resource-group my-awps-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-awps-swa-app \
    --location "eastus2" \
    --branch main \
    --app-location "src" \
    --api-location "api" \
    --login-with-github

    Önemli

    Parametresine --source geçirilen URL son eki içermemelidir .git .

  3. Şuraya git: https://github.com/login/device .

  4. Konsolunuzun iletisinin görüntülendiği kullanıcı kodunu girin.

  5. Devam'ı seçin.

  6. AzureAppServiceCLI'yi Yetkile'yi seçin.

  7. Statik web uygulaması ayarlarını yapılandırın.

    az staticwebapp appsettings set \
  -n my-awps-swa-app \
  --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa

Web sitesini görüntüleme

Statik uygulama dağıtmanın iki yönü vardır: İlki uygulamanızı oluşturan temel Azure kaynaklarını oluşturur. İkincisi de, uygulamanızı derleyip yayımlayan GitHub Actions iş akışıdır.

Yeni statik sitenize gidebilmeniz için önce dağıtım derlemesinin çalıştırılmasını tamamlamanız gerekir.

  1. Konsol pencerenize dönün ve uygulamanızla ilişkili URL'leri listelemek için aşağıdaki komutu çalıştırın.

    az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"

    Bu komutun çıktısı GitHub deponuzun URL'sini döndürür.

  2. Depo URL'sini kopyalayın ve tarayıcıya yapıştırın.

  3. Eylemler sekmesini seçin.

    Bu noktada Azure, statik web uygulamanızı desteklemek için kaynaklar oluşturmuştur. Çalışan iş akışının yanındaki simge yeşil arka planlı ✅bir onay işaretine dönüşene kadar bekleyin. Bu işlemin tamamlanması birkaç dakika sürebilir.

    Başarı simgesi görüntülendiğinde iş akışı tamamlanır ve konsol pencerenize dönebilirsiniz.

  4. Web sitenizin URL'sini sorgulamak için aşağıdaki komutu çalıştırın.

    az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"

    Web PubSub olay işleyicisinde ayarlanacağı URL'yi tutun.

    STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>

Web PubSub olay işleyicisini yapılandırma

Tamamlanmak üzeresiniz. Son adım, istemci isteklerinin işlev API'lerinize aktarılması için Web PubSub'ı yapılandırmaktır.

  1. Web PubSub hizmet olaylarını yapılandırmak için aşağıdaki komutu çalıştırın. Deponuzdaki api klasörün altındaki işlevleri Web PubSub olay işleyicisine eşler.

    az webpubsub hub create \
  -n "my-awps-swa" \
  -g "my-awps-swa-group" \
  --hub-name "sample_swa" \
  --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" system-event="connect"

Artık web siteniz <YOUR_STATIC_WEB_APP> ile oynamaya hazırsınız. Tarayıcıya kopyalayın ve arkadaşlarınızla sohbet etmeye başlamak için Devam'ı seçin.

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz aşağıdaki komutu çalıştırarak kaynak grubunu ve statik web uygulamasını silebilirsiniz.

az group delete --name my-awps-swa-group

Sonraki adımlar

Bu hızlı başlangıçta sunucusuz sohbet uygulaması geliştirmeyi ve dağıtmayı öğrendiniz. Artık kendi uygulamanızı oluşturmaya başlayabilirsiniz.

Oynanabilir tanıtımlarla eğlenin

Azure İşlevleri için Azure Web PubSub bağlamaları

  • Last updated on