Azure Digital Twins'i Azure SignalR Hizmeti ile tümleştirme

Bu makalede Azure Digital Twins'i Azure SignalR Hizmeti ile tümleştirmeyi öğreneceksiniz.

Bu makalede açıklanan çözüm, tek bir web sayfası veya mobil uygulama gibi bağlı istemcilere dijital ikiz telemetri verilerini göndermenizi sağlar. Sonuç olarak istemciler, sunucuyu yoklama veya güncelleştirmeler için yeni HTTP istekleri göndermeye gerek kalmadan IoT cihazlarından gerçek zamanlı ölçümler ve durumlarla güncelleştirilir.

Önkoşullar

Devam etmeden önce tamamlamanız gereken önkoşullar şunlardır:

• Çözümünüzü bu makaledeki Azure SignalR Hizmeti tümleştirmeden önce Azure Digital Twins Connect'i uçtan uca bir çözümle tamamlamanız gerekir çünkü bu nasıl yapılır makalesi bunun üzerinde derleniyor. Öğretici, dijital ikiz güncelleştirmelerini tetikleme amacıyla sanal IoT cihazıyla çalışan bir Azure Digital Twins örneği ayarlama konusunda size yol gösterir. Bu nasıl yapılır makalesi, Azure SignalR Hizmeti kullanarak bu güncelleştirmeleri örnek bir web uygulamasına bağlar.

• Öğreticide aşağıdaki değerlere ihtiyacınız olacaktır:

  • Event Grid konusu
  • Kaynak grubu
  • App Service/işlev uygulaması adı

• Makinenizde Node.js yüklü olması gerekir.

Bu kılavuzda kullanmanız gerektiğinden Azure portalında Azure hesabınızla oturum açtığınızdan emin olun.

Örnek uygulamaları indirme

İlk olarak gerekli örnek uygulamaları indirin. Aşağıdaki örneklerin her ikisi de gerekir:

• Azure Digital Twins uçtan uca örnekler: Bu örnek, bir Azure Digital Twins örneğinde veri taşımak için iki Azure işlevini barındıran bir AdtSampleApp içerir (bu senaryo hakkında uçtan uca çözüm bağlama bölümünde daha ayrıntılı bilgi edinebilirsiniz). Ayrıca ioT cihazının benzetimini yaparak her saniye yeni bir sıcaklık değeri oluşturan bir DeviceSimulator örnek uygulaması içerir.

  • Önkoşullar'daki öğreticinin bir parçası olarak örneği henüz indirmediyseniz örneğe gidin ve başlığın altındaki Koda gözat düğmesini seçin. Bunu yaptığınızda örneklerin GitHub deposuna gidebilirsiniz. Bu depoyu Kod düğmesini ve ZIP'i İndir'i seçerek .zip olarak indirebilirsiniz.

    

  Bu düğme, digital-twins-samples-main.zip olarak makinenizdeki örnek deponun bir kopyasını indirir. Klasörün sıkıştırmasını açın.

• SignalR tümleştirmesi web uygulaması örneği: Bu örnek React web uygulaması bir Azure SignalR Hizmeti Azure Digital Twins telemetri verilerini tüketir.

  • Örnek bağlantıya gidin ve örneğin bir kopyasını makinenize indirmek için digitaltwins-signalr-webapp-sample-main.zip aynı indirme işlemini kullanın. Klasörün sıkıştırmasını açın.

Çözüm mimarisi

Aşağıdaki yol üzerinden Azure Digital Twins'e Azure SignalR Hizmeti ekleyeceksiniz. Diyagramdaki A, B ve C bölümleri, uçtan uca öğretici önkoşulunun mimari diyagramından alınmıştır. Bu nasıl yapılır makalesinde, SignalR ve istemci uygulamalarıyla iletişim kuran iki yeni Azure işlevi içeren mevcut mimarinin D bölümünü oluşturacaksınız.

Azure SignalR örneği oluşturma

Ardından, Azure SignalR Hizmeti örneği oluşturma bölümündeki yönergeleri izleyerek bu makalede kullanmak üzere bir Azure SignalR örneği oluşturun (şimdilik yalnızca bu bölümdeki adımları tamamlayın).

Sonraki bölümde yeniden kullanacağınız için tarayıcı penceresini Azure portalında açık bırakın.

Azure İşlevleri uygulamasını yayımlama ve yapılandırma

