您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

快速入门:使用 C# 通过 Azure Functions 和 SignalR 服务创建聊天室Quickstart: Create a chat room with Azure Functions and SignalR Service using C#

使用 Azure SignalR 服务可以轻松地将实时功能添加到应用程序。Azure SignalR Service lets you easily add real-time functionality to your application. Azure Functions 是一个无服务器平台,可让你在不管理任何基础结构的情况下运行代码。Azure Functions is a serverless platform that lets you run your code without managing any infrastructure. 本快速入门介绍了如何使用 SignalR 服务和 Functions 构建无服务器的实时聊天应用程序。In this quickstart, learn how to use SignalR Service and Functions to build a serverless, real-time chat application.

先决条件Prerequisites

如果尚未安装 Visual Studio 2019,可以下载并使用免费的 Visual Studio 2019 Community EditionIf you don’t already have Visual Studio 2019 installed, you can download and use the free Visual Studio 2019 Community Edition. 在安装 Visual Studio 的过程中,请确保启用“Azure 开发”。 Make sure that you enable Azure development during the Visual Studio setup.

也可以使用 Azure Functions Core Tools (v2).NET Core SDK 以及你喜欢的代码编辑器在命令行(macOS、Windows 或 Linux)上运行本教程。You may also run this tutorial on the command line (macOS, Windows, or Linux) using the Azure Functions Core Tools (v2), the .NET Core SDK, and your favorite code editor.

如果还没有 Azure 订阅,可以在开始前创建一个免费帐户If you don't have an Azure subscription, create a free account before you begin.

登录 AzureLog in to Azure

使用 Azure 帐户登录到 https://portal.azure.com/ 的 Azure 门户。Sign in to the Azure portal at https://portal.azure.com/ with your Azure account.

创建 Azure SignalR 服务实例Create an Azure SignalR Service instance

你的应用程序将连接到 Azure 中的 SignalR 服务实例。Your application will connect to a SignalR Service instance in Azure.

  1. 选择 Azure 门户左上角的“新建”按钮。Select the New button found on the upper left-hand corner of the Azure portal. 在“新建”屏幕中,在搜索框中键入“SignalR 服务” ,然后按 Enter。In the New screen, type SignalR Service in the search box and press enter.

    搜索“SignalR 服务”

  2. 从搜索结果中选择“SignalR 服务” ,然后选择“创建” 。Select SignalR Service from the search results, then select Create.

  3. 输入以下设置。Enter the following settings.

    设置Setting 建议的值Suggested value 说明Description
    资源名称Resource name 全局唯一名称Globally unique name 用于标识新的 SignalR 服务实例的名称。Name that identifies your new SignalR Service instance. 有效的字符是 a-z0-9-Valid characters are a-z, 0-9, and -.
    订阅Subscription 订阅Your subscription 在其下创建此新 SignalR 服务实例的订阅。The subscription under which this new SignalR Service instance is created.
    资源组Resource Group myResourceGroupmyResourceGroup 要在其中创建 SignalR 服务实例的新资源组的名称。Name for the new resource group in which to create your SignalR Service instance.
    位置Location 美国西部West US 选择你附近的区域Choose a region near you.
    定价层Pricing tier 免费Free 免费试用 Azure SignalR 服务。Try Azure SignalR Service for free.
    单位计数Unit count 不适用Not applicable 单位计数指定 SignalR 服务实例可以接受的连接数。Unit count specifies how many connections your SignalR Service instance can accept. 它只能在标准层中配置。It is only configurable in the Standard tier.
    服务模式Service mode 无服务器Serverless 用于 Azure Functions 或 REST API。For use with Azure Functions or REST API.

    创建 SignalR 服务

  4. 选择“创建” 以开始部署 SignalR 服务实例。Select Create to start deploying the SignalR Service instance.

  5. 部署该实例后,在门户中打开它并找到其“设置”页。After the instance is deployed, open it in the portal and locate its Settings page. 仅当通过 Azure Functions 绑定或 REST API 使用 Azure SignalR 服务时,才将“服务模式”设置更改为“无服务器” 。Change the Service Mode setting to Serverless only if you are using Azure SignalR Service through Azure Functions binding or REST API. 否则,将其保留在“经典” 或“默认” 中。Leave it in Classic or Default otherwise.

克隆示例应用程序Clone the sample application

在部署该服务时,让我们切换到使用代码。While the service is deploying, let's switch to working with code. 克隆来自 GitHub 的示例应用,设置 SignalR 服务连接字符串,并在本地运行该应用程序。Clone the sample app from GitHub, set the SignalR Service connection string, and run the application locally.

  1. 打开 git 终端窗口。Open a git terminal window. 切换到要克隆示例项目的文件夹。Change to a folder where you want to clone the sample project.

  2. 运行下列命令以克隆示例存储库。Run the following command to clone the sample repository. 此命令在计算机上创建示例应用程序的副本。This command creates a copy of the sample app on your computer.

    git clone https://github.com/Azure-Samples/signalr-service-quickstart-serverless-chat.git
    

