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

聊天主图示例入门

重要

GitHub 上提供了此示例。

Azure 通信服务 群聊 Hero 示例 演示如何使用通信服务聊天 Web SDK 构建群组聊天体验。

本文介绍在本地计算机上运行示例之前该示例的工作原理。然后，使用你自己的 Azure 通信服务资源将该示例部署到 Azure。

概述

该示例同时包含了客户端应用程序和服务器端应用程序。客户端应用程序是使用 Microsoft Fluent UI 框架的 React/Redux Web 应用程序。此应用程序会将请求发送到 Node.js 服务器端应用程序，后者可帮助客户端应用程序连接到 Azure。

该示例如下所示：

屏幕截图显示示例应用程序登录页。

当你按下“开始聊天”时，Web 应用程序从服务器端应用程序获取用户访问令牌。使用此令牌将客户端应用连接到 Azure 通信服务。检索令牌后，系统会提示你输入姓名，并选择一个表情符号来在聊天中代表你。

显示应用程序的预聊天屏幕的屏幕截图。

配置显示名称和表情符号后，便可以加入聊天会话。现在，你将看到核心聊天体验所在的主要聊天画布。

显示示例应用程序主屏幕的屏幕截图。

主要聊天屏幕的组件：

主聊天区域：用户可在其中发送和接收消息的核心聊天体验。若要发送消息，可以使用输入区域，然后按 Enter（或使用发送按钮）。聊天屏幕使用正确的名称和表情符号组织发件人收到的聊天消息。你会在聊天区域看到两种类型的通知：1) 用户输入时的输入通知，2) 消息的已发送和已阅读通知。
标题：在这里，用户将看到聊天会话的标题、用于切换参与者和设置侧边栏的控件以及用于退出聊天会话的离开按钮。
侧边栏：使用标题中的控件进行切换时，将在这里显示参与者和设置信息。参与者侧边栏包含聊天的参与者列表以及用于邀请参与者加入聊天会话的链接。设置侧边栏可让你配置聊天会话标题。

完成以下先决条件和步骤以设置示例。

打开 PowerShell、Windows 终端、命令提示符或等效项的实例，然后导航到要将示例克隆到的目录。
使用以下 CLI 字符串克隆存储库：

git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git

或者，使用克隆现有 Git 存储库中描述的任何方法克隆存储库。
从 Azure 门户或使用 Azure CLI 获取 Connection String 和 Endpoint URL。
```
az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
```
有关连接字符串的详细信息，请参阅创建 Azure 通信服务资源
获取 Connection String 后，将连接字符串添加到“聊天”文件夹下的 Server/appsettings.json 文件中。在变量 ResourceConnectionString 中输入连接字符串。
获取 Endpoint 后，将终结点字符串添加到 Server/appsetting.json 文件中。在 EndpointUrl 变量中输入你的终结点。
从 Azure 门户获取 identity。在 Azure 门户中选择“标识和用户访问令牌”。生成具有 Chat 范围的用户。
获取 identity 字符串后，将标识字符串添加到 Server/appsetting.json 文件中。在 AdminUserId 变量中输入你的标识字符串。服务器使用字符串将新用户添加到聊天线程。

可以通过使用聊天 URL 打开多个浏览器会话来模拟多用户聊天，从而在本地测试示例。

在根目录下运行以下命令：

npm run setup
npm run build
npm run package

如果想要清理并删除通信服务订阅，可以删除资源或资源组。删除资源组同时也会删除与之相关联的任何其他资源。了解有关清理资源的详细信息。

有关详细信息，请参见: