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

Artykuł
08/21/2024

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 Connect jako 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
Konieczne będzie zainstalowanie Node.js na maszynie.

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

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 (więcej informacji na temat tego scenariusza można uzyskać w temacie Łą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 .zip, wybierając przycisk Kod i Pobierz plik ZIP.
Ten przycisk pobierze kopię przykładowego repozytorium na maszynie zgodnie z 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ę, co digitaltwins-signalr-webapp-sample-main.zip. Rozpakuj folder.

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.

Tworzenie wystąpienia usługi Azure SignalR

Następnie utwórz wystąpienie usługi Azure SignalR do użycia w tym artykule, postępując zgodnie z instrukcjami w temacie Tworzenie wystąpienia usługi Azure SignalR Service (na razie wykonaj tylko kroki opisane w tej sekcji).

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 SignalRConnectionInfo , 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.14.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.

Łączenie funkcji z usługą 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ń.

Zrzut ekranu przedstawiający sposób tworzenia subskrypcji zdarzeń w witrynie 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.

Zrzut ekranu przedstawiający formularz tworzenia subskrypcji zdarzeń w witrynie 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 folderze 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.

Zrzut ekranu przedstawiający przykładową aplikację internetową klienta z wizualnym miernikiem temperatury. Odzwierciedlona temperatura wynosi 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 niezamapowane 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

Udostępnij za pośrednictwem