Comece com o exemplo de chat hero

O exemplo de chat em grupo dos Serviços de Comunicação Azure demonstra como utilizar o Chat Web SDK dos Serviços de Comunicação para criar uma experiência de chat em grupo.

Este artigo descreve como o exemplo funciona antes de executarmos o exemplo em sua máquina local. Em seguida, implantamos o exemplo no Azure usando seus próprios recursos dos Serviços de Comunicação do Azure.

Descrição geral

O exemplo tem um aplicativo do lado do cliente e um aplicativo do lado do servidor. O aplicativo do lado do cliente é um aplicativo Web React/Redux que usa a estrutura de interface do usuário Fluent da Microsoft. Este aplicativo envia solicitações para um aplicativo do lado do servidor Node.js que ajuda o aplicativo do lado do cliente a se conectar ao Azure.

Veja como é o exemplo:

Quando você pressiona Iniciar um bate-papo, o aplicativo Web busca um token de acesso de usuário do aplicativo do lado do servidor. Use esse token para conectar o aplicativo cliente aos Serviços de Comunicação do Azure. Uma vez que o token é recuperado, o sistema solicita que você insira seu nome e escolha um emoji para representá-lo no bate-papo.

Depois de configurar seu nome de exibição e emoji, você pode participar da sessão de bate-papo. Agora tu vês a tela de chat principal onde vive a experiência central de chat.

Componentes da tela de bate-papo principal:

• Área de bate-papo principal: A experiência de bate-papo principal onde os usuários podem enviar e receber mensagens. Para enviar mensagens, você pode usar a área de entrada e pressionar enter (ou usar o botão enviar). A tela de bate-papo organiza as mensagens de bate-papo recebidas pelo remetente com o nome e o emoji corretos. Você vê dois tipos de notificações na área de chat: 1) notificações de escrita quando um usuário está a escrever e 2) notificações de envio e leitura para mensagens.
• Cabeçalho: onde o utilizador vê o título do tópico de chat e os controles para alternar as barras laterais de participantes e configurações, e um botão de saída para sair da sessão de chat.
• Barra Lateral: onde os participantes e as informações de definições são exibidos quando alternados usando os controlos no cabeçalho. A barra lateral dos participantes contém uma lista de participantes no chat e um link para convidar participantes para a sessão de chat. A barra lateral de configurações permite que você configure o título do tópico de bate-papo.

Conclua os seguintes pré-requisitos e etapas para configurar o exemplo.

Pré-requisitos

• Código do Visual Studio (compilação estável).
• Node.js (16.14.2 e superior).
• Crie uma conta do Azure com uma assinatura ativa. Para obter detalhes, consulte Criar uma conta gratuitamente.
• Criar um recurso do Azure Communication Services. Para obter detalhes, consulte Criar um recurso de comunicação do Azure. Registre sua cadeia de conexão de recurso para este início rápido.

Antes de executar a amostra pela primeira vez

1. Abra uma instância do PowerShell, Terminal do Windows, Linha de Comandos ou equivalente e navegue até ao directório onde deseja clonar o exemplo.

2. Clone o repositório usando a seguinte cadeia de caracteres da CLI:

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

   Ou clone o repositório usando qualquer método descrito em Clonar um repositório Git existente.

3. Obtenha o Connection String e Endpoint URL do portal do Azure ou usando a CLI do Azure.

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

   Para obter mais informações sobre cadeias de conexão, consulte Criar recursos dos Serviços de Comunicação do Azure

4. Depois de obter o Connection String, Adicione a cadeia de conexão ao arquivo Server/appsettings.json encontrado na pasta Chat. Insira sua cadeia de conexão na variável: ResourceConnectionString.

5. Depois de obter o Endpoint, adicione a URL do ponto de extremidade ao arquivo Server/appsetting.json. Insira seu endpoint na variável: EndpointUrl.

6. Obtenha o identity no portal do Azure. Selecione Identidades & Tokens de Acesso de Usuário no portal do Azure. Gere um utilizador com Chat abrangência.

7. Depois de obter a identity cadeia de caracteres, adicione a cadeia de caracteres de identidade ao arquivo Server/appsetting.json . Insira sua cadeia de caracteres de identidade na variável: AdminUserId. O servidor usa a cadeia de caracteres para adicionar novos usuários ao thread de chat.

Execução local

1. Defina sua cadeia de conexão em Server/appsettings.json
2. Defina o URL do ponto de extremidade em Server/appsettings.json
3. Defina o identificador adminUserId em Server/appsettings.json
4. npm run setup a partir do diretório raiz
5. npm run start a partir do diretório raiz

Você pode testar o exemplo localmente abrindo várias sessões do navegador com a URL do seu bate-papo para simular um bate-papo multiusuário.

Publicar o exemplo no Azure

1. No diretório raiz, execute estes comandos:

   npm run setup
   npm run build
   npm run package
   

2. Use a extensão do Azure e implante o diretório Chat/dist em seu serviço de aplicativo

Limpar recursos

Se quiser limpar e remover uma assinatura dos Serviços de Comunicação, você pode excluir o recurso ou grupo de recursos. A exclusão do grupo de recursos também exclui quaisquer outros recursos associados a ele. Saiba mais sobre a limpeza de recursos.

Próximos passos

Para obter mais informações, consulte:

• Saiba mais sobre os conceitos de chat
• Familiarize-se com nosso SDK de bate-papo
• Consulte os componentes de bate-papo na Biblioteca de UI

Artigos relacionados

• Exemplos - Encontre mais amostras e exemplos na nossa página de visão geral de amostras.
• Redux - Gerenciamento de estado do lado do cliente
• FluentUI - Biblioteca de interface do usuário com tecnologia Microsoft
• React - Biblioteca para a criação de interfaces de utilizador