练习 - 使用 SignalR 服务在 Web 应用程序中启用自动更新

12 分钟

若要将 SignalR 添加到此原型，需要：

创建 Azure SignalR 资源。
通过创建一些新函数来支持 SignalR。
更新客户端，使其支持 SignalR。

创建 SignalR 资源

需要创建 Azure SignalR 资源。

返回到终端以创建 SignalR 资源。

导航到 setup-resources 子目录并创建资源。

cd setup-resources && bash create-signalr-resources.sh & cd ..

复制并保存 SignalR 资源的连接字符串。需要此值才能更新服务器代码。

资源类型环境变量

Azure SignalR 称为 SIGNALR_CONNECTION_STRING

资源类型	环境变量
Azure SignalR	称为 SIGNALR_CONNECTION_STRING

更新服务器配置环境变量

在 ./start/server/local.settings.json中，向 Values 对象添加一个变量，该对象使用终端中列出的值命名 SIGNALR_CONNECTION_STRING 并保存文件。

创建 `signalr-open-connection` 函数

Web 客户端使用 SignalR 客户端 SDK 来建立与服务器的连接。 SDK 通过名为 signalr-open-connection 的函数检索连接，以连接到服务。

按 F1 打开 Visual Studio Code 命令面板。
搜索并选择“Azure Functions: Create Function 命令。
选择“设置默认”然后选择“启动/服务器”，以设置函数应用的位置。
当系统询问是否初始化项目以用于 VS Code时，请选择是。
出现提示时，请提供以下信息。

名称值

模板 HTTP 触发器

名称 signalr-open-connection

名为signalr-open-connection.ts的文件现已提供于./start/server/src/functions。

名称	值
模板	HTTP 触发器
名称	signalr-open-connection

打开 signalr-open-connection.ts ，并将所有内容替换为以下代码。

import { app, input } from '@azure/functions';

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.http('open-signalr-connection', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR]
});

SignalR 连接信息是从函数返回的。

创建 `signalr-send-message` 函数

按 F1 打开 Visual Studio Code 命令面板。
搜索并选择“Azure Functions: Create Function 命令。
选择功能应用的 启动/服务器 位置。

出现提示时，请提供以下信息。

名称	值
模板	Azure Cosmos DB 触发器
名称	`signalr-send-message`
Cosmos DB 连接字符串	COSMOSDB_CONNECTION_STRING
要监视的数据库名称	`stocksdb`
集合名称	`stocks`
检查是否存在，并自动创建租约集合	是

在 Visual Studio Code 中刷新资源管理器窗口并查看更新。名为signalr-open-connection的文件现已在./start/server/src/functions提供。

打开 signalr-send-message.ts ，并将所有内容替换为以下代码。

import { app, output, CosmosDBv4FunctionOptions, InvocationContext } from "@azure/functions";

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

export async function dataToMessage(documents: unknown[], context: InvocationContext): Promise<void> {

    try {

        context.log(`Documents: ${JSON.stringify(documents)}`);

        documents.map(stock => {
            // @ts-ignore
            context.log(`Get price ${stock.symbol} ${stock.price}`);
            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'updated',
                    'arguments': [stock]
                });
        });
    } catch (error) {
        context.log(`Error: ${error}`);
    }
}

const options: CosmosDBv4FunctionOptions = {
    connection: 'COSMOSDB_CONNECTION_STRING',
    databaseName: 'stocksdb',
    containerName: 'stocks',
    createLeaseContainerIfNotExists: true,
    feedPollDelay: 500,
    handler: dataToMessage,
    extraOutputs: [goingOutToSignalR],
};

app.cosmosDB('send-signalr-messages', options);

定义传入数据：对象 comingFromCosmosDB 定义 Cosmos DB 触发器来监视更改。
定义传出传输：对象 goingOutToSignalR 定义相同的 SignalR 连接。 hubName 是同一个中心 default。
将数据连接到传输：dataToMessage 获取表中stocks项，并使用同一中心 extraOutputs 并使用 default 通过SignalR 单独发送每个已更改的项。
连接到应用：将 app.CosmosDB 绑定到函数名称 send-signalr-messages。

提交更改并推送到 GitHub

在终端中，将更改提交到存储库。

git add .
git commit -m "Add SignalR functions"
git push origin main

创建 Azure Functions 应用

在 Azure 中创建一个函数应用和相关资源，可以将新函数代码发布到其中。

