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

Makale
06/02/2023

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 azure'a otomatik olarak tam yığın web uygulamaları oluşturmanıza ve 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 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

Genel Bakış

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

GitHub veya Azure Repos Static Web Apps 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. Static 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.

Kullanıcı uygulamada oturum açtığında, web PubSub hizmeti istemci bağlantı URL'sini oluşturmak için Azure İşlevleri login API tetikleniyor.
İ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.
bir istemci 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 iletiyi yayınlamak için tetikler.
İşlevler validate API'si, Azure Web PubSub'daki olaylar önceden tanımlanmış parametresiyle {event}(https://$STATIC_WEB_APP/api/{event}) yapılandırıldığında CloudEvents Kötüye Kullanım Koruması için düzenli aralıklarla tetiklenir.

Not

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

Önkoşullar

Bir GitHub hesabı.
Bir Azure hesabı. Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir Azure hesabı oluşturun.
Azure kaynaklarını yönetmek için Azure CLI (sürüm 2.29.0 veya üzeri) veya Azure Cloud Shell.

Web PubSub kaynağı oluşturma

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

Bir kaynak grubu oluşturun.

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

Web PubSub kaynağı oluşturun.

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

Erişim anahtarını daha sonra kullanmak üzere alın ve tutun.
```
az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group
```
```
AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
```
yer tutucusunun <YOUR_AWPS_ACCESS_KEY> yerine önceki adımdaki değerini primaryConnectionString yazın.

Depo oluşturma

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

Bu öğretici için https://github.com/Azure/awps-swa-sample/generate yeni bir depo oluşturmak için adresine gidin.
Kendinizi Sahip olarak seçin ve deponuzu my-awps-swa-app olarak adlandırın.
Tercihinize göre Bir Genel veya Özel depo oluşturabilirsiniz. Her ikisi de öğretici için çalışır.
Ş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.

GitHub kullanıcı adınızı tutmak için bir değişken oluşturun.
```
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
```
Yer tutucusunu <YOUR_GITHUB_USER_NAME> GitHub kullanıcı adınızla değiştirin.

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 .

https://github.com/login/device öğesine gidin.
Konsolunuzun iletisinin görüntülendiği şekilde kullanıcı kodunu girin.
Devam’ı seçin.
AzureAppServiceCLI'yi Yetkile'yi seçin.

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.

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 çıkışı, GitHub deponuzun URL'sini döndürür.
Depo URL'sini kopyalayın ve tarayıcıya yapıştırın.
Eylemler sekmesini seçin.

Bu noktada Azure, statik web uygulamanızı destekleyecek kaynakları oluşturuyor. Ç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ılı simgesi göründüğünde iş akışı tamamlanır ve konsol pencerenize dönebilirsiniz.
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.

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> 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ı

Aracılığıyla paylaş