Integrasikan Azure Digital Twins dengan Azure SignalR Service

Dalam artikel ini, Anda akan mempelajari cara mengintegrasikan Azure Digital Twins dengan Azure SignalR Service.

Solusi yang dijelaskan dalam artikel ini memungkinkan Anda untuk mendorong data telemetri kembar digital ke klien yang tersambung, seperti satu halaman web atau aplikasi seluler. Akibatnya, klien diperbarui dengan metrik dan status real time dari perangkat IoT, tanpa perlu melakukan polling server atau mengirimkan permintaan HTTP baru untuk pembaruan.

Prasyarat

Berikut adalah prasyarat yang harus Anda selesaikan sebelum melanjutkan:

• Sebelum mengintegrasikan solusi Anda dengan Azure SignalR Service dalam artikel ini, Anda harus menyelesaikan Azure Digital Twins Hubungkan solusi end-to-end, karena artikel panduan ini dibuat di atasnya. Tutorial ini memandu Anda menyiapkan instans Azure Digital Twins yang berfungsi dengan perangkat IoT virtual untuk memicu pembaruan kembar digital. Artikel cara penggunaan ini akan menghubungkan pembaruan tersebut ke sampel aplikasi web menggunakan Azure SignalR Service.

• Anda akan memerlukan nilai-nilai berikut dari tutorial:

  • Topik Event Grid
  • Grup sumber daya
  • Layanan aplikasi/nama aplikasi fungsi

• Anda akan membutuhkan Node.js terpasang di komputer Anda.

Pastikan untuk masuk ke portal Microsoft Azure dengan akun Azure Anda, karena Anda harus menggunakannya dalam panduan ini.

Solusi Arsitektur

Anda akan melampirkan Azure SignalR Service ke Azure Digital Twins melalui jalur di bawah ini. Bagian A, B, dan C dalam diagram diambil dari diagram arsitektur prasyarat tutorial end-to-end. Dalam artikel panduan ini, Anda akan membangun bagian D pada arsitektur yang ada, yang mencakup dua fungsi Azure baru yang berkomunikasi dengan SignalR dan aplikasi klien.

Unduh aplikasi sampel

Pertama, unduh aplikasi sampel yang diperlukan. Anda akan membutuhkan kedua sampel berikut:

• Sampel end-to-end Azure Digital Twins: Sampel ini berisi AdtSampleApp yang menyimpan dua fungsi Azure untuk memindahkan data di sekitar instans Azure Digital Twins (Anda dapat mempelajari skenario ini secara lebih rinci di Hubungkan solusi end-to-end). Ini juga berisi aplikasi sampelDeviceSimulator yang mensimulasikan perangkat IoT, menghasilkan nilai suhu baru setiap detik.

  • Jika Anda belum mengunduh sampel sebagai bagian dari tutorial di Prasyarat, navigasi ke sampel dan pilih tombol Telusuri kode di bawah judul. Setelah itu, Anda akan dibawa ke repositori GitHub untuk sampel, yang dapat Anda unduh sebagai .zip dengan memilih tombol Kode dan Unduh ZIP.

    

  Tombol ini akan mengunduh salinan repositori sampel di komputer Anda, sebagai digital-twins-samples-main.zip. Mengekstrak folder.

• Sampel aplikasi web integrasi SignalR: Sampel aplikasi web React ini akan menggunakan data telemetri Azure Digital Twins dari Azure SignalR Service.

  • Navigasikan ke tautan sampel dan gunakan proses pengunduhan yang sama untuk mengunduh salinan sampel ke mesin Anda, seperti digitaltwins-signalr-webapp-sample-main.zip. Mengekstrak folder.

Di bagian ini, Anda membuat instans Azure SignalR dasar yang akan digunakan untuk aplikasi Anda. Langkah-langkah berikut menggunakan portal Azure untuk membuat instans baru, tetapi Anda juga dapat menggunakan Azure CLI. Untuk informasi selengkapnya, lihat perintah az signalr create di Referensi CLI Azure SignalR Service.

1. Masuk ke portal Azure.
2. Di sisi kiri atas halaman, pilih + Buat sumber daya.
3. Pada halaman Buat sumber daya, di kotak teks layanan Pencarian dan marketplace, masukkan signalr lalu pilih SignalR Service dari daftar.
4. Pada halaman SignalR Service , pilih Buat.
5. Pada tab Dasar, Anda memasukkan informasi penting untuk instans SignalR Service baru Anda. Masukkan nilai berikut:

Bidang	Nilai yang Disarankan	Deskripsi
Langganan	Memilih langganan Anda	Pilih langganan yang ingin Anda gunakan untuk membuat instans SignalR Service baru.
Grup sumber daya	Membuat grup sumber daya bernama SignalRTestResources	Pilih atau buat grup sumber daya untuk sumber daya SignalR Anda. Berguna untuk membuat grup sumber daya baru untuk tutorial ini alih-alih menggunakan grup sumber daya yang ada. Untuk membebaskan sumber daya setelah menyelesaikan tutorial, hapus grup sumber daya. Menghapus grup sumber daya juga menghapus semua sumber daya yang termasuk dalam grup. Tindakan ini tidak dapat diurungkan. Sebelum Anda menghapus grup sumber daya, pastikan grup tersebut tidak berisi sumber daya yang ingin Anda simpan. Untuk mengetahui informasi selengkapnya, lihat Menggunakan grup sumber daya untuk mengelola sumber daya Azure Anda.
Nama sumber daya	testsignalr	Masukkan nama sumber daya unik untuk digunakan untuk sumber daya SignalR. Jika testsignalr sudah diambil di wilayah Anda, tambahkan digit atau karakter hingga namanya unik. Nama harus berupa string 1 hingga 63 karakter dan hanya berisi angka, huruf, dan karakter tanda hubung (-). Nama tidak dapat dimulai atau diakhir dengan karakter tanda hubung, dan karakter tanda hubung berturut-turut tidak valid.
Wilayah	Pilih wilayah Anda	Pilih wilayah yang sesuai untuk instans SignalR Service baru Anda. Azure SignalR Service saat ini tidak tersedia di semua wilayah. Untuk informasi selengkapnya, lihat Ketersediaan wilayah Azure SignalR Service
Tingkat harga	Pilih Ubah lalu pilih Gratis (Khusus Dev/Test). Pilih Pilih untuk mengonfirmasi pilihan tingkat harga Anda.	Azure SignalR Service memiliki tiga tingkat harga: Gratis, Standar, dan Premium. Tutorial menggunakan tingkat Gratis , kecuali disebutkan sebaliknya dalam prasyarat. Untuk informasi selengkapnya tentang perbedaan fungsionalitas antara tingkatan dan harga, lihat Harga Azure SignalR Service
Mode layanan	Pilih mode layanan yang sesuai	Gunakan Default saat Anda menghosting logika hub SignalR di aplikasi web Anda dan menggunakan layanan SignalR sebagai proksi. Gunakan Tanpa Server saat Anda menggunakan teknologi Tanpa Server seperti Azure Functions untuk menghosting logika hub SignalR. Mode klasik hanya untuk kompatibilitas mundur dan tidak disarankan untuk digunakan. Untuk informasi selengkapnya, lihat Mode layanan di Azure SignalR Service.

Anda tidak perlu mengubah pengaturan pada tab Jaringan dan Tag untuk tutorial SignalR.

6. Pilih tombol Tinjau + buat di bagian bawah tab Dasar .
7. Pada tab Tinjau + buat , tinjau nilai lalu pilih Buat. Dibutuhkan beberapa saat agar penyebaran selesai.
8. Setelah penyebaran selesai, pilih tombol Buka sumber daya .
9. Pada halaman sumber daya SignalR, pilih Kunci dari menu di sebelah kiri, di bawah Pengaturan.
10. Salin string Koneksi ion untuk kunci utama. Anda memerlukan string koneksi ini untuk mengonfigurasi aplikasi Anda nanti dalam tutorial ini.

Biarkan jendela browser terbuka ke portal Microsoft Azure, karena Anda akan menggunakannya lagi di bagian berikutnya.

Menerbitkan dan mengonfigurasikan aplikasi Azure Functions

Di bagian ini, Anda akan menyiapkan dua fungsi Azure:

• negosiasi - Fungsi pemicu HTTP. Ini menggunakan pengikatan inputSignalRConnectionInfo untuk menghasilkan dan mengembalikan informasi koneksi yang valid.
• siaran - fungsi pemicu Event Grid. Ini menerima data telemetri Azure Digital Twins melalui kisi peristiwa, dan menggunakan pengikatan output instans SignalR yang Anda buat di langkah sebelumnya untuk menyiarkan pesan ke semua aplikasi klien yang terhubung.

Mulai Visual Studio atau editor kode lain pilihan Anda, dan buka solusi kode di folder digital-twins-samples-main\ADTSampleApp . Kemudian lakukan langkah-langkah berikut untuk membuat fungsi:

1. Dalam proyek SampleFunctionsApp, buat class C# baru yang disebut SignalRFungsi.cs.

2. Ganti isi file kelas dengan kode berikut:

   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. Di jendela Konsol Manajer Paket Visual Studio, atau jendela perintah apa pun di komputer Anda, navigasikan ke folder digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp, dan jalankan perintah berikut untuk menginstal SignalRService paket NuGet ke proyek:

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

   Menjalankan perintah ini harus menyelesaikan masalah ketergantungan apa pun di kelas.

