你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

将 Azure 数字孪生与 Azure SignalR 服务集成

项目
03/31/2023

本文介绍如何将 Azure 数字孪生与 Azure SignalR 服务集成。

通过本文中所述的解决方案，可以将数字孪生遥测数据推送到连接的客户端，例如单个网页或移动应用程序。因此，客户端将使用 IoT 设备的实时指标和状态进行更新，而无需轮询服务器或提交新的 HTTP 请求来获得更新内容。

先决条件

下面是在继续操作之前应完成的必备条件：

在将你的解决方案与本文中的 Azure SignalR 服务集成之前，应先完成 Azure 数字孪生连接端到端解决方案，因为本操作方法文章以该方案为基础。本教程介绍如何设置 Azure 数字孪生实例，以使该实例与虚拟 IoT 设备一起触发数字孪生体更新。本操作说明将使用 Azure SignalR 服务将这些更新连接到示例 Web 应用。
需要使用本教程中的以下值：
- 事件网格主题
- 资源组
- 应用服务/函数应用名称
需要在计算机上安装 Node.js。

确保使用 Azure 帐户登录到 Azure 门户，因为需要在本指南中使用它。

解决方案体系结构

将通过以下路径将 Azure SignalR 服务附加到 Azure 数字孪生。图中 A、B 和 C 部分取自端到端教程必备条件的体系结构图。在本操作指南文章中，将在现有体系结构上生成 D 部分，其中包括与 SignalR 和客户端应用通信的两个新 Azure 函数。

下载示例应用程序

首先，下载所需的示例应用。需要以下两个示例：

Azure 数字孪生端到端示例：此示例包含一个 AdtSampleApp，它包含两个用于移动 Azure 数字孪生实例相关数据的 Azure 函数（可以在连接端到端解决方案中详细了解此方案）。此外还包含一个 devicesimulator.exe 示例应用程序，可模拟 IoT 设备，每秒生成一个新的温度值。
- 如果尚未下载此示例作为本教程先决条件的一部分，请导航到示例，然后选择标题下面的“浏览代码”按钮。此时会转到这些示例的 GitHub 存储库，可以通过选择“代码”按钮和“下载 ZIP”将其下载为 .zip。
此按钮会将示例存储库副本以 digital-twins-samples-main.zip 形式下载到计算机上。解压缩文件夹。
SignalR 集成 Web 应用示例：此示例 React Web 应用将使用来自 Azure SignalR 服务中的 Azure 数字孪生遥测数据。
- 导航到示例链接，并使用相同的下载过程将示例副本以 digitaltwins-signalr-webapp-sample-main.zip 形式下载到计算机。解压缩文件夹。

在本部分中，你将创建一个基本 Azure SignalR 实例来用于你的应用。以下步骤使用 Azure 门户创建新实例，但你也可以使用 Azure CLI。有关详细信息，请参阅 Azure SignalR 服务 CLI 参考中的 az signalr create 命令。

登录 Azure 门户。
在页面的左上角，选择“+ 创建资源” 。
在“创建资源”页上，在“搜索服务和市场”文本框中，输入“signalr”，然后从列表中选择“SignalR 服务”。
在“SignalR 服务”页上，选择“创建”。
在“基本信息”选项卡上，输入新 SignalR 服务实例的基本信息。输入以下值：

字段	建议的值	描述
订阅	选择订阅	选择要用于创建新的 SignalR 服务实例的订阅。
资源组	创建一个名为 SignalRTestResources 的资源组	为 SignalR 资源选择或创建资源组。对于本教程，创建新的资源组比使用现有资源组更为合适。若要在完成本教程后释放资源，请删除资源组。删除资源组还会删除属于该组的所有资源。此操作不能撤消。删除资源组之前，请确保它不包含你希望保留的资源。有关详细信息，请参阅 Using resource groups to manage your Azure resources（使用资源组管理 Azure 资源）。
资源名称	testsignalr	输入用于 SignalR 资源的唯一资源名称。如果你的区域中已使用了 testsignalr，请添加一个数字或字符，以将名称设为唯一。该名称必须是包含 1 到 63 个字符的字符串，只能包含数字、字母和连字符 (`-`) 字符。该名称的开头或末尾不能是连字符字符，并且连续的连字符字符无效。
区域	选择你的区域	为新的 SignalR 服务实例选择合适的区域。 Azure SignalR 服务当前并非在所有区域中都可用。有关详细信息，请参阅 Azure SignalR 服务区域可用性。
定价层	选择“更改”，然后选择“免费(仅限开发/测试)”。选择“选择”以确认你选择的定价层。	Azure SignalR 服务有三个定价层：免费、标准和高级。教程使用的是免费层，除非在先决条件中另行说明。若要详细了解各个层级之间的功能差异以及定价，请参阅 Azure SignalR 服务定价
服务模式	选择适当的服务模式	在 Web 应用中托管 SignalR 中心逻辑并使用 SignalR 服务作为代理时，请使用“默认”。使用无服务器技术（如 Azure Functions）托管 SignalR 中心逻辑时，请使用“无服务器”。 “经典”模式仅用于向后兼容，不建议使用。有关详细信息，请参阅 Azure SignalR 服务中的服务模式。