Bu bölümde iki Azure işlevi ayarlayacaksınız:

• negotiate - HTTP tetikleyici işlevi. Geçerli bağlantı bilgilerini oluşturmak ve döndürmek için SignalRConnectionInfo giriş bağlamasını kullanır.
• broadcast - Event Grid tetikleyici işlevi. Olay kılavuzu aracılığıyla Azure Digital Twins telemetri verilerini alır ve iletiyi tüm bağlı istemci uygulamalarına yayınlamak için önceki adımda oluşturduğunuz SignalR örneğinin çıkış bağlamasını kullanır.

Visual Studio'yu veya istediğiniz başka bir kod düzenleyicisini başlatın ve kod çözümünü digital-twins-samples-main\ADTSampleApp klasöründe açın. Ardından işlevleri oluşturmak için aşağıdaki adımları uygulayın:

1. SampleFunctionsApp projesinde SignalRFunctions.cs adlı yeni bir C# sınıfı oluşturun.

2. Sınıf dosyasının içeriğini aşağıdaki kodla değiştirin:

   using System;
   using System.Collections.Generic;
   using System.Threading.Tasks;
   using Microsoft.AspNetCore.Http;
   using Microsoft.Azure.WebJobs;
   using Microsoft.Azure.WebJobs.Extensions.Http;
   using Microsoft.Azure.WebJobs.Extensions.EventGrid;
   using Microsoft.Azure.WebJobs.Extensions.SignalRService;
   using Microsoft.Extensions.Logging;
   using Newtonsoft.Json;
   using Newtonsoft.Json.Linq;
   using Azure.Messaging.EventGrid;
   
   namespace SignalRFunction
   {
       public static class SignalRFunctions
       {
           public static double temperature;
   
           [FunctionName("negotiate")]
           public static SignalRConnectionInfo GetSignalRInfo(
               [HttpTrigger(AuthorizationLevel.Anonymous, "post")] HttpRequest req,
               [SignalRConnectionInfo(HubName = "dttelemetry")] SignalRConnectionInfo connectionInfo)
           {
               return connectionInfo;
           }
   
           [FunctionName("broadcast")]
           public static Task SendMessage(
               [EventGridTrigger] EventGridEvent eventGridEvent,
               [SignalR(HubName = "dttelemetry")] IAsyncCollector<SignalRMessage> signalRMessages,
               ILogger log)
           {
               JObject eventGridData = (JObject)JsonConvert.DeserializeObject(eventGridEvent.Data.ToString());
   
               log.LogInformation($"Event grid message: {eventGridData}");
   
               var patch = (JObject)eventGridData["data"]["patch"][0];
               if (patch["path"].ToString().Contains("/Temperature"))
               {
                   temperature = Math.Round(patch["value"].ToObject<double>(), 2);
               }
   
               var message = new Dictionary<object, object>
               {
                   { "temperatureInFahrenheit", temperature},
               };
   
               return signalRMessages.AddAsync(
                   new SignalRMessage
                   {
                       Target = "newMessage",
                       Arguments = new[] { message }
                   });
           }
       }
   }
   

3. Visual Studio'nun Paket Yöneticisi Konsolu penceresinde veya makinenizdeki herhangi bir komut penceresinde digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp klasörüne gidin ve NuGet paketini projeye yüklemek SignalRService için aşağıdaki komutu çalıştırın:

   dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService --version 1.14.0
   

   Bu komutun çalıştırılması, sınıfındaki bağımlılık sorunlarını çözmelidir.

4. tercih ettiğiniz yöntemi kullanarak işlevi Azure'da yayımlayın.

   İşlevi Visual Studio kullanarak yayımlama yönergeleri için bkz. Visual Studio kullanarak Azure İşlevleri geliştirme. İşlevi Visual Studio Code kullanarak yayımlama yönergeleri için bkz. Visual Studio Code kullanarak Azure'da C# işlevi oluşturma. İşlevi Azure CLI kullanarak yayımlama yönergeleri için bkz. Komut satırından Azure'da C# işlevi oluşturma.

İşlevi yapılandırma

Ardından işlevi Azure SignalR örneğinle iletişim kuracak şekilde yapılandırın. İlk olarak SignalR örneğinin bağlantı dizesi toplayıp işlev uygulamasının ayarlarına ekleyeceksiniz.

1. Azure portalına gidin ve portalın üst kısmındaki arama çubuğunda SignalR örneğinizin adını arayın. Açmak için örneği seçin.

2. SignalR hizmet örneğinin bağlantı dizesi görüntülemek için örnek menüsünden Anahtarlar'ı seçin.

3. Birincil BAĞLANTI DIZESİ'ni kopyalamak için Kopyala simgesini seçin.

   

4. Son olarak, aşağıdaki Azure CLI komutunu kullanarak Azure SignalR bağlantı dizesi işlevin uygulama ayarlarına ekleyin. Ayrıca, öğretici önkoşulundaki yer tutucuları kaynak grubunuz ve app service/function uygulama adınızla değiştirin. Komut Azure Cloud Shell'de veya makinenizde Azure CLI yüklüyse yerel olarak çalıştırılabilir:

   az functionapp config appsettings set --resource-group <your-resource-group> --name <your-function-app-name> --settings "AzureSignalRConnectionString=<your-Azure-SignalR-ConnectionString>"
   

   Bu komutun çıktısı, Azure işleviniz için ayarlanan tüm uygulama ayarlarını yazdırır. Eklendiğini doğrulamak için AzureSignalRConnectionString listenin en altına bakın.

   

İşlevi Event Grid'e bağlama

Ardından, azure yayın işlevini öğretici önkoşulu sırasında oluşturduğunuz Event Grid konusuna abone olun. Bu eylem telemetri verilerinin Termostat67 ikizinden Event Grid konusu aracılığıyla ve işlevine akmasına olanak tanır. İşlev buradan verileri tüm istemcilere yayınlayabilir.

Verileri yayınlamak için Event Grid konu başlığınızdan azure yayın işlevinize uç nokta olarak bir Olay aboneliği oluşturacaksınız.

Azure portalında, üstteki arama çubuğunda adını arayarak Event Grid konu başlığınıza gidin. + Olay Aboneliği'ni seçin.

Olay Aboneliği Oluştur sayfasında, alanları aşağıdaki gibi doldurun (varsayılan olarak doldurulan alanlardan bahsedilmiyor):

• OLAY ABONELİĞİ AYRINTILARI>Ad: Olay aboneliğinize bir ad verin.
• UÇ NOKTA AYRINTILARI>Uç Nokta Türü: Menü seçeneklerinden Azure İşlevi'ni seçin.
• UÇ NOKTA AYRINTILARI>Uç nokta: Uç nokta seçin bağlantısını seçerek Azure İşlevini Seçin penceresi açılır:
  • Aboneliğinizi, Kaynak grubunuzu, İşlev uygulamanızı ve İşlevinizi (yayın) doldurun. Bu alanlardan bazıları aboneliği seçtikten sonra otomatik olarak doldurulabilir.
  • Seçimi Onayla'yı seçin.

Olay Aboneliği Oluştur sayfasına dönüp Oluştur'u seçin.

Bu noktada, Event Grid Konusu sayfasında iki olay aboneliği görmeniz gerekir.

Web uygulamasını yapılandırma ve çalıştırma

Bu bölümde, sonucun nasıl çalıştığını göreceksiniz. İlk olarak, ayarladığınız Azure SignalR akışına bağlanmak için örnek istemci web uygulamasını yapılandırın. Ardından, Azure Digital Twins örneğiniz aracılığıyla cihaz telemetri verilerini gönderen sanal cihaz örnek uygulamasını başlatacaksınız. Bundan sonra, örnek web uygulamasını gerçek zamanlı olarak güncelleştiren sanal cihaz verilerini görmek için örnek web uygulamasını görüntüleyeceksiniz.

Örnek istemci web uygulamasını yapılandırma

Ardından örnek istemci web uygulamasını yapılandıracaksınız. Anlaşma işlevinin HTTP uç nokta URL'sini toplayarak başlayın ve ardından makinenizdeki uygulama kodunu yapılandırmak için bunu kullanın.

1. Azure portalının İşlev uygulamaları sayfasına gidin ve listeden işlev uygulamanızı seçin. Uygulama menüsünde İşlevler'i seçin ve negotiate işlevini seçin.

   

2. İşlev URL'sini al'ı seçin ve değeri /api aracılığıyla yukarı kopyalayın (son /negotiate? öğesini eklemeyin). Sonraki adımda bu değeri kullanacaksınız.

   

3. Visual Studio'yu veya istediğiniz herhangi bir kod düzenleyicisini kullanarak Örnek uygulamaları indirme bölümünde indirdiğiniz sıkıştırmasız digitaltwins-signalr-webapp-sample-main klasörünü açın.

4. src/App.js dosyasını açın ve içindeki işlev URL'sini HubConnectionBuilder önceki adımda kaydettiğiniz negotiate işlevinin HTTP uç nokta URL'si ile değiştirin:

       const hubConnection = new HubConnectionBuilder()
           .withUrl('<Function-URL>')
           .build();
   

5. Visual Studio'nun Geliştirici komut isteminde veya makinenizdeki herhangi bir komut penceresinde digitaltwins-signalr-webapp-sample-main\src klasörüne gidin. Bağımlı düğüm paketlerini yüklemek için aşağıdaki komutu çalıştırın:

   npm install
   

Ardından, Azure portalında işlev uygulamanızda izinleri ayarlayın:

1. Azure portalının İşlev uygulamaları sayfasında işlev uygulaması örneğinizi seçin.

2. Örnek menüsünde aşağı kaydırın ve CORS'yi seçin. CORS sayfasında, boş kutuya girerek izin verilen kaynak olarak ekleyin http://localhost:3000 . Access-Control-Allow-Credentials'ı etkinleştir kutusunu işaretleyin ve Kaydet'i seçin.

   

Cihaz simülatörünü çalıştırma

Uçtan uca öğretici önkoşulu sırasında cihaz simülatörünü bir IoT Hub üzerinden ve Azure Digital Twins örneğinize veri gönderecek şekilde yapılandırmışsınız.

Şimdi digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln konumundaki simülatör projesini başlatın. Visual Studio kullanıyorsanız, projeyi açabilir ve araç çubuğunda şu düğmeyle çalıştırabilirsiniz:

Bir konsol penceresi açılır ve sanal cihaz sıcaklığı telemetri iletileri görüntülenir. Bu iletiler Azure Digital Twins örneğiniz aracılığıyla gönderilir ve burada Azure işlevleri ve SignalR tarafından alınır.

Bu konsolda başka bir şey yapmanız gerekmez, ancak sonraki adımı tamamlarken bu işlemi çalışır durumda bırakın.

Sonuçları görme

Sonuçların nasıl çalıştığını görmek için SignalR tümleştirme web uygulaması örneğini başlatın. Bunu, digitaltwins-signalr-webapp-sample-main\src konumundaki herhangi bir konsol penceresinden şu komutu çalıştırarak yapabilirsiniz:

npm start

Bu komutun çalıştırılması örnek uygulamayı çalıştıran ve görsel sıcaklık ölçer görüntüleyen bir tarayıcı penceresi açar. Uygulama çalıştırıldıktan sonra, Azure Digital Twins aracılığıyla yayılan cihaz simülatöründeki sıcaklık telemetri değerlerinin web uygulaması tarafından gerçek zamanlı olarak yansıtıldığını görmeye başlamalısınız.

Kaynakları temizleme

Bu makalede oluşturulan kaynaklara artık ihtiyacınız yoksa, bunları silmek için bu adımları izleyin.

Azure Cloud Shell veya yerel Azure CLI kullanarak az group delete komutuyla bir kaynak grubundaki tüm Azure kaynaklarını silebilirsiniz . Kaynak grubunun kaldırılması şunları da kaldırır:

• Azure Digital Twins örneği (uçtan uca öğreticiden)
• IoT hub'ı ve hub cihaz kaydı (uçtan uca öğreticiden)
• Event Grid konusu ve ilişkili abonelikler
• Üç işlev ve depolama gibi ilişkili kaynaklar da dahil olmak üzere Azure İşlevleri uygulaması
• Azure SignalR örneği

az group delete --name <your-resource-group>

Son olarak, yerel makinenize indirdiğiniz proje örnek klasörlerini (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip ve sıkıştırması açılmış karşılıkları) silin.

Sonraki adımlar

Bu makalede, Azure Digital Twins telemetri olaylarını örnek bir istemci uygulamasına yayınlamak için SignalR ile Azure işlevlerini ayarlarsınız.

Ardından, Azure SignalR Hizmeti hakkında daha fazla bilgi edinin:

• Azure SignalR Hizmeti nedir?

veya Azure İşlevleri ile Azure SignalR Hizmeti Kimlik Doğrulaması hakkında daha fazla bilgi edinin:

• Azure SignalR Hizmeti kimlik doğrulaması