Обмен данными: звонок по телефону

Интеграция возможностей звонков Службы коммуникации Azure в пользовательское бизнес-приложение предлагает несколько ключевых преимуществ для бизнеса и их пользователей:

Обеспечивает бесшовное и реальное время взаимодействие между сотрудниками, клиентами и партнерами непосредственно из бизнес-приложения, устраняя необходимость переключения между несколькими платформами или устройствами.
Улучшает взаимодействие с пользователем и повышает общую эффективность работы.
Упрощает быстрое решение проблем, так как пользователи могут быстро подключаться к соответствующим командам поддержки или экспертам по темам быстро и легко.

В этом упражнении вы выполните следующие действия.

Изучите функцию звонков по телефону в приложении.
Ознакомьтесь с кодом, чтобы узнать, как создается функция звонков по телефону.

Использование функции звонков по телефону

В предыдущем упражнении вы создали ресурс Служб коммуникации Azure (ACS) и запустили базу данных, веб-сервер и сервер API. Вы также обновили следующие значения в 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>
```
Прежде чем продолжить, убедитесь, что вы выполнили предыдущее упражнение .
Вернитесь в браузер (http://localhost:4200), найдите datagrid и выберите "Связаться с клиентом ", а затем вызов клиента в первой строке.
Компонент телефонного звонка будет добавлен в заголовок. Введите номер телефона, который вы хотите позвонить (убедитесь, что он начинается с + и включает код страны) и выберите "Звонок". Вам будет предложено разрешить доступ к микрофону.
Выберите "Зависнуть" , чтобы завершить вызов. Нажмите кнопку "Закрыть", чтобы закрыть компонент телефонного звонка.

Изучение кода звонков по телефону

Подсказка

Если вы используете Visual Studio Code, вы можете открывать файлы напрямую, выбрав:

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

Затем введите имя файла, который нужно открыть.

Откройте файл customers-list.component.ts . Полный путь к файлу — client/src/app/customers-list/customers-list.component.ts.
Обратите внимание, что openCallDialog() отправляет CustomerCall сообщение и номер телефона клиента с помощью шины событий.
```
openCallDialog(data: Phone) {
    this.eventBus.emit({ name: Events.CustomerCall, value: data });
}
```
Замечание

Код шины событий можно найти в файле eventbus.service.ts , если вы заинтересованы в его изучении. Полный путь к файлу — client/src/app/core/eventbus.service.ts.
Функция компонента заголовка ngOnInit() подписывается на CustomerCall событие, отправленное шиной событий, и отображает компонент телефонного звонка. Этот код можно найти в 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
        })
    );
}
```
Откройте phone-call.component.ts. На некоторое время, чтобы разоблачить код. Полный путь к файлу — client/src/app/phone-call/phone-call.component.ts. Обратите внимание на следующие ключевые функции:
- Извлекает маркер доступа Службы коммуникации Azure путем вызова acsService.getAcsToken() функции вngOnInit();
- Добавляет на страницу "телефонный абонент". Вы можете увидеть абонент, щелкнув входной номер телефона в заголовке.
- Запускает и завершает вызов, используя startCall() функции соответственно endCall() .
Прежде чем изучить код, который делает телефонный звонок, давайте рассмотрим, как извлекается маркер доступа ACS и как создаются объекты звонков по телефону. Найдите функцию ngOnInit() в 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);
            })
        );
    }
}
```
Эта функция выполняет следующие действия:
- Извлекает идентификатор пользователя ACS и маркер доступа, вызывая функцию acsService.getAcsToken() .
- После получения маркера доступа код выполняет следующие действия:
  - Создает новый экземпляр CallClient и AzureCommunicationTokenCredential использование маркера доступа.
  - Создает новый экземпляр CallAgent с помощью CallClient объектов и AzureCommunicationTokenCredential объектов. Позже вы увидите, что CallAgent используется для запуска и завершения вызова.
Откройте acs.services.ts и найдите функцию getAcsToken() . Полный путь к файлу — client/src/app/core/acs.service.ts. Функция выполняет HTTP-запрос GET к маршруту, предоставляемому /acstoken сервером API.
```
getAcsToken(): Observable<AcsUser> {
    return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
    .pipe(
        catchError(this.handleError)
    );
}
```
Функция сервера API с именем createACSToken() извлекает идентификатор пользователя и маркер доступа и возвращает его клиенту. Его можно найти в файле 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 };
}
```
Эта функция выполняет следующие действия:
- Проверяет, доступно ли значение ACS connectionString . В противном случае возвращает объект с пустым userId и token.
- Создает новый экземпляр CommunicationIdentityClient и передает connectionString в него значение.
- Создает пользователя и маркер, используя tokenClient.createUserAndToken() область voip.
- Возвращает объект, userId содержащий значения и token значения.
Теперь, когда вы узнали, как извлекается идентификатор пользователя и маркер, вернитесь к phone-call.component.ts функции и найдите ее startCall() .

Эта функция вызывается при выборе звонка в компоненте телефонного звонка. Он использует объект, упомянутый CallAgent ранее, для запуска вызова. Функция callAgent.startCall() принимает объект, представляющий номер для вызова и номер телефона ACS, используемый для вызова.

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

Функция endCall() вызывается при выборе функции "Зависание" в компоненте телефонного звонка.
```
endCall() {
    if (this.call) {
        this.call.hangUp({ forEveryone: true });
        this.call = undefined;
        this.inCall = false;
    }
    else {
        this.hangup.emit();
    }
}
```
Если вызов выполняется, call.hangUp() функция вызывается для завершения вызова. Если вызов не выполняется, hangup событие создается родительскому компоненту заголовка, чтобы скрыть компонент телефонного звонка.
Прежде чем перейти к следующему упражнению, давайте рассмотрим основные понятия, описанные в этом упражнении:
- Идентификатор пользователя ACS и маркер доступа извлекаются с сервера API с помощью acsService.createUserAndToken() функции.
- Маркер используется для создания CallClient и CallAgent объекта.
- Объект CallAgent используется для запуска и завершения вызова путем вызова callAgent.startCall() и callAgent.hangUp() функций соответственно.
Теперь, когда вы узнали, как можно интегрировать телефонные звонки в приложение, давайте переключим наше внимание на использование Службы коммуникации Azure для отправки сообщений электронной почты и SMS.

Следующий шаг

Коммуникация: отправка сообщений электронной почты и SMS

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-06-13