对于 SignalR 教程，你不需要更改“网络”和“标记”选项卡上的设置。

选择“基本信息”选项卡底部的“查看 + 创建”按钮。
在“查看 + 创建”选项卡上检查各个值，然后选择“创建”。部署需要几分钟时间才能完成。
在部署完成后，选择“转到资源组”按钮。
在 SignalR 资源页面上，从左侧菜单中选择“设置”下的“密钥”。
复制主密钥的连接字符串。在本教程中，稍后你将需要使用此连接字符串来配置你的应用。

保持打开浏览器窗口并显示 Azure 门户，因为将在下一部分再次使用它。

发布并配置 Azure 函数应用

在本部分中，将设置两个 Azure 函数：

negotiate - HTTP 触发器函数。它使用 SignalRConnectionInfo 输入绑定生成并返回有效的连接信息。
broadcast - 事件网格触发器函数。它通过事件网格接收 Azure 数字孪生遥测数据，并使用在上一步创建的 SignalR 实例的输出绑定将消息广播到所有连接的客户端应用程序。

启动 Visual Studio 或选择其他代码编辑器，然后在 digital-twins-samples-main\ADTSampleApp 文件夹中打开代码解决方案。按下列步骤创建函数：

在 SampleFunctionsApp 项目中，新建一个名为 SignalRFunctions.cs 的 c # 类。

将类文件的内容替换为以下代码：

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

在 Visual Studio 的“包管理器控制台”窗口或计算机的任何命令窗口中，导航到 digital-twins-samples-main\AdtSampleApp\SampleFunctionsApp 文件夹，并运行以下命令将 SignalRService NuGet 包安装到项目：
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService --version 1.2.0
```
运行此命令应该能解决类中的所有依赖项问题。
使用首选方法将函数发布到 Azure。

若要了解如何使用 Visual Studio 发布函数，请参阅使用 Visual Studio 开发 Azure Functions。若要了解如何使用 Visual Studio Code 发布函数，请参阅使用 Visual Studio Code 在 Azure 中创建 C# 函数。若要了解如何使用 Azure CLI 发布函数，请参阅在 Azure 中从命令行创建 C# 函数。

配置函数

接下来，将该函数配置为与 Azure SignalR 实例通信。首先收集 SignalR 实例的连接字符串，然后将其添加到函数应用的设置。

转到 Azure 门户，在门户顶部的搜索栏中搜索 SignalR 实例的名称。选择该实例以将其打开。
从实例菜单选择“密钥”，以查看 SignalR 服务实例的连接字符串。
选择“复制”图标以复制主连接字符串。
最后，使用以下 Azure CLI 命令将 Azure SignalR 连接字符串添加到函数应用的设置中。此外，还需将占位符替换为在教程必备条件中准备的资源组和应用服务/函数应用名称。可在 Azure Cloud Shell 中运行此命令，如果计算机中安装了 Azure CLI，也可在本地运行它：
```
az functionapp config appsettings set --resource-group <your-resource-group> --name <your-function-app-name> --settings "AzureSignalRConnectionString=<your-Azure-SignalR-ConnectionString>"
```
此命令的输出将打印为 Azure 函数设置的所有应用设置。在列表底部查找 AzureSignalRConnectionString，验证是否已添加。

将函数连接到事件网格

接下来，将广播 Azure 函数订阅到在教程先决条件中创建的事件网格主题。此操作会使遥测数据从 thermostat67 孪生体经由事件网格主题流向该函数。在这里，该函数会将数据广播到所有客户端。

要广播此数据，需要从事件网格主题创建一个事件订阅，将其作为终结点广播到 Azure 函数。

在 Azure 门户中，导航到事件网格主题，方法是在顶部搜索栏中搜索其名称。选择“+ 事件订阅”。

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

在“创建事件订阅”页中，按下面所示填写字段（默认填充的字段未提及）：

事件订阅详细信息 > 名称：为事件订阅指定名称。
终结点详细信息 > 终结点类型：从菜单选项中选择“Azure 函数”。
终结点详细信息>终结点：选择终结点链接，这将打开“选择 Azure 函数”窗口：
- 填写“订阅”、“资源组”、“函数应用”和“函数”(broadcast)。在选择订阅后，其中一些字段可能会自动填充。
- 选择“确认所选内容” 。

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

返回“创建事件订阅”页，选择“创建”。

此时，“事件网格主题”页中应会出现两个事件订阅。

配置和运行 Web 应用

在本部分中，将看到操作结果。首先，将示例客户端 Web 应用配置为连接到已设置的 Azure SignalR 流。接下来，你将启动模拟设备示例应用，该应用通过 Azure 数字孪生实例发送设备遥测数据。之后，查看示例 Web 应用，可以看到实时更新示例 Web 应用的模拟设备数据。

配置示例客户端 Web 应用

接下来，配置示例客户端 Web 应用。首先收集 negotiate 函数的 HTTP 终结点 URL，然后在计算机中使用它配置应用代码。

转到 Azure 门户的“函数应用”页，并从列表中选择函数应用。在应用菜单中，选择“函数”，然后选择 negotiate 函数。
选择“获取函数 URL”并复制自开头到 /api 结尾的值（不包含最后的 /negotiate?）。下一步骤中将使用此值。
使用 Visual Studio 或所选的任何代码编辑器，打开在下载示例应用程序部分中下载的 digitaltwins-signalr-webapp-main 已解压缩文件夹。
打开 src/App.js 文件，将 HubConnectionBuilder 中的函数 URL 替换为上一个步骤中保存的 negotiate 函数的 HTTP 终结点 URL：
```
    const hubConnection = new HubConnectionBuilder()
        .withUrl('<Function-URL>')
        .build();
