Integrowanie usługi Azure Digital Twins z usługą Azure SignalR Service

Artykuł
11/16/2023

Z tego artykułu dowiesz się, jak zintegrować usługę Azure Digital Twins z usługą Azure SignalR Service.

Rozwiązanie opisane w tym artykule umożliwia wypychanie danych telemetrycznych cyfrowej reprezentacji bliźniaczej do połączonych klientów, takich jak jedna strona internetowa lub aplikacja mobilna. W związku z tym klienci są aktualizowani przy użyciu metryk i stanu w czasie rzeczywistym z urządzeń IoT bez konieczności sondowania serwera lub przesyłania nowych żądań HTTP dotyczących aktualizacji.

Wymagania wstępne

Poniżej przedstawiono wymagania wstępne, które należy wykonać przed kontynuowaniem:

Przed zintegrowaniem rozwiązania z usługą Azure SignalR Service w tym artykule należy ukończyć usługę Azure Digital Twins Połączenie kompleksowe rozwiązanie, ponieważ ten artykuł z instrukcjami jest oparty na nim. Ten samouczek przeprowadzi Cię przez proces konfigurowania wystąpienia usługi Azure Digital Twins, które współdziała z wirtualnym urządzeniem IoT w celu wyzwolenia aktualizacji cyfrowej reprezentacji bliźniaczej. Ten artykuł z instrukcjami spowoduje połączenie tych aktualizacji z przykładową aplikacją internetową przy użyciu usługi Azure SignalR Service.
W samouczku będą potrzebne następujące wartości:
- Temat usługi Event Grid
- Grupa zasobów
- Nazwa aplikacji usługi App Service/funkcji
Na maszynie będzie potrzebny plik Node.js .

Pamiętaj, aby zalogować się do witryny Azure Portal przy użyciu konta platformy Azure, ponieważ musisz go użyć w tym przewodniku.

Architektura rozwiązania

Dołączysz usługę Azure SignalR Service do usługi Azure Digital Twins za pomocą poniższej ścieżki. Sekcje A, B i C na diagramie pochodzą z diagramu architektury kompleksowego wymagań wstępnych samouczka. W tym artykule z instrukcjami utworzysz sekcję D dotyczącą istniejącej architektury, która zawiera dwie nowe funkcje platformy Azure komunikujące się z usługą SignalR i aplikacjami klienckimi.

Pobieranie przykładowych aplikacji

Najpierw pobierz wymagane przykładowe aplikacje. Będziesz potrzebować obu następujących przykładów:

Kompleksowe przykłady usługi Azure Digital Twins: ten przykład zawiera aplikację AdtSampleApp, która zawiera dwie funkcje platformy Azure do przenoszenia danych wokół wystąpienia usługi Azure Digital Twins (możesz dowiedzieć się więcej na temat tego scenariusza w Połączenie kompleksowego rozwiązania). Zawiera również przykładową aplikację DeviceSimulator , która symuluje urządzenie IoT, generując nową wartość temperatury co sekundę.
- Jeśli przykład nie został jeszcze pobrany w ramach samouczka w sekcji Wymagania wstępne, przejdź do przykładu i wybierz przycisk Przeglądaj kod poniżej tytułu. Spowoduje to przejście do repozytorium GitHub dla przykładów, które można pobrać jako plik zip, wybierając przycisk Kod i Pobierz plik ZIP.
Ten przycisk pobierze kopię przykładowego repozytorium na maszynie jako digital-twins-samples-main.zip. Rozpakuj folder.
Przykład aplikacji internetowej integracji usługi SignalR: ta przykładowa aplikacja internetowa React będzie używać danych telemetrycznych usługi Azure Digital Twins z usługi Azure SignalR Service.
- Przejdź do przykładowego linku i użyj tego samego procesu pobierania, aby pobrać kopię przykładu na maszynę, ponieważ digitaltwins-signalr-webapp-sample-main.zip. Rozpakuj folder.

W tej sekcji utworzysz podstawowe wystąpienie usługi Azure SignalR do użycia dla aplikacji. Poniższe kroki umożliwiają utworzenie nowego wystąpienia za pomocą witryny Azure Portal, ale można również użyć interfejsu wiersza polecenia platformy Azure. Aby uzyskać więcej informacji, zobacz polecenie az signalr create w dokumentacji interfejsu wiersza polecenia usługi Azure SignalR Service.

