通訊：撥打電話

將 Azure 通訊服務 的電話通話功能整合到自定義企業營運 （LOB） 應用程式中，為企業及其使用者提供數個主要優點：

• 從 LOB 應用程式內直接啟用員工、客戶和合作夥伴之間的順暢且即時的通訊，而不需要在多個平臺或裝置之間切換。
• 增強用戶體驗並提升整體作業效率。
• 協助快速解決問題，因為使用者可以快速且輕鬆地與相關的支援小組或主題專家聯繫。

在本練習中，您將會：

• 探索應用程式中的通話功能。
• 逐步解說程序代碼，以瞭解如何建置通話功能。

使用通話功能

1. 在上一個 練習 中，您已建立 Azure 通訊服務 （ACS） 資源，並啟動資料庫、Web 伺服器和 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 檔案。 檔案的完整路徑是 client/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檔案中找到。 檔案的完整路徑是 client/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。 花點時間來闡述程序代碼。 檔案的完整路徑為 client/src/app/phone-call/phone-call.component.ts。 請注意下列主要功能：

   • 在 中acsService.getAcsToken()呼叫 ngOnInit() 函式，以擷取 Azure 通訊服務 存取令牌。
   • 將「電話撥號程式」新增至頁面。 您可以按下標頭中的電話號碼輸入來查看撥號程式。
   • 分別使用 startCall() 和函式啟動和 endCall() 結束呼叫。

5. 在查看撥打電話的程序代碼之前，讓我們先檢查如何擷取 ACS 存取令牌，以及如何建立通話物件。 在 phone-call.component.tsngOnInit()找出 函式。

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

   此函式會執行下列動作：

   • 藉由呼叫 acsService.getAcsToken() 函式來擷取 ACS userId 和存取令牌。
   • 擷取存取令牌之後，程式代碼會執行下列動作：
     • 建立的新實例 CallClient ，並使用 AzureCommunicationTokenCredential 存取令牌。
     • 使用 CallAgent 和 CallClient 物件建立 的新實例AzureCommunicationTokenCredential。 稍後您會看到 CallAgent 用來啟動和結束通話。

6. 開啟 acs.services.ts 並找出 函 getAcsToken() 式。 檔案的完整路徑是 client/src/app/core/acs.service.ts。 函式會對 API 伺服器公開的路由提出 HTTP GET 要求 /acstoken 。

   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 值是否可用。 如果沒有，則傳回具有空白 userId 和 token的物件。
   • 建立 的新實例 CommunicationIdentityClient ，並將值傳遞給 connectionString 它。
   • 使用 tokenClient.createUserAndToken() 搭配 「voip」 範圍建立新的使用者和令牌。
   • 傳回包含 userId 和 token 值的物件。

8. 既然您已瞭解如何擷取 userId 和令牌，請返回並 phone-call.component.ts 找出函式 startCall() 。

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 通訊服務 傳送電子郵件和簡訊。

後續步驟