```
在 Visual Studio 的“开发人员命令提示符”或计算机上的任何命令窗口中，导航到 digitaltwins-signalr-webapp-sample-main\src 文件夹。运行以下命令以安装依赖节点包：
```
npm install
```

接下来，在 Azure 门户的函数应用中设置权限：

在 Azure 门户的“函数应用”页中，选择函数应用实例。
在实例菜单中向下滚动，选择“CORS”。在“CORS”页中，通过将 http://localhost:3000 输入到空白方框中，添加其作为允许的源。选中“启用 Access-Control-Allow-Credentials”复选框，然后选择“保存”。

使用设备模拟器

在端到端教程必备条件步骤中，已配置设备模拟器，使数据经由 IoT 中心发送到 Azure 数字孪生实例。

现在，启动位于 digital-twins-samples-main\DeviceSimulator\DeviceSimulator.sln 的模拟器项目。如果要使用 Visual Studio，则可以打开该项目，然后使用工具栏中的此按钮运行它：

控制台窗口将打开并显示模拟设备温度遥测消息。这些消息将通过 Azure 数字孪生实例发送，随后在其中由 Azure 函数和 SignalR 选取。

无需在此控制台中执行任何其他操作，只需在完成下一步操作时保持其运行状态。

查看结果

若要查看操作结果，请启动 SignalR 集成 Web 应用示例。可以在 digitaltwins-signalr-webapp-sample-main\src 位置通过运行以下命令从任何控制台窗口执行此操作：

npm start

运行此命令将打开一个运行示例应用的浏览器窗口，其中显示可视的温度仪表。应用运行后，应可以开始查看到温度遥测值，这些值从设备模拟器经由 Azure 数字孪生传播，并由 Web 应用实时反映。

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

清理资源

如果不再需要本文中创建的资源，请按照以下步骤删除它们。

利用 Azure Cloud Shell 或本地 Azure CLI，可以使用 az group delete 命令删除资源组中的所有 Azure 资源。删除资源组时也会删除以下项：

Azure 数字孪生实例（从端到端教程）
IoT 中心和中心设备注册（从端到端教程）
事件网格主题和关联的订阅
Azure Functions 应用，包括所有三个函数和关联的资源（如存储）
Azure SignalR 实例

重要

删除资源组的操作不可逆。资源组以及包含在其中的所有资源将被永久删除。请确保不会意外删除错误的资源组或资源。

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

最后，删除已下载到本地计算机的项目示例文件夹（digital-twins-samples-main.zip、digitaltwins-signalr-webapp-sample-main.zip，以及它们的解压缩对应项）。

后续步骤

本文介绍如何使用 SignalR 设置 Azure 函数，将 Azure 数字孪生遥测事件广播到示例客户端应用程序。

接下来，了解有关 Azure SignalR 服务的详细信息：

什么是 Azure SignalR 服务？

或者，阅读有关使用 Azure Functions 进行 Azure SignalR 服务身份验证的详细信息：

Azure SignalR 服务身份验证

Share via