Zaloguj się w witrynie Azure Portal.
W lewym górnym rogu strony wybierz pozycję + Utwórz zasób.
Na stronie Tworzenie zasobu w polu tekstowym usługa wyszukiwania s i marketplace wprowadź signalr, a następnie wybierz pozycję SignalR Service z listy.
Na stronie SignalR Service wybierz pozycję Utwórz.
Na karcie Podstawy wprowadź podstawowe informacje dotyczące nowego wystąpienia usługi SignalR Service. Wprowadź następujące wartości:

Pole	Sugerowana wartość	opis
Subskrypcja	Wybierz swoją subskrypcję	Wybierz subskrypcję, której chcesz użyć, aby utworzyć nowe wystąpienie usługi SignalR Service.
Grupa zasobów:	Tworzenie grupy zasobów o nazwie SignalRTestResources	Wybierz lub utwórz grupę zasobów dla zasobu usługi SignalR. Warto utworzyć nową grupę zasobów na potrzeby tego samouczka zamiast używać istniejącej grupy zasobów. Aby zwolnić zasoby po ukończeniu samouczka, usuń grupę zasobów. Usunięcie grupy zasobów powoduje również usunięcie wszystkich zasobów należących do grupy. Tej akcji nie można cofnąć. Przed usunięciem grupy zasobów upewnij się, że nie zawiera ona zasobów, które chcesz zachować. Więcej informacji można znaleźć w temacie Using resource groups to manage your Azure resources (Używanie grup zasobów do zarządzania zasobami platformy Azure).
Nazwa zasobu	testsignalr	Podaj unikatową nazwę zasobu do użycia dla zasobu usługi SignalR. Jeśli testsignalr jest już wykonany w Twoim regionie, dodaj cyfrę lub znak, dopóki nazwa nie będzie unikatowa. Nazwa musi być ciągiem od 1 do 63 znaków i zawierać tylko cyfry, litery i znak łącznika (`-`). Nazwa nie może zaczynać ani kończyć się znakiem łącznika, a kolejne znaki łącznika są nieprawidłowe.
Region	Wybierz region	Wybierz odpowiedni region dla nowego wystąpienia usługi SignalR Service. Usługa Azure SignalR Service nie jest obecnie dostępna we wszystkich regionach. Aby uzyskać więcej informacji, zobacz Dostępność regionów usługi Azure SignalR Service
Warstwa cenowa	Wybierz pozycję Zmień , a następnie wybierz pozycję Bezpłatna (tylko tworzenie i testowanie). Wybierz pozycję Wybierz , aby potwierdzić wybór warstwy cenowej.	Usługa Azure SignalR Service ma trzy warstwy cenowe: Bezpłatna, Standardowa i Premium. Samouczki korzystają z warstwy Bezpłatna, chyba że określono inaczej w wymaganiach wstępnych. Aby uzyskać więcej informacji o różnicach funkcjonalności między warstwami i cenami, zobacz Cennik usługi Azure SignalR Service
Tryb usługi	Wybieranie odpowiedniego trybu usługi	Użyj wartości Domyślnej podczas hostowania logiki centrum SignalR w aplikacjach internetowych i używania usługi SignalR jako serwera proxy. Używaj technologii bezserwerowych , takich jak Azure Functions, do hostowania logiki centrum SignalR. Tryb klasyczny jest przeznaczony tylko dla zgodności z poprzednimi wersjami i nie jest zalecany do użycia. Aby uzyskać więcej informacji, zobacz Tryb usługi w usłudze Azure SignalR Service.

Nie musisz zmieniać ustawień na kartach Sieć i tagi samouczków usługi SignalR.

Wybierz przycisk Przejrzyj i utwórz w dolnej części karty Podstawy.
Na karcie Przeglądanie i tworzenie przejrzyj wartości, a następnie wybierz pozycję Utwórz. Ukończenie wdrożenia zajmuje kilka chwil.
Po zakończeniu wdrażania wybierz przycisk Przejdź do zasobu .
Na stronie zasobu usługi SignalR wybierz pozycję Klucze z menu po lewej stronie w obszarze Ustawienia.
Skopiuj ciąg Połączenie ion dla klucza podstawowego. Ta parametry połączenia jest potrzebna do skonfigurowania aplikacji w dalszej części tego samouczka.