配置和运行 Azure 函数应用Configure and run the Azure Function app

  1. 启动 Visual Studio(或其他代码编辑器),并打开所克隆存储库的 src/chat/csharp 文件夹中的解决方案。Start Visual Studio (or another code editor) and open the solution in the src/chat/csharp folder of the cloned repository.

  2. 在打开 Azure门户的浏览器中,通过在门户顶部的搜索框中搜索先前部署的 SignalR 服务实例的名称,确认该实例已成功创建。In the browser where the Azure portal is opened, confirm the SignalR Service instance you deployed earlier was successfully created by searching for its name in the search box at the top of the portal. 选择该实例以将其打开。Select the instance to open it.

    搜索 SignalR 服务实例

  3. 选择“密钥” 以查看 SignalR 服务实例的连接字符串。Select Keys to view the connection strings for the SignalR Service instance.

  4. 选择并复制主连接字符串。Select and copy the primary connection string.

  5. 返回到 Visual Studio 中,在解决方案资源管理器中,将 local.settings.sample.json 重命名 local.settings.jsonBack in Visual Studio, in Solution Explorer, rename local.settings.sample.json to local.settings.json.

  6. local.settings.json 中,将连接字符串粘贴到 AzureSignalRConnectionString 设置的值中。In local.settings.json, paste the connection string into the value of the AzureSignalRConnectionString setting. 保存文件。Save the file.

  7. 打开 Functions.csOpen Functions.cs. 此函数应用中有两个 HTTP 触发的函数:There are two HTTP triggered functions in this function app:

    • GetSignalRInfo - 使用 SignalRConnectionInfo 输入绑定来生成并返回有效的连接信息。GetSignalRInfo - Uses the SignalRConnectionInfo input binding to generate and return valid connection information.
    • SendMessage - 在请求正文中接收聊天消息,并使用 SignalR 输出绑定将消息广播到所有连接的客户端应用程序。SendMessage - Receives a chat message in the request body and uses the SignalR output binding to broadcast the message to all connected client applications.
  8. 使用以下选项之一在本地启动 Azure 函数应用。Use one of the following options to start the Azure Function app locally.

    • Visual Studio:在“调试”菜单中,选择“开始调试”以运行应用程序。 Visual Studio: In the Debug menu, select Start debugging to run the application.

      调试应用程序

    • 命令行:执行以下命令以启动函数主机。Command line: Execute the following command to start the function host.

      func start
      

运行 Web 应用程序Run the web application

  1. 为方便起见,GitHub 中有一个示例单页 Web 应用程序。There is a sample single page web application hosted in GitHub for your convenience. 将浏览器打开至 https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/Open your browser to https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/.

    备注

    HTML 文件的源位于 /docs/demo/chat-v2/index.htmlThe source of the HTML file is located at /docs/demo/chat-v2/index.html.

  2. 系统提示输入函数应用的基 URL 时,输入 http://localhost:7071When prompted for the function app base URL, enter http://localhost:7071.

  3. 出现提示时输入用户名。Enter a username when prompted.

  4. Web 应用程序调用函数应用中的 GetSignalRInfo 函数来检索连接信息以连接到 Azure SignalR 服务。The web application calls the GetSignalRInfo function in the function app to retrieve the connection information to connect to Azure SignalR Service. 连接完成后,将显示聊天消息输入框。When the connection is complete, the chat message input box appears.

  5. 键入消息,然后按 Enter。Type a message and press enter. 应用程序将该消息发送到 Azure Function 应用中的 SendMessage 函数,然后后者使用 SignalR 输出绑定将该消息广播到所有连接的客户端。The application sends the message to the SendMessage function in the Azure Function app, which then uses the SignalR output binding to broadcast the message to all connected clients. 如果一切正常工作,该消息应该出现在应用程序中。If everything is working correctly, the message should appear in the application.

    运行应用程序

  6. 在另一个浏览器窗口中打开另一个 Web 应用程序实例。Open another instance of the web application in a different browser window. 你将看到发送的任何消息都将出现在应用程序的所有实例中。You will see that any messages sent will appear in all instances of the application.

重要

由于 HTML 页面是使用 HTTPS 提供的,但本地 Azure Functions 运行时默认使用 HTTP,因此浏览器(例如 Firefox)可能会强制执行阻止从网页到函数的请求的混合内容策略。Because the HTML page is served using HTTPS, but the local Azure Functions runtime is using HTTP by default, your browser (such as Firefox) may enforce a mixed-content policy that blocks the requests from the web page to your functions. 要解决此问题,请使用没有此限制的浏览器或启动本地 HTTP 服务器,例如 /docs/demo/chat-v2 目录中的 http-serverTo solve this, use a browser that does not have this restriction or start a local HTTP server such as http-server in the /docs/demo/chat-v2 directory. 请确保将原点添加到 local.settings.json 中的 CORS 设置 。Ensure the origin is added to the CORS setting in local.settings.json.

清理资源Clean up resources

如果不打算继续使用此应用,请按照以下步骤删除本快速入门中创建的所有资源,以免产生任何费用:If you're not going to continue to use this app, delete all resources created by this quickstart with the following steps so you don't incur any charges:

  1. 在 Azure 门户的最左侧选择“资源组”,,然后选择创建的资源组。 In the Azure portal, select Resource groups on the far left, and then select the resource group you created. 或者,可以使用搜索框按名称查找资源组。Alternatively, you may use the search box to find the resource group by its name.

  2. 在打开的窗口中选择资源组,然后单击“删除资源组”。 In the window that opens, select the resource group, and then click Delete resource group.

  3. 在新窗口中键入要删除的资源组的名称,然后单击“删除” 。In the new window, type the name of the resource group to delete, and then click Delete.

后续步骤Next steps

在本快速入门中,你在 Visual Studio 中生成并运行了一个实时无服务器应用程序。In this quickstart, you built and ran a real-time serverless application in Visual Studio. 接下来,详细了解如何使用 Visual Studio 开发和部署 Azure Functions。Next, learn more about how to develop and deploy Azure Functions with Visual Studio.