练习 - 分析基于轮询的 Web 应用的限制

15 分钟

在更改原型之前，需要运行它来验证假设。原型位于 GitHub 上的源代码存储库中。

创建 Azure 资源

在单独的浏览器选项卡或窗口中，使用以下链接分叉 GitHub 上的示例存储库：mslearn-advocates.azure-functions-and-signalr。通过此分支，可以将更改推送到自己的源代码版本。若要在模块的后面部分将源代码部署到 Azure，需要执行此步骤。

在终端中，克隆分叉存储库。在以下命令中，将 <YOUR-GITHUB-ALIAS> 替换为帐户：

git clone https://github.com/<YOUR-GITHUB-ALIAS>/mslearn-advocates.azure-functions-and-signalr stock-prototype

确保在需要时进入stock-prototype目录cd stock-prototype。在“setup-resources”文件夹中安装依赖项。
```
cd setup-resources && npm install
```
如果收到有关 EBADENGINE 的警告，可以忽略它们。
通过 Azure CLI 登录 Azure。
```
az login
```
在打开的浏览器中，登录到 Azure 帐户。

Visual Studio Code 终端显示与此帐户关联的订阅列表。
在列表中，找到要用于本次练习的订阅。

如果你在登录时错过了列表，则可以使用以下代码片段再次列出订阅。
```
az account list --output table
```
若要设置默认订阅，请将 YOUR-SUBSCRIPTION-ID 替换为上一 Azure CLI 输出中的订阅 ID。
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
此默认订阅用于创建 Azure 资源。
创建 Azure 资源并将示例数据上传到数据库。此过程可能需要几分钟才能完成。
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
请确保用双引号引用名称。如果脚本生成了有关缺少可用资源的位置的错误，请编辑脚本以更改位置： LOCATION=<NEW LOCATION>

从输出中复制以下信息并保存。需要它才能运行原型。

资源类型	环境变量
Azure Cosmos DB（Azure 宇宙数据库）	称为 COSMOSDB_CONNECTION_STRING
Azure 存储	称为 STORAGE_CONNECTION_STRING
资源组	称为 RESOURCE_GROUP_NAME。

在终端（仍在 setup-resources 目录中）使用 Node.js 脚本通过以下命令将示例数据上传到数据库中。
```
npm start
```
输出显示虚构股票应用程序的起始数据：
```
Seed data added. Symbol ABC
Seed data added. Symbol DEF
Seed data added. Symbol GHI
```
在终端中，导航到根文件夹。
```
cd ..
```

安装依赖项并运行原型

安装依赖项。

cd start/client && npm install && cd ../..
cd start/server && npm install && cd ../..

如果通知要求你为工作区选择 Azure Functions 应用，请选择 start/server。在后面的步骤中，使用此函数应用运行服务器端代码。
如果收到有关安装最新 Azure Functions Core Tools 的通知，请选择“安装”。

获取客户端和服务器 URL

在本地运行时，客户端和服务器应用程序需要知道在何处查找对方。 URL 为：

客户端：http://localhost:3000
服务器：http://localhost:7071

更新 Azure Functions 应用的本地设置

将连接字符串添加到原型的 Azure Functions 应用。

创建 ./start/server/local.settings.json 文件并粘贴以下内容。此文件具有本地函数项目的配置设置。

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
  },
  "Host" : {
    "LocalHttpPort": 7071,
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

使用之前复制和保存的值更新以下变量。

属性价值

AzureWebJobsStorage 替换为存储连接字符串。

COSMOSDB_CONNECTION_STRING 替换为 Cosmos DB 连接字符串。

现在，Functions 应用可以接收来自客户端的请求，然后连接到数据库并正确管理计时器触发器。

属性	价值
AzureWebJobsStorage	替换为存储连接字符串。
COSMOSDB_CONNECTION_STRING	替换为 Cosmos DB 连接字符串。

为客户端应用添加本地设置

将服务器 URL 添加到原型的客户端应用程序。

打开 ./start/client，并创建包含以下内容的 .env 文件。

BACKEND_URL=http://localhost:7071

运行服务器应用程序

通过在终端中输入以下命令来启动 Azure Functions 应用程序。
```
cd start/server && npm start
```

等待终端显示 API 终结点。

Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

运行客户端应用程序

在新终端中，启动客户端应用程序。
```
cd start/client && npm start
```
当通知显示应用程序正在运行时，请选择“在浏览器中打开”以使用原型。
排列浏览器窗口，以便同时查看股票价格的终端和原型。
在原型浏览器窗口中，打开浏览器的开发人员工具。请注意，浏览器每隔 5 秒向 API 发出一次请求，即使数据未更改。
在浏览器窗口中，监视 Azure Functions 应用的输出。每分钟一次股票价格都会变化。当 API 中的价格发生更改时，下一个客户端提取所有数据包括该更改。
在客户端和服务器的终端中，可以使用 Ctrl + C 来停止应用程序，也可以通过选择垃圾桶图标来关闭终端。

在本单元中，你运行了原型。虽然客户端确实成功运行，但效率并不高。每个客户在仅持有少量股票时，可能不会注意到效率低下的问题。随着股票数量和从服务器请求数据的客户数量增加，问题变得更加明显。可以改进原型。让我们在下一单元中了解操作方法。