Pozostaw otwarte okno przeglądarki w witrynie Azure Portal, ponieważ użyjesz go ponownie w następnej sekcji.

Publikowanie i konfigurowanie aplikacji usługi Azure Functions

W tej sekcji skonfigurujesz dwie funkcje platformy Azure:

negotiate — funkcja wyzwalacza HTTP. Używa powiązania wejściowego SignalR Połączenie ionInfo, aby wygenerować i zwrócić prawidłowe informacje o połączeniu.
broadcast — funkcja wyzwalacza usługi Event Grid . Odbiera ona dane telemetryczne usługi Azure Digital Twins za pośrednictwem usługi Event Grid i używa powiązania wyjściowego wystąpienia usługi SignalR utworzonego w poprzednim kroku w celu emisji komunikatu do wszystkich połączonych aplikacji klienckich.

Uruchom program Visual Studio lub inny wybrany edytor kodu i otwórz rozwiązanie kodu w folderze digital-twins-samples-main\ADTSampleApp . Następnie wykonaj następujące kroki, aby utworzyć funkcje:

W projekcie SampleFunctionsApp utwórz nową klasę języka C# o nazwie SignalRFunctions.cs.

Zastąp zawartość pliku klasy następującym kodem:

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 }
                });
        }
    }
}

W oknie konsoli Menedżer pakietów programu Visual Studio lub dowolnym oknie polecenia na maszynie przejdź do folderu digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp i uruchom następujące polecenie, aby zainstalować SignalRService pakiet NuGet w projekcie:
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService --version 1.2.0
```
Uruchomienie tego polecenia powinno rozwiązać wszelkie problemy z zależnościami w klasie .
Opublikuj funkcję na platformie Azure przy użyciu preferowanej metody.

Aby uzyskać instrukcje dotyczące publikowania funkcji przy użyciu programu Visual Studio, zobacz Tworzenie usługi Azure Functions przy użyciu programu Visual Studio. Aby uzyskać instrukcje dotyczące publikowania funkcji przy użyciu programu Visual Studio Code, zobacz Tworzenie funkcji języka C# na platformie Azure przy użyciu programu Visual Studio Code. Aby uzyskać instrukcje dotyczące publikowania funkcji przy użyciu interfejsu wiersza polecenia platformy Azure, zobacz Tworzenie funkcji języka C# na platformie Azure z poziomu wiersza polecenia.

Konfigurowanie funkcji

Następnie skonfiguruj funkcję do komunikowania się z wystąpieniem usługi Azure SignalR. Zaczniesz od zebrania parametry połączenia wystąpienia usługi SignalR, a następnie dodania go do ustawień aplikacji funkcji.

Przejdź do witryny Azure Portal i wyszukaj nazwę wystąpienia usługi SignalR na pasku wyszukiwania w górnej części portalu. Wybierz wystąpienie, aby je otworzyć.
Wybierz pozycję Klucze z menu wystąpienia, aby wyświetlić parametry połączenia dla wystąpienia usługi SignalR.
Wybierz ikonę Kopiuj, aby skopiować podstawowe parametry POŁĄCZENIA.
Na koniec dodaj parametry połączenia usługi Azure SignalR do ustawień aplikacji funkcji przy użyciu następującego polecenia interfejsu wiersza polecenia platformy Azure. Zastąp również symbole zastępcze nazwą grupy zasobów i aplikacji app service/function z wymagań wstępnych samouczka. Polecenie można uruchomić w usłudze Azure Cloud Shell lub lokalnie, jeśli na maszynie jest zainstalowany interfejs wiersza polecenia platformy Azure:
```
az functionapp config appsettings set --resource-group <your-resource-group> --name <your-function-app-name> --settings "AzureSignalRConnectionString=<your-Azure-SignalR-ConnectionString>"
```
Dane wyjściowe tego polecenia wyświetla wszystkie ustawienia aplikacji skonfigurowane dla funkcji platformy Azure. AzureSignalRConnectionString Poszukaj w dolnej części listy, aby sprawdzić, czy została dodana.

Połączenie funkcji do usługi Event Grid

Następnie zasubskrybuj funkcję emisji platformy Azure do tematu usługi Event Grid utworzonego podczas wymagań wstępnych samouczka. Ta akcja umożliwi przepływ danych telemetrycznych z bliźniaczej reprezentacji termostat67 za pośrednictwem tematu usługi Event Grid i do funkcji. W tym miejscu funkcja może rozgłaszać dane wszystkim klientom.

Aby rozgłasić dane, utworzysz subskrypcję zdarzeń z tematu usługi Event Grid do funkcji emisji platformy Azure jako punktu końcowego.

W witrynie Azure Portal przejdź do tematu usługi Event Grid, wyszukując jego nazwę na górnym pasku wyszukiwania. Wybierz pozycję + Subskrypcja zdarzeń.

Screenshot of how to create an event subscription in the Azure portal.

Na stronie Tworzenie subskrypcji zdarzeń wypełnij pola w następujący sposób (pola wypełnione domyślnie nie są wymienione):

NAZWA SZCZEGÓŁÓW>SUBSKRYPCJI ZDARZEŃ: nadaj nazwę subskrypcji zdarzeń.
Typ punktu końcowego SZCZEGÓŁY>punktu końcowego: wybierz pozycję Funkcja platformy Azure z opcji menu.
Punkt końcowy SZCZEGÓŁÓW>punktu końcowego: wybierz link Wybierz punkt końcowy, który otworzy okno Wybierz funkcję platformy Azure:
- Wypełnij pola Subskrypcja, Grupa zasobów, Aplikacja funkcji i Funkcja (emisja). Niektóre z tych pól mogą zostać automatycznie wypełniane po wybraniu subskrypcji.
- Wybierz pozycję Potwierdź wybór.

Screenshot of the form for creating an event subscription in the Azure portal.

Po powrocie na stronę Tworzenie subskrypcji zdarzeń wybierz pozycję Utwórz.

W tym momencie na stronie Temat usługi Event Grid powinny zostać wyświetlone dwie subskrypcje zdarzeń.

Konfigurowanie i uruchamianie aplikacji internetowej

W tej sekcji zobaczysz wynik działania. Najpierw skonfiguruj przykładową aplikację internetową klienta w celu nawiązania połączenia z skonfigurowanym przepływem usługi Azure SignalR. Następnie uruchomisz przykładową aplikację urządzenia symulowanego, która wysyła dane telemetryczne urządzenia za pośrednictwem wystąpienia usługi Azure Digital Twins. Następnie wyświetlisz przykładową aplikację internetową, aby zobaczyć symulowane dane urządzenia aktualizujące przykładową aplikację internetową w czasie rzeczywistym.

Konfigurowanie przykładowej aplikacji internetowej klienta

Następnie skonfigurujesz przykładową aplikację internetową klienta. Zacznij od zebrania adresu URL punktu końcowego HTTP funkcji negotiate , a następnie użyj go do skonfigurowania kodu aplikacji na maszynie.

Przejdź do strony Aplikacje funkcji witryny Azure Portal i wybierz aplikację funkcji z listy. W menu aplikacji wybierz pozycję Funkcje i wybierz funkcję negotiate.
Wybierz pozycję Pobierz adres URL funkcji i skopiuj wartość za pośrednictwem /api (nie dołączaj ostatniego /negotiate?). Użyjesz tej wartości w następnym kroku.
Za pomocą programu Visual Studio lub dowolnego wybranego edytora kodu otwórz rozpakowany folder digitaltwins-signalr-webapp-sample-main pobrany w sekcji Pobierz przykładowe aplikacje.
Otwórz plik src/App.js i zastąp adres URL funkcji adresem HubConnectionBuilder URL punktu końcowego HTTP funkcji negotiate zapisanej w poprzednim kroku:
```
    const hubConnection = new HubConnectionBuilder()
        .withUrl('<Function-URL>')
        .build();