4. Terbitkan fungsi ke Azure, menggunakan metode pilihan Anda.

   Untuk petunjuk tentang cara menerbitkan fungsi menggunakan Visual Studio, lihat Mengembangkan Azure Functions menggunakan Visual Studio. Untuk petunjuk tentang cara menerbitkan fungsi menggunakan Visual Studio Code, lihat Membuat fungsi C# di Azure menggunakan Visual Studio Code. Untuk instruksi tentang cara menerbitkan fungsi menggunakan Azure CLI, lihat Membuat fungsi C# di Azure dari baris perintah.

Mengkonfigurasi fungsi

Selanjutnya, konfigurasikan fungsi untuk berkomunikasi dengan instans Azure SignalR Anda. Anda akan mulai dengan mengumpulkan string koneksi instans SignalR,lalu menambahkannya ke pengaturan aplikasi fungsi.

1. Buka portal Microsoft Azure dan cari nama instans SignalR Anda di bilah pencarian di bagian atas portal. Pilih instans untuk membukanya.

2. Pilih Kunci dari menus instans untuk melihat string koneksi untuk instans SignalR Service.

3. Pilih ikon Salin untuk menyalin STRING KONEKSI Utama.

   

4. Terakhir, tambahkan string koneksi Azure SignalR Anda ke pengaturan aplikasi fungsi, menggunakan perintah CLI Azure berikut. Juga, ganti tempat penampung dengan grup sumber daya Anda dan nama aplikasi layanan/fungsi aplikasi dari prasyarat tutorial. Perintah dapat dijalankan di Azure Cloud Shell, atau secara lokal jika Anda memiliki Azure CLI yang terpasang di mesin Anda:

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

   Output perintah ini mencetak semua pengaturan aplikasi yang disiapkan untuk fungsi Azure Anda. Cari AzureSignalRConnectionString di bagian bawah daftar untuk memverifikasi bahwa daftar telah ditambahkan.

   

Menyambungkan fungsi ke Event Grid

Selanjutnya, berlangganan fungsi Siaran Azure ke topik Event Grid yang Anda buat selama prasyarat tutorial. Tindakan ini akan memungkinkan data telemetri mengalir dari kembar termostat67 melalui topik Event Grid dan ke fungsi . Dari sini, fungsi ini dapat menyiarkan data ke semua klien.

Untuk menyiarkan data, Anda akan membuat langganan Peristiwa dari topik Event Grid ke fungsi Azure siaran Anda sebagai titik akhir.

Di portal Azure, navigasikan ke topik Event Grid Anda dengan mencari namanya di bilah pencarian teratas. Pilih + Langganan Peristiwa.

Pada halaman Buat Langganan Kejadian, isi bidang sebagai berikut (bidang yang diisi secara default tidak disebutkan):

• DETAIL LANGGANAN PERISTIWA > Nama: Beri nama untuk langganan peristiwa Anda.
• DETAIL TITIK AKHIR > Jenis Titik Akhir: Pilih Azure Function dari opsi menu.
• Titik Akhir DETAIL>TITIK AKHIR: Pilih tautan Pilih titik akhir, yang akan membuka jendela Pilih Fungsi Azure:
  • Isi Langganan, Grup sumber daya, Aplikasi Fungsi, dan Fungsi (siaran) Anda. Beberapa bidang ini dapat diisi otomatis setelah memilih langganan.
  • Pilih Konfirmasi Pilihan.

Kembali ke halaman Membuat Langganan Peristiwa, pilih Buat.

Pada titik ini, Anda akan melihat dua langganan peristiwa di halaman Topik Event Grid.

Mengonfigurasikan dan menjalankan aplikasi web

Di bagian ini, Anda akan melihat hasilnya bertindak. Pertama, konfigurasikansampel aplikasi web klien untuk menyambungkan ke alur SignalR Azure yang telah Anda siapkan. Selanjutnya, Anda akan memulai aplikasi sampel perangkat simulasi yang mengirim data telemetri perangkat melalui instans Azure Digital Twins Anda. Setelah itu, Anda akan menampilkan aplikasi web sampel untuk melihat data perangkat simulasi yang memperbarui aplikasi web sampel secara real time.

Mengonfigurasikan sampel aplikasi web klien

Selanjutnya, Anda akan mengonfigurasikan sampel aplikasi web klien. Mulailah dengan mengumpulkan URL titik akhir HTTP dari fungsi negosiasi , lalu gunakan untuk mengonfigurasi kode aplikasi di komputer Anda.

1. Buka halaman Aplikasi fungsi portal Microsoft Azure dan pilih aplikasi fungsi Anda dari daftar. Di menu aplikasi, pilih Fungsi dan pilih fungsi negosiasi.

   

2. Pilih Dapatkan URL fungsi dan salin nilai hingga / api (jangan sertakan /negosiasi terakhir ?). Anda akan menggunakan nilai ini pada langkah berikutnya.

   

3. Menggunakan Visual Studio atau editor kode apa pun pilihan Anda, buka folder digitaltwins-signalr-webapp-sample-main yang tidak di-zip yang Anda unduh di bagian Unduh aplikasi sampel.

4. Buka file src/App.js, dan ganti URL fungsi dengan URLHubConnectionBuildertitik akhir HTTP dari fungsinegosiasi yang Anda simpan di langkah sebelumnya:

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

5. Di prompt perintah Pengembang Visual Studioatau jendela perintah apa pun di mesin Anda, navigasikan ke folder digitaltwins-signalr-webapp-sample-main\src. Jalankan perintah berikut untuk memasang paket simpul dependen:

   npm install
   

Berikutnya, atur izin di aplikasi fungsi Anda di portal Microsoft Azure:

1. Di halaman Aplikasi fungsi portal Microsoft Azure, pilih instans aplikasi fungsi Anda.

2. Gulir ke bawah di menu instans dan pilih CORS. Pada halaman CORS, tambahkan http://localhost:3000 sebagai asal yang diperbolehkan dengan memasukkannya ke dalam kotak kosong. Centang kotak untuk Aktifkan Access-Control-Allow-Credentials dan pilih Simpan.

   

Jalankan simulator perangkat

Selama prasyarat tutorial end-to-end, Anda mengonfigurasikan simulator perangkat untuk mengirim data melalui Azure IoT Hub dan ke instans Azure Digital Twins Anda.

Sekarang, mulai proyek simulator yang terletak di digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Jika Anda menggunakan Visual Studio, Anda dapat membuka proyek lalu menjalankannya dengan tombol ini di bar alat:

Jendela konsol akan terbuka dan menampilkan pesan telemetri suhu perangkat yang disimulasikan. Pesan ini dikirim melalui instans Azure Digital Twins Anda, yang kemudian diambil oleh fungsi Azure dan SignalR.

Anda tidak perlu melakukan hal lain di konsol ini, tetapi biarkan berjalan saat Anda menyelesaikan langkah berikutnya.

Lihat hasilnya

Untuk melihat hasil dalam tindakan, mulai sampel aplikasi web integrasi SignalR. Anda dapat melakukannya dari jendela konsol mana pun di lokasi digitaltwins-signalr-webapp-sample-main\src, dengan menjalankan perintah ini:

npm start

Menjalankan perintah ini akan membuka jendela browser yang menjalankan aplikasi sampel, yang menampilkan pengukur suhu visual. Setelah aplikasi berjalan, Anda harus mulai melihat nilai telemetri suhu dari simulator perangkat yang merambat melalui Azure Digital Twins yang dipantulkan oleh aplikasi web secara real time.

Membersihkan sumber daya

Jika Anda tidak lagi memerlukan sumber daya yang dibuat di artikel ini, ikuti langkah-langkah ini untuk menghapusnya.

Menggunakan Azure Cloud Shell atau Azure CLI lokal, Anda dapat menghapus semua sumber daya Azure dalam grup sumber daya dengan perintah hapus grup az. Menghapus grup sumber daya juga akan menghapus:

• Instans Azure Digital Twins (dari tutorial end-to-end)
• Hub IoT dan pendaftaran perangkat hub (dari tutorial end-to-end)
• Topik Event Grid dan langganan terkait
• Aplikasi Azure Functions, termasuk ketiga fungsi dan sumber daya terkait seperti penyimpanan
• Instans Azure SignalR

Penting

Penghapusan grup sumber daya tidak bisa dipulihkan. Grup sumber daya dan semua sumber daya yang tercakup di dalamnya akan dihapus secara permanen. Pastikan Anda tidak salah menghapus grup sumber daya atau sumber daya secara tidak sengaja.

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

Terakhir, hapus folder sampel proyek yang Anda unduh ke komputer lokal Anda (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip, dan rekan-rekan mereka yang tidak di-zip).

Langkah berikutnya

Dalam artikel ini, Anda menyiapkan fungsi Azure dengan SignalR untuk menyiarkan peristiwa telemetri Azure Digital Twins ke aplikasi klien sampel.

Selanjutnya, pelajari selengkapnya tentang Azure SignalR Service:

• Apa itu Azure SignalR Service?

Atau baca selengkapnya tentang Autentikasi Azure SignalR Service dengan Azure Functions:

• Autentikasi Azure SignalR Service