打开 Azure 门户以创建新的函数应用。

使用以下信息填写资源创建页面上的“基本信息”选项卡。

名称	值
承载	选择“消耗计划”。
资源组	创建新的资源组名称 `stock-prototype`。
函数应用名称	将名称追加到 `api` 后面。例如 `api-jamie`。
代码或容器	选择“代码”。
运行时堆栈	选择“Node.js”。
版本	选择Node.js 的 LTS 版本。
区域	选择附近的区域。
操作系统	选择“Linux”。

不要填写任何其他选项卡，然后选择“查看 + 创建”，然后选择“创建”。等待部署完成，然后继续。
选择“转到资源”以打开新的函数应用。

配置 GitHub 部署

若要启用持续部署，请将新函数应用连接到 GitHub 存储库。在生产环境中，在将代码更改交换到生产环境之前，应将代码更改部署到过渡槽。

在新函数应用的 Azure 门户页中，从左侧菜单中选择“部署中心”。
选择 GitHub 的源。

使用以下信息完成部署配置。

名称	值
组织	选择你的 GitHub 帐户。
存储库	搜索并选择 `mslearn-advocates.azure-functions-and-signalr`。
分支	选择主分支。
身份验证类型	选择“用户分配的标识”。
订阅	选择与页面顶部相同的订阅。
标识	选择“新建”。

选择部分顶部的“保存”以保存设置。在分叉存储库中创建一个新的工作流文件。
此部署配置在存储库中创建 GitHub Actions 工作流文件。需要更新工作流文件，以便为函数应用使用正确的包路径。

编辑 GitHub 部署工作流

在 Visual Studio Code 终端中，从分支（源）中拉取新的工作流文件。
```
git pull origin main
```
此命令应在 .github 处创建一个新文件夹，并设置工作流文件的路径：.github/workflows/main_RESOURCE_NAME.yml，其中 RESOURCE_NAME 是函数应用程序的名称。
打开工作流文件并将文件顶部的 name 值更改为 Server。
由于源存储库在子目录中具有函数应用，因此操作文件需要更改才能反映这一点。在 env 节中，添加一个新变量，并命名为 PACKAGE_PATH 以使用包路径。
```
env:
  PACKAGE_PATH: 'start/server'
```

查找“使用 Npm 解析项目依赖项”步骤，并将内容替换为以下 YAML，以使用包子目录路径。关键更改是 pushd 命令中要包含 env.PACKAGE_PATH 变量的路径。

- name: 'Resolve Project Dependencies Using Npm'
  shell: bash
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    npm install
    npm run build --if-present
    npm run test --if-present
    popd

找到“用于部署的 Zip 项目”步骤，并将内容替换为以下 YAML，以使用包子目录路径。

- name: Zip artifact for deployment
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    zip -r release.zip .
    popd
    cp ./${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}/release.zip ./release.zip

zip 文件放置在存储库的根目录中，因此需要 ../ 值才能将 zip 文件放在根目录。

保存文件并将更改提交到存储库。
```
git add .
git commit -m "Update deployment workflow to use package path"
git push origin main
```
此更改触发工作流的运行。可以从 GitHub 上的分支“操作”部分观看工作流。

为 API 函数配置环境变量

在 Azure 门户中，找到函数应用并选择 “设置>环境变量 ”，然后选择“ + 添加”。
输入 Cosmos DB 和 SignalR 连接字符串的设置。可以在 local.settings.json 文件夹中的 start/server 中找到这些值。

名称值

COSMOSDB_CONNECTION_STRING Cosmos DB 帐户的连接字符串。

SIGNALR_CONNECTION_STRING SignalR 帐户的连接字符串。
选择“ 保存” 以保存设置。

名称	值
COSMOSDB_CONNECTION_STRING	Cosmos DB 帐户的连接字符串。
SIGNALR_CONNECTION_STRING	SignalR 帐户的连接字符串。

测试 API 函数的部署

在 Azure 门户中，选择“ 概述 ”并选择 “默认域 ”以在浏览器中打开应用以测试 API 函数。
追加 /api/getStocks 到浏览器中的 URL，然后按 Enter。应会看到包含股票数据的 JSON 数组。
复制 URL，在单元 7 中为 BACKEND_URL 值更新客户端 .env 文件需要用到此 URL。

你已更新服务器代码以使用 SignalR 返回股票，并且已部署到函数应用。接下来，更新客户端以使用 SignalR 接收更新。