Comunicazione: effettuare una telefonata

2025-06-13

L'integrazione delle funzionalità di chiamata telefonica di Servizi di comunicazione di Azure in un'applicazione line-of-business (LOB) personalizzata offre diversi vantaggi principali per le aziende e i relativi utenti:

Consente una comunicazione facile e in tempo reale tra dipendenti, clienti e partner, direttamente dall'interno dell'applicazione LINEB, eliminando la necessità di passare da più piattaforme o dispositivi.
Migliora l'esperienza utente e migliora l'efficienza operativa complessiva.
Facilita la risoluzione rapida dei problemi, in quanto gli utenti possono connettersi rapidamente con team di supporto pertinenti o esperti in materia in modo rapido e semplice.

In questo esercizio si eseguiranno le seguenti operazioni:

Esplorare la funzionalità di chiamata telefonica nell'applicazione.
Esaminare il codice per informazioni su come viene compilata la funzionalità di chiamata telefonica.

Uso della funzionalità chiamate telefonico

Nell'esercizio precedente è stata creata una risorsa Servizi di comunicazione di Azure (ACS) ed è stato avviato il database, il server Web e il server API. Sono stati aggiornati anche i valori seguenti nel file con estensione env .
```
ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
```
Assicurarsi di aver completato l'esercizio precedente prima di continuare.
Tornare al browser (http://localhost:4200), individuare la griglia di dati e selezionare Contatta cliente seguito da Chiama cliente nella prima riga.
Nell'intestazione verrà aggiunto un componente di chiamata telefonica. Immettere il numero di telefono che si vuole chiamare (assicurarsi che inizi con + e includa il codice paese) e selezionare Chiama. Verrà richiesto di consentire l'accesso al microfono.
Selezionare Hang Up (Blocca ) per terminare la chiamata. Selezionare Chiudi per chiudere il componente di chiamata telefonica.

Esplorazione del codice chiamante telefonico

Suggerimento

Se si usa Visual Studio Code, è possibile aprire direttamente i file selezionando:

Windows/Linux: CTRL+P
Mac: Cmd + P

Digitare quindi il nome del file che si desidera aprire.

Aprire il file customers-list.component.ts . Il percorso completo del file è client/src/app/customers-list/customers-list.component.ts.
Si noti che openCallDialog() invia un CustomerCall messaggio e il numero di telefono del cliente usando un bus di eventi.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Annotazioni

Il codice del bus di eventi è disponibile nel file eventbus.service.ts se si è interessati a esplorarlo di più. Il percorso completo del file è client/src/app/core/eventbus.service.ts.

La funzione del componente di ngOnInit() intestazione sottoscrive l'evento CustomerCall inviato dal bus di eventi e visualizza il componente di chiamata telefonica. Questo codice è disponibile in header.component.ts.

ngOnInit() {
    this.subscription.add(
        this.eventBus.on(Events.CustomerCall, (data: Phone) => {
            this.callVisible = true; // Show phone call component
            this.callData = data; // Set phone number to call
        })
    );
}

Aprire phone-call.component.ts. Dedicare qualche minuto a esporre il codice. Il percorso completo del file è client/src/app/phone-call/phone-call.component.ts. Si notino le funzionalità principali seguenti:
- Recupera un token di accesso Servizi di comunicazione di Azure chiamando la acsService.getAcsToken() funzione in ngOnInit();
- Aggiunge un "dialer telefono" alla pagina. È possibile visualizzare il dialer facendo clic sull'input del numero di telefono nell'intestazione.
- Avvia e termina una chiamata usando rispettivamente le startCall() funzioni e endCall() .
Prima di esaminare il codice che effettua la chiamata telefonica, esaminiamo come viene recuperato il token di accesso ACS e come vengono creati gli oggetti chiamate telefoniche. Individuare la ngOnInit() funzione in phone-call.component.ts.
```
async ngOnInit() {
    if (ACS_CONNECTION_STRING) {
        this.subscription.add(
            this.acsService.getAcsToken().subscribe(async (user: AcsUser) => {
                const callClient = new CallClient();
                const tokenCredential = new AzureCommunicationTokenCredential(user.token);
                this.callAgent = await callClient.createCallAgent(tokenCredential);
            })
        );
    }
}
```
Questa funzione esegue le azioni seguenti:
- Recupera un id utente ACS e un token di accesso chiamando la acsService.getAcsToken() funzione .
- Dopo aver recuperato il token di accesso, il codice esegue le azioni seguenti:
  - Crea una nuova istanza di e CallClient usando il token di AzureCommunicationTokenCredential accesso.
  - Crea una nuova istanza di CallAgent utilizzando gli CallClient oggetti e AzureCommunicationTokenCredential . Più avanti si noterà che CallAgent viene usato per avviare e terminare una chiamata.
Aprire acs.services.ts e individuare la getAcsToken() funzione. Il percorso completo del file è client/src/app/core/acs.service.ts. La funzione effettua una richiesta HTTP GET alla /acstoken route esposta dal server API.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
Una funzione del server API denominata createACSToken() recupera l'id utente e il token di accesso e lo restituisce al client. È disponibile nel file server/typescript/acs.ts .
```
import { CommunicationIdentityClient } from '@azure/communication-identity';

const connectionString = process.env.ACS_CONNECTION_STRING as string;

async function createACSToken() {
if (!connectionString) return { userId: '', token: '' };

const tokenClient = new CommunicationIdentityClient(connectionString);
const { user, token } = await tokenClient.createUserAndToken(["voip"]);
return { userId: user.communicationUserId, token };
}
```
Questa funzione esegue le azioni seguenti:
- Controlla se è disponibile un valore ACS connectionString . In caso contrario, restituisce un oggetto con un oggetto vuoto userId e token.
- Crea una nuova istanza di CommunicationIdentityClient e passa il connectionString valore a esso.
- Crea un nuovo utente e un nuovo token usando tokenClient.createUserAndToken() con l'ambito "voip".
- Restituisce un oggetto contenente i userId valori e token .
Dopo aver visto come vengono recuperati l'id utente e il token, tornare a phone-call.component.ts e individuare la startCall() funzione.

Questa funzione viene chiamata quando viene selezionata l'opzione Call nel componente di chiamata telefonica. Usa l'oggetto CallAgent menzionato in precedenza per avviare una chiamata. La callAgent.startCall() funzione accetta un oggetto che rappresenta il numero da chiamare e il numero di telefono ACS utilizzato per effettuare la chiamata.

startCall() {
    this.call = this.callAgent?.startCall(
        [{ phoneNumber: this.customerPhoneNumber }], {
        alternateCallerId: { phoneNumber: this.fromNumber }
    });
    console.log('Calling: ', this.customerPhoneNumber);
    console.log('Call id: ', this.call?.id);
    this.inCall = true;

    // Adding event handlers to monitor call state
    this.call?.on('stateChanged', () => {
        console.log('Call state changed: ', this.call?.state);
        if (this.call?.state === 'Disconnected') {
            console.log('Call ended. Reason: ', this.call.callEndReason);
            this.inCall = false;
        }
    });
}

La endCall() funzione viene chiamata quando si seleziona Hang Up nel componente di chiamata telefonica.
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Se è in corso una chiamata, la call.hangUp() funzione viene chiamata per terminare la chiamata. Se non è in corso alcuna chiamata, l'evento hangup viene generato al componente padre dell'intestazione per nascondere il componente di chiamata telefonica.
Prima di passare all'esercizio successivo, esaminare i concetti chiave trattati in questo esercizio:
- Un id utente ACS e un token di accesso vengono recuperati dal server API usando la acsService.createUserAndToken() funzione .
- Il token viene usato per creare un CallClient oggetto e CallAgent .
- L'oggetto CallAgent viene utilizzato per avviare e terminare una chiamata chiamando rispettivamente le callAgent.startCall() funzioni e callAgent.hangUp() .
Ora che si è appreso come è possibile integrare le telefonate in un'applicazione, è possibile passare all'uso di Servizi di comunicazione di Azure per inviare messaggi di posta elettronica e SMS.

Passaggio successivo

Comunicazione: invio di messaggi di posta elettronica e SMS

Condividi tramite

Comunicazione: effettuare una telefonata

Uso della funzionalità chiamate telefonico

Esplorazione del codice chiamante telefonico

Passaggio successivo

Commenti e suggerimenti

Risorse aggiuntive