```
W wierszu polecenia dla deweloperów programu Visual Studio lub dowolnym oknie polecenia na maszynie przejdź do folderu digitaltwins-signalr-webapp-sample-main\src. Uruchom następujące polecenie, aby zainstalować pakiety węzłów zależnych:
```
npm install
```

Następnie ustaw uprawnienia w aplikacji funkcji w witrynie Azure Portal:

Na stronie Aplikacje funkcji w witrynie Azure Portal wybierz wystąpienie aplikacji funkcji.
Przewiń w dół w menu wystąpienia i wybierz pozycję CORS. Na stronie CORS dodaj http://localhost:3000 jako dozwolone źródło, wprowadzając je do pustego pola. Zaznacz pole wyboru Enable Access-Control-Allow-Credentials (Włącz kontrolę dostępu i zezwalaj na poświadczenia) i wybierz pozycję Zapisz.

Uruchamianie symulatora urządzenia

Podczas kompleksowego samouczka wstępnego skonfigurowano symulator urządzenia do wysyłania danych za pośrednictwem usługi IoT Hub i do wystąpienia usługi Azure Digital Twins.

Teraz uruchom projekt symulatora znajdujący się w lokalizacji digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln. Jeśli używasz programu Visual Studio, możesz otworzyć projekt, a następnie uruchomić go za pomocą tego przycisku na pasku narzędzi:

Zostanie otwarte okno konsoli i zostanie wyświetlone symulowane komunikaty telemetryczne dotyczące temperatury urządzenia. Te komunikaty są wysyłane za pośrednictwem wystąpienia usługi Azure Digital Twins, w którym są następnie pobierane przez funkcje platformy Azure i usługę SignalR.

Nie musisz wykonywać żadnych innych czynności w tej konsoli, ale pozostaw ją uruchomioną podczas wykonywania następnego kroku.

Zobacz wyniki

Aby wyświetlić wyniki działania, uruchom przykładową aplikację internetową integracji usługi SignalR. Możesz to zrobić w dowolnym oknie konsoli w lokalizacji digitaltwins-signalr-webapp-sample-main\src , uruchamiając następujące polecenie:

npm start

Uruchomienie tego polecenia spowoduje otwarcie okna przeglądarki z uruchomioną przykładową aplikacją, która wyświetla wizualny miernik temperatury. Po uruchomieniu aplikacji należy zacząć widzieć wartości telemetryczne temperatury z symulatora urządzenia, które propagują się za pośrednictwem usługi Azure Digital Twins odzwierciedlanej przez aplikację internetową w czasie rzeczywistym.

Screenshot of the sample client web app, showing a visual temperature gauge. The temperature reflected is 67.52.

Czyszczenie zasobów

Jeśli nie potrzebujesz już zasobów utworzonych w tym artykule, wykonaj następujące kroki, aby je usunąć.

Za pomocą usługi Azure Cloud Shell lub lokalnego interfejsu wiersza polecenia platformy Azure można usunąć wszystkie zasoby platformy Azure w grupie zasobów za pomocą polecenia az group delete . Usunięcie grupy zasobów spowoduje również usunięcie:

Wystąpienie usługi Azure Digital Twins (z kompleksowego samouczka)
Centrum IoT i rejestracja urządzeń centrum (z kompleksowego samouczka)
Temat usługi Event Grid i skojarzone subskrypcje
Aplikacja usługi Azure Functions, w tym wszystkie trzy funkcje i skojarzone zasoby, takie jak magazyn
Wystąpienie usługi Azure SignalR

Ważne

Usunięcie grupy zasobów jest nieodwracalne. Grupa zasobów oraz wszystkie zawarte w niej zasoby zostaną trwale usunięte. Uważaj, aby nie usunąć przypadkowo niewłaściwych zasobów lub grupy zasobów.

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

Na koniec usuń foldery przykładowe projektu pobrane na komputer lokalny (digital-twins-samples-main.zip, digitaltwins-signalr-webapp-sample-main.zip i ich rozpakowane odpowiedniki).

Następne kroki

W tym artykule skonfigurujesz funkcje platformy Azure za pomocą usługi SignalR w celu emisji zdarzeń telemetrycznych usługi Azure Digital Twins do przykładowej aplikacji klienckiej.

Następnie dowiedz się więcej o usłudze Azure SignalR Service:

Co to jest usługa Azure SignalR Service?

Możesz też dowiedzieć się więcej na temat uwierzytelniania usługi Azure SignalR Service za pomocą usługi Azure Functions:

Uwierzytelnianie w usłudze Azure SignalR Service