Komunikace: Telefonní hovor

2025-06-13

Integrace funkcí telefonního volání v Azure Communication Services do vlastní obchodní aplikace (LOB) nabízí podnikům a jejich uživatelům několik klíčových výhod:

Umožňuje bezproblémovou komunikaci mezi zaměstnanci, zákazníky a partnery v reálném čase přímo z obchodní aplikace a eliminuje nutnost přepínat mezi několika platformami nebo zařízeními.
Vylepšuje uživatelské prostředí a zlepšuje celkovou provozní efektivitu.
Usnadňuje rychlé řešení problémů, protože se uživatelé můžou rychle a snadno spojit s příslušnými týmy podpory nebo odborníky na danou problematiku.

V tomto cvičení budete:

Prozkoumejte funkci telefonního volání v aplikaci.
Projděte si kód a zjistěte, jak se sestavuje funkce telefonního volání.

Použití funkce telefonního volání

V předchozím cvičení jste vytvořili prostředek služby Azure Communication Services (ACS) a spustili databázi, webový server a server rozhraní API. Aktualizovali jste také následující hodnoty v souboru .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>
```
Než budete pokračovat, ujistěte se, že jste dokončili předchozí cvičení .
Vraťte se do prohlížeče (http://localhost:4200), vyhledejte datagrid a v prvním řádku vyberte Kontaktovat zákazníka a potom zavolejte zákazníka .
Do záhlaví se přidá součást telefonního hovoru. Zadejte svoje telefonní číslo, na které chcete zavolat (ujistěte se, že začíná číslem + a obsahuje kód země) a vyberte Zavolat. Zobrazí se výzva, abyste povolili přístup k mikrofonu.
Výběrem možnosti Zavěsit hovor ukončíte. Výběrem možnosti Zavřít zavřete součást telefonního hovoru.

Seznámení s kódem telefonního volání

Návod

Pokud používáte Visual Studio Code, můžete soubory otevřít přímo tak, že vyberete:

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

Potom zadejte název souboru, který chcete otevřít.

Otevřete soubor customers-list.component.ts . Úplná cesta k souboru je client/src/app/customers-list/customers-list.component.ts.
Všimněte si, že openCallDialog() odešle CustomerCall zprávu a telefonní číslo zákazníka pomocí sběrnice událostí.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Poznámka:

Kód sběrnice událostí najdete v souboru eventbus.service.ts , pokud vás zajímají další informace. Úplná cesta k souboru je client/src/app/core/eventbus.service.ts.

Funkce komponenty ngOnInit() záhlaví se přihlásí k odběru CustomerCall události odeslané sběrnice událostí a zobrazí součást telefonního hovoru. Tento kód najdete v 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
        })
    );
}

Otevřete phone-call.component.ts. Udělejte si chvilku, než kód exporujete. Úplná cesta k souboru je klient/src/app/phone-call/phone-call.component.ts. Všimněte si následujících klíčových funkcí:
- Načte přístupový token služby Azure Communication Services voláním acsService.getAcsToken() funkce v ngOnInit();
- Přidá na stránku "telefonní číselník". Číselník můžete zobrazit kliknutím na vstup telefonního čísla v záhlaví.
- Spustí a ukončí volání pomocí startCall() funkcí a endCall() funkcí.
Než se podíváme na kód, který provádí telefonní hovor, pojďme se podívat, jak se přístupový token služby ACS načte a jak se vytvářejí objekty telefonního volání. ngOnInit() Vyhledejte funkci v 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);
            })
        );
    }
}
```
Tato funkce provádí následující akce:
- Načte ID uživatele ACS a přístupový token voláním acsService.getAcsToken() funkce.
- Po načtení přístupového tokenu kód provede následující akce:
  - Vytvoří novou instanci CallClient a AzureCommunicationTokenCredential použije přístupový token.
  - Vytvoří novou instanci CallAgent použití CallClient objektů a AzureCommunicationTokenCredential objektů. Později uvidíte, že CallAgent se používá ke spuštění a ukončení hovoru.
Otevřete acs.services.ts a vyhledejte getAcsToken() funkci. Úplná cesta k souboru je client/src/app/core/acs.service.ts. Funkce vytvoří požadavek HTTP GET na trasu /acstoken vystavenou serverem rozhraní API.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
Funkce serveru rozhraní API s názvem createACSToken() načte ID uživatele a přístupový token a vrátí ji klientovi. Najdete ho v souboru 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 };
}
```
Tato funkce provádí následující akce:
- Zkontroluje, jestli je k dispozici hodnota ACS connectionString . Pokud ne, vrátí objekt s prázdným userId a token.
- Vytvoří novou instanci CommunicationIdentityClient a předá connectionString jí hodnotu.
- Vytvoří nového uživatele a token pomocí tokenClient.createUserAndToken() oboru voip.
- Vrátí objekt obsahující hodnoty userId a token hodnoty.
Teď, když jste viděli, jak se id uživatele a token načítají, vraťte se k phone-call.component.ts funkci a vyhledejte ji startCall() .

Tato funkce se volá, když je v komponentě telefonního hovoru vybrána možnost Volání . Používá CallAgent objekt uvedený dříve ke spuštění volání. Funkce callAgent.startCall() přijme objekt představující číslo, které se má zavolat, a telefonní číslo služby ACS použité k volání.

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;
        }
    });
}

Funkce endCall() se volá, když je v komponentě telefonního hovoru vybrána možnost Zavěsit .
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Pokud probíhá volání, volá se call.hangUp() funkce pro ukončení volání. Pokud neprobíhá žádné volání, hangup událost se vygeneruje do nadřazené komponenty záhlaví a skryje komponentu telefonního hovoru.
Než přejdeme k dalšímu cvičení, pojďme se podívat na klíčové koncepty popsané v tomto cvičení:
- Id uživatele ACS a přístupový token se načítají ze serveru rozhraní API pomocí acsService.createUserAndToken() funkce.
- Token slouží k vytvoření objektu a CallClient objektuCallAgent.
- Objekt CallAgent se používá ke spuštění a ukončení volání voláním callAgent.startCall() a callAgent.hangUp() funkcí v uvedeném pořadí.
Teď, když jste se dozvěděli, jak se dají telefonní hovory integrovat do aplikace, přepneme náš fokus na používání služeb Azure Communication Services k odesílání e-mailů a SMS zpráv.

Další krok

Komunikace: Odesílání e-mailů a SMS zpráv

Sdílet prostřednictvím

Komunikace: Telefonní hovor

Použití funkce telefonního volání

Seznámení s kódem telefonního volání

Další krok

Váš názor

Další materiály