Nasıl yapılır: Azure Web PubSub kullanarak gerçek zamanlı işbirliğine dayalı beyaz tahta oluşturma ve Azure Uygulaması Hizmeti'ne dağıtma

Yeni bir uygulama sınıfı, modern çalışmanın ne olabileceğini yeniden hayal ediyor. Microsoft Word düzenleyicileri bir araya getirirken, Figma tasarımcıları aynı yaratıcı çabayla bir araya getirir. Bu uygulama sınıfı, uzak ortak çalışanlarımızla bağlantı kurmamızı sağlayan bir kullanıcı deneyimine dayalıdır. Teknik açıdan bakıldığında, kullanıcının etkinliklerinin düşük gecikme süresiyle kullanıcıların ekranları arasında eşitlenmesi gerekir.

Genel bakış

Bu nasıl yapılır kılavuzunda bulutta yerel bir yaklaşım benimsiyoruz ve Azure hizmetlerini kullanarak gerçek zamanlı işbirliğine dayalı bir beyaz tahta oluşturuyoruz ve projeyi Web Uygulaması olarak Azure Uygulaması Hizmeti'ne dağıtıyoruz. Beyaz tahta uygulamasına tarayıcıda erişilebilir ve herkesin aynı tuval üzerinde çizim yapabilmesini sağlar.

Mimari

Önkoşullar

Öncelikle beyaz tahta uygulamasını oluşturmaya ve dağıtmaya odaklanacağımız için bu nasıl yapılır kılavuzunun sonunda veri akışının ayrıntılı açıklamasını bulabilirsiniz.

Adım adım kılavuzu izlemek için

Azure CLI kullanarak Azure kaynakları oluşturma

1. Oturum açın

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

   az login
   

2. Azure'da bir kaynak grubu oluşturun.

   az group create \
     --location "westus" \  
     --name "whiteboard-group"
   

2. Web Uygulaması kaynağı oluşturma

1. Ücretsiz bir App Service planı oluşturun.

   az appservice plan create \ 
     --resource-group "whiteboard-group" \ 
     --name "demo" \ 
     --sku FREE
     --is-linux
   

2. Web Uygulaması kaynağı oluşturma

   az webapp create \
     --resource-group "whiteboard-group" \
     --name "whiteboard-app" \ 
     --plan "demo" \
     --runtime "NODE:18-lts"
   

3. Web PubSub kaynağı oluşturma

1. Web PubSub kaynağı oluşturun.

   az webpubsub create \
     --name "whiteboard-app" \
     --resource-group "whiteboard-group" \
     --location "westus" \
     --sku Free_F1
   

2. değerini primaryConnectionString daha sonra kullanmak üzere bir yerde gösterin ve depolayın.

   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 "whiteboard-app" \
     --resource-group "whiteboard-group"
   

Uygulama kodunu alma

Uygulama kodunun bir kopyasını almak için aşağıdaki komutu çalıştırın. Veri akışının ayrıntılı açıklamasını bu nasıl yapılır kılavuzunun sonunda bulabilirsiniz.

git clone https://github.com/Azure/awps-webapp-sample.git

Uygulamayı App Service'e dağıtma

1. App Service birçok dağıtım iş akışını destekler. Bu kılavuz için bir ZIP paketi dağıtacağız. ZIP'i hazırlamak için aşağıdaki komutları çalıştırın.

   npm install
   npm run build
   zip -r app.zip *
   

2. Azure Uygulaması Service'e dağıtmak için aşağıdaki komutu kullanın.

   az webapp deployment source config-zip \
   --resource-group "whiteboard-group" \
   --name "whiteboard-app" \
   --src app.zip
   

3. Uygulama ayarlarında Azure Web PubSub bağlantı dizesi ayarlayın. Önceki bir adımda depoladığınız değerini primaryConnectionString kullanın.

   az webapp config appsettings set \
   --resource-group "whiteboard-group" \
   --name "whiteboard-app" \
   --setting Web_PubSub_ConnectionString="<primaryConnectionString>"
   

Web PubSub'dan gelen olayları işlemek için yukarı akış sunucusunu yapılandırma

Bir istemci Web PubSub hizmetine her ileti gönderdiğinde, hizmet belirttiğiniz uç noktaya bir HTTP isteği gönderir. Bu mekanizma, arka uç sunucunuzun iletileri daha fazla işlemek için kullandığı mekanizmadır; örneğin, iletileri tercih ettiğiniz bir veritabanında kalıcı hale getirebiliyorsanız.

HTTP isteklerinde olduğu gibi Web PubSub hizmetinin de uygulama sunucunuzu nerede bulacağı konusunda bilgi sahibi olması gerekir. Arka uç uygulaması artık App Service'e dağıtıldığından, bunun için genel olarak erişilebilir bir etki alanı adı elde ediyoruz.

1. Değerini name bir yerde gösterin ve depolayın.

   az webapp config hostname list \
     --resource-group "whiteboard-group"
     --webapp-name "whiteboard-app" 
   

2. Arka uç sunucusunda kullanıma sunma kararı aldığımız uç nokta ve beyaz tahta uygulamasının hub adıdır /eventhandler"sample_draw"

   az webpubsub hub create \ 
     --resource-group "whiteboard-group" \
     --name "whiteboard-app" \
     --hub-name "sample_draw" \
     --event-handler url-template="https://<Replace with the hostname of your Web App resource>/eventhandler" user-event-pattern="*" system-event="connected" system-event="disconnected" 
   

Beyaz tahta uygulamasını tarayıcıda görüntüleme

Şimdi tarayıcınıza gidin ve dağıtılan Web Uygulamanızı ziyaret edin. Uygulamanın gerçek zamanlı işbirliğine dayalı yönünü deneyimlemeniz için birden çok tarayıcı sekmesinin açık olması önerilir. Daha da iyisi, bağlantıyı bir iş arkadaşınızla veya meslektaşınızla paylaşın.

Veri akışı

Genel bakış

Veri akışı bölümü, beyaz tahta uygulamasının nasıl oluşturulduğuna daha ayrıntılı bir şekilde göz atılır. Beyaz tahta uygulamasının iki taşıma yöntemi vardır.

• Express uygulaması olarak yazılan ve App Service'te barındırılan HTTP hizmeti.
• Azure Web PubSub tarafından yönetilen WebSocket bağlantıları.

WebSocket bağlantılarını yönetmek için Azure Web PubSub kullanılarak Web App üzerindeki yük azalır. web uygulaması, istemcinin kimliğini doğrulamanın ve görüntüleri sunmanın dışında çizim etkinliklerinin eşitlenmesiyle ilgili değildir. Bir istemcinin çizim etkinlikleri doğrudan Web PubSub'a gönderilir ve bir gruptaki tüm istemcilere yayınlanır.

Herhangi bir zamanda birden fazla istemci çizimi olabilir. Web Uygulaması WebSocket bağlantılarını kendi başına yönetecekse, tüm çizim etkinliklerini diğer tüm istemcilere yayınlaması gerekiyordu. Büyük trafik ve işleme, sunucu için büyük bir yüktür.

Kaynakları temizleme

Uygulama her iki hizmetin de yalnızca ücretsiz katmanlarını kullansa da, artık ihtiyacınız kalmadıysa kaynakları silmek en iyi yöntemdir. Aşağıdaki komutu kullanarak kaynak grubunu ve içindeki kaynakları silebilirsiniz.

az group delete 
  --name "whiteboard-group"

Sonraki adımlar