Introduzione all'esempio di chat hero

Il campione Group Chat Hero dei Servizi di Comunicazione di Azure dimostra come utilizzare l'SDK Web Chat dei Servizi di Comunicazione per creare un'esperienza di chat di gruppo.

Questo articolo descrive il funzionamento dell'esempio prima di eseguire l'esempio nel computer locale. L'esempio viene quindi distribuito in Azure usando le proprie risorse Servizi di comunicazione di Azure.

Panoramica

L'esempio include sia un'applicazione lato client che un'applicazione lato server. L'applicazione lato client è un'applicazione Web React/Redux che usa il framework Fluent UI di Microsoft. Questa applicazione invia richieste a un'applicazione lato server Node.js che consente all'applicazione lato client di connettersi ad Azure.

L'esempio ha l'aspetto seguente:

Quando si preme Avvia una chat, l'applicazione Web recupera un token di accesso utente dall'applicazione lato server. Usare questo token per connettere l'app client a Servizi di comunicazione di Azure. Una volta recuperato il token, il sistema chiede di immettere il nome e scegliere un'emoji da rappresentare nella chat.

Dopo aver configurato il nome visualizzato e l'emoji, è possibile partecipare alla sessione di chat. Ora viene visualizzata l'area di disegno principale della chat in cui si trova l'esperienza principale della chat.

Componenti della schermata principale della chat:

• Area principale chat: esperienza di chat principale in cui gli utenti possono inviare e ricevere messaggi. Per inviare messaggi, è possibile usare l'area di input e premere Invio (oppure il pulsante Invia). La schermata della chat organizza i messaggi di chat ricevuti dal mittente con il nome e l'emoji corretti. Nell'area di chat vengono visualizzati due tipi di notifiche: 1) quando un utente digita e 2) invia e legge le notifiche per i messaggi.
• Intestazione: dove l'utente vede il titolo del thread di chat e i controlli per attivare/disattivare le barre laterali dei partecipanti e delle impostazioni e un pulsante di uscita per uscire dalla sessione di chat.
• Barra laterale: qui vengono mostrate le informazioni sui partecipanti e le impostazioni quando vengono attivate tramite i controlli nell'intestazione. Nella barra laterale dei partecipanti è possibile visualizzare un elenco dei partecipanti alla chat e un collegamento per invitare i partecipanti alla sessione di chat. La barra laterale delle impostazioni consente di configurare il titolo del thread di chat.

Completare i prerequisiti e i passaggi seguenti per configurare l'esempio.

Prerequisiti

• Visual Studio Code (build stabile).
• Node.js (16.14.2 e versioni successive).
• Creare un account Azure con una sottoscrizione attiva. Per informazioni dettagliate vedere Creare un account gratuito.
• Creare una risorsa di Servizi di comunicazione di Azure. Per informazioni dettagliate vedere Creare una risorsa di comunicazione di Azure. Per questo avvio rapido, registrare la stringa di connessione della risorsa.

Prima di eseguire l'esempio per la prima volta

1. Aprire un'istanza di PowerShell, Terminale Windows, prompt dei comandi o equivalente e passare alla directory in cui clonare l'esempio.

2. Clona il repo usando la seguente stringa CLI:

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

   Oppure clonare il repository usando qualsiasi metodo descritto in Clonare un repository Git esistente.

3. Ottenere Connection String e Endpoint URL dal portale di Azure o usando l'interfaccia della riga di comando di Azure.

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

   Per altre informazioni sulle stringhe di connessione, vedere Creare una risorsa di Servizi di comunicazione di Azure

4. Dopo aver ottenuto la Connection String, aggiungere la stringa di connessione al file Server/appsettings.json nella cartella Chat. Immettere la stringa di connessione nella variabile: ResourceConnectionString.

5. Dopo aver visualizzato Endpoint, aggiungere la stringa dell'endpoint al file Server/appsetting.json . Immettere l'endpoint nella variabile : EndpointUrl.

6. Ottieni il identity dal portale di Azure. Selezionare Identità e token di accesso utente nel portale di Azure. Generare un utente con ambito Chat.

7. Dopo aver visualizzato la identity stringa, aggiungere la stringa identity al file Server/appsetting.json . Immettere la stringa di identità nella variabile : AdminUserId. Il server usa la stringa per aggiungere nuovi utenti al thread di chat.

Esecuzione locale

1. Impostare la stringa di connessione in Server/appsettings.json
2. Impostare la stringa dell'URL dell'endpoint in Server/appsettings.json
3. Impostare la stringa adminUserId in Server/appsettings.json
4. npm run setup dalla directory radice
5. npm run start dalla directory radice

È possibile testare l'esempio in locale aprendo più sessioni del browser con l'URL della chat per simulare una chat multiutente.

Pubblicare l'esempio in Azure

1. Nella directory radice eseguire questi comandi:

   npm run setup
   npm run build
   npm run package
   

2. Usare l'estensione di Azure e distribuire la directory Chat/dist nel servizio app

Pulire le risorse

Se si vuole pulire e rimuovere una sottoscrizione a Servizi di comunicazione, è possibile eliminare la risorsa o il gruppo di risorse. L'eliminazione del gruppo di risorse comporta anche l'eliminazione di tutte le altre risorse associate. Altre informazioni sulla pulizia delle risorse.

Passaggi successivi

Per altre informazioni, vedere:

• Informazioni sui concetti relativi alla chat
• Acquisire familiarità con Chat SDK
• Vedere i componenti della chat nella libreria dell'interfaccia utente

Articoli correlati

• Esempi : altri modelli ed esempi sono disponibili nella pagina di panoramica degli esempi.
• Redux: gestione dello stato lato client
• FluentUI - Libreria dell'interfaccia utente di Microsoft
• React - Libreria per la compilazione di interfacce utente