Introduzione all'esempio di chat hero

L'esempio Servizi di comunicazione di Azure Group Chat Hero illustra come usare l'SDK Web chat di Servizi di comunicazione per creare un'esperienza di chat di gruppo.

In questa guida introduttiva di esempio si apprenderà come funziona l'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 quindi 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). I messaggi di chat ricevuti sono organizzati per 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: dove vengono visualizzati i partecipanti e le informazioni sull'impostazione quando vengono attivati o disattivati usando 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. Registrare il stringa di connessione della risorsa per questa guida introduttiva.

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 si vuole clonare l'esempio.

2. Clonare il repository usando la stringa dell'interfaccia della riga di comando seguente:

   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 e Connection String 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 stringa di connessione, vedere Creare una Servizi di comunicazione di Azure risorse

4. Dopo aver visualizzato Connection String, aggiungere il stringa di connessione al file Server/appsettings.json trovato 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. Ottenere la identity dal portale di Azure. Selezionare Identità e token di accesso utente nella portale di Azure. Generare un utente con Chat ambito.

7. Dopo aver visualizzato la identity stringa, aggiungere la stringa identity al file Server/appsetting.json . Immettere la stringa di identità nella variabile : AdminUserId. Si tratta dell'utente del server per aggiungere nuovi utenti al thread di chat.

Esecuzione locale

1. Impostare il stringa di connessione inServer/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 gli articoli seguenti:

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

Argomenti correlati

• Esempi: trovare altri esempi ed esempi 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