통신: 전화 걸기

Azure Communication Services의 전화 통화 기능을 사용자 지정 LOB(기간 업무) 애플리케이션에 통합하면 비즈니스 및 사용자에게 다음과 같은 몇 가지 주요 이점이 제공됩니다.

• LOB 애플리케이션 내에서 직접 직원, 고객 및 파트너 간의 원활하고 실시간 통신을 가능하게 하므로 여러 플랫폼 또는 디바이스 간에 전환할 필요가 없습니다.
• 사용자 환경을 향상시키고 전반적인 운영 효율성을 향상시킵니다.
• 사용자가 관련 지원 팀 또는 실무 전문가와 빠르고 쉽게 연결할 수 있으므로 신속한 문제 해결을 지원합니다.

이 연습에서 다음을 수행합니다.

• 애플리케이션에서 전화 통화 기능을 탐색합니다.
• 코드를 연습하여 전화 통화 기능이 빌드되는 방법을 알아봅니다.

전화 통화 기능 사용

1. 이전 연습에서는 ACS(Azure Communication Services) 리소스를 만들고 데이터베이스, 웹 서버 및 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>
   

   계속하기 전에 이전 연습을 완료했는지 확인합니다.

2. 브라우저()http://localhost:4200로 돌아가서 datagrid를 찾은 다음 첫 번째 행에서고객에 문의를 선택합니다.

   

3. 전화 통화 구성 요소가 헤더에 추가됩니다. 전화할 전화 번호를 입력하고(+로 시작하고 국가 코드를 포함하는지 확인) 통화를 선택합니다. 마이크에 대한 액세스를 허용하라는 메시지가 표시됩니다.

   

4. 전화 걸기를 선택하여 통화를 종료합니다. 닫기를 선택하여 전화 통화 구성 요소를 닫습니다.

전화 통화 코드 탐색

1. customers-list.component.ts 파일을 엽니다. 파일의 전체 경로는 클라이언트/src/app/customers-list/customers-list.component.ts.

2. openCallDialog() 이벤트 버스를 사용하여 메시지와 고객 전화 번호를 보냅니 CustomerCall 다.

   openCallDialog(data: Phone) {
       this.eventBus.emit({ name: Events.CustomerCall, value: data });
   }
   

   비고

   이벤트 버스 코드는 더 자세히 탐색하려는 경우 eventbus.service.ts 파일에서 찾을 수 있습니다. 파일의 전체 경로는 클라이언트/src/app/core/eventbus.service.ts.

3. 헤더 구성 요소의 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
           })
       );
   }
   

4. phone-call.component.ts 엽니다. 잠시 시간을 내어 코드를 지수합니다. 파일의 전체 경로는 클라이언트/src/app/phone-call/phone-call.component.ts. 다음 주요 기능에 유의하세요.

   • 에서 함수acsService.getAcsToken()를 호출하여 Azure Communication Services 액세스 토큰을 ngOnInit() 검색합니다.
   • 페이지에 "전화 걸기"를 추가합니다. 머리글에서 전화 번호 입력을 클릭하여 다이얼러를 볼 수 있습니다.
   • 각각 및 startCall() 함수를 사용하여 호출을 endCall() 시작하고 종료합니다.

5. 전화를 걸 코드를 살펴보기 전에 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 userId 및 액세스 토큰을 검색합니다 acsService.getAcsToken() .
   • 액세스 토큰이 검색되면 코드는 다음 작업을 수행합니다.
     • 액세스 토큰의 CallClient 새 인스턴스를 만들고 AzureCommunicationTokenCredential 사용합니다.
     • 및 개체를 CallAgent 사용하는 새 인스턴스를 CallClient 만듭니 AzureCommunicationTokenCredential 다. 나중에 호출을 시작하고 종료하는 데 사용되는 것을 CallAgent 볼 수 있습니다.

6. acs.services.ts 열고 함수를 찾습니다getAcsToken(). 파일의 전체 경로는 클라이언트/src/app/core/acs.service.ts. 이 함수는 API 서버에서 노출하는 경로에 /acstoken 대한 HTTP GET 요청을 만듭니다.

   getAcsToken(): Observable<AcsUser> {
       return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
       .pipe(
           catchError(this.handleError)
       );
   }
   

7. 명명된 createACSToken() API 서버 함수는 userId 및 액세스 토큰을 검색하고 클라이언트에 반환합니다. 서버/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 . 그렇지 않은 경우 빈 userIdtoken개체와 .
   • 새 인스턴스 CommunicationIdentityClient 를 만들고 값을 전달합니다 connectionString .
   • "voip" 범위를 사용하여 tokenClient.createUserAndToken() 새 사용자 및 토큰을 만듭니다.
   • 값과 userId 값을 포함하는 개체를 token 반환합니다.

8. 이제 userId 및 토큰을 검색하는 방법을 살펴보았으므로 다시 돌아가 함수를 phone-call.component.tsstartCall() 찾습니다.

9. 이 함수는 전화 통화 구성 요소에서 통화를 선택할 때 호출됩니다. 앞에서 언급한 개체를 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;
           }
       });
   }
   

10. 전화 endCall() 통화 구성 요소에서 끊기를 선택하면 함수가 호출됩니다.

    endCall() {
        if (this.call) {
            this.call.hangUp({ forEveryone: true });
            this.call = undefined;
            this.inCall = false;
        }
        else {
            this.hangup.emit();
        }
    }
    

    호출이 진행 중인 경우 호출을 call.hangUp() 종료하기 위해 함수가 호출됩니다. 통화가 진행 중 hangup 이 아니면 헤더 부모 구성 요소로 이벤트를 내보내 전화 통화 구성 요소를 숨깁니다.

11. 다음 연습으로 이동하기 전에 이 연습에서 다루는 주요 개념을 검토해 보겠습니다.

    • ACS userId 및 액세스 토큰은 함수를 사용하여 acsService.createUserAndToken() API 서버에서 검색됩니다.
    • 토큰은 및 CallClient 개체를 CallAgent 만드는 데 사용됩니다.
    • 개체는 CallAgent 각각 및 callAgent.startCall() 함수를 호출하여 호출을 callAgent.hangUp() 시작하고 종료하는 데 사용됩니다.

12. 이제 전화 통화를 애플리케이션에 통합하는 방법을 배웠으므로 이제 Azure Communication Services를 사용하여 전자 메일 및 SMS 메시지를 보내는 데 초점을 맞추겠습니다.

다음 단계