Share via

Начало работы с примером героя чата

  • Статья

Внимание

Этот пример можно найти на сайте GitHub.

В примере героя группового чата Службы коммуникации Azure показано, как веб-пакет SDK для чатов служб коммуникации можно использовать для создания группового чата.

В этом кратком руководстве мы узнаем, как работает пример перед запуском примера на локальном компьютере. Затем мы развернем пример в Azure с помощью собственных Службы коммуникации Azure ресурсов.

Обзор

Пример содержит клиентское и серверное приложения. Клиентское приложение — это веб-приложение React/Redux, использующее платформу пользовательского интерфейса Fluent от Майкрософт. Это приложение отправляет запросы в Node.js серверное приложение , которое помогает клиентскому приложению подключаться к Azure.

Вот как выглядит этот пример:

Снимок экрана, на котором показана целевая страница примера приложения.

При нажатии клавиши Start a Chat веб-приложение получает маркер доступа пользователя из серверного приложения. Затем этот маркер используется для подключения клиентского приложения к Службы коммуникации Azure. После получения маркера система предложит ввести свое имя и выбрать эмодзи, чтобы представить вас в чате.

Снимок экрана: экран приложения перед созданием чата.

После настройки отображаемого имени и эмодзи можно присоединиться к сеансу чата. Теперь вы увидите основной холст чата, в котором живет основной интерфейс чата.

Снимок экрана: главный экран примера приложения.

Компоненты главного экрана чата:

  • Основная область чата: основной интерфейс чата, в котором пользователи могут отправлять и получать сообщения. Для отправки сообщений можно использовать область ввода и нажать клавишу "ВВОД" (или использовать кнопку "Отправить"). Полученные сообщения чата организованы отправителем с правильным именем и эмодзи. В области чата отображаются два типа уведомлений: 1) ввод уведомлений при вводе пользователем и 2) отправки и чтения уведомлений для сообщений.
  • Заголовок: где пользователь видит название потока чата и элементы управления для переключения участника и параметров боковой панели, а также кнопку выхода из сеанса чата.
  • Боковая панель: где участники и сведения о параметрах отображаются при переключениях с помощью элементов управления в заголовке. Боковая панель участников содержит список участников в чате и ссылку для приглашения участников в сеанс чата. Боковая панель параметров позволяет настроить заголовок потока чата.

Выполните следующие предварительные требования и шаги, чтобы настроить пример.

Необходимые компоненты

Действия перед первым запуском примера

  1. Откройте экземпляр PowerShell, Терминал Windows, командную строку или эквивалентную команду и перейдите в каталог, в котором вы хотите клонировать пример.

  2. Клонируйте репозиторий с помощью следующей строки CLI:

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

    Или клонируйте репозиторий с помощью любого метода, описанного в клонировании существующего репозитория Git.

  3. Connection String Получите и Endpoint URL из портал Azure или с помощью Azure CLI.

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"

    Дополнительные сведения о строках подключения см. в статье Создание ресурсов Служб коммуникации Azure.

  4. После получения Connection Stringфайла добавьте строка подключения в файл Server/appsettings.json, найденный в папке чата. Сохраните строку подключения в переменную: ResourceConnectionString.

  5. После получения Endpointстроки конечной точки добавьте строку конечной точки в файл Server/appsetting.json . Введите конечную точку в переменной: EndpointUrl

  6. Получите identity с помощью портала Azure. Выберите удостоверения и маркеры доступа пользователей в портал Azure. Создайте пользователя с Chat область.

  7. После получения identity строки добавьте строку удостоверения в файл Server/appsetting.json . Введите строку удостоверения в переменной: AdminUserId Это серверный пользователь для добавления новых пользователей в поток чата.

Локальный запуск

  1. Настройка строка подключения вServer/appsettings.json
  2. Настройка строки URL-адреса конечной точки в Server/appsettings.json
  3. Настройка строки adminUserId в Server/appsettings.json
  4. npm run setup из корневого каталога
  5. npm run start из корневого каталога

Вы можете проверить пример локально, открыв несколько сеансов браузера с URL-адресом чата, чтобы имитировать чат для нескольких пользователей.

Публикация примера в Azure

  1. В корневом каталоге выполните следующие команды:
npm run setup
npm run build
npm run package
  1. Использование расширения Azure и развертывание каталога Chat/dist в службе приложений

Очистка ресурсов

Если вы хотите отменить и удалить подписку на Службы коммуникации, можно удалить ресурс или группу ресурсов. При удалении группы ресурсов также удаляются все связанные с ней ресурсы. См. сведения об очистке ресурсов.

Следующие шаги

Скачайте пример с GitHub.

Дополнительные сведения см. в следующих статьях:

  • Примеры: дополнительные примеры см. на нашей странице обзора примеров.
  • Redux — управление состоянием на стороне клиента
  • FluentUI — библиотека пользовательского интерфейса, поддерживаемая корпорацией Майкрософт.
  • React — библиотека для создания пользовательских интерфейсов.