Komunikacja: nawiązywanie połączenia telefonicznego

Integrowanie funkcji połączeń telefonicznych usług Azure Communication Services z niestandardową aplikacją loB (Line of Business) oferuje kilka kluczowych korzyści dla firm i ich użytkowników:

• Umożliwia bezproblemową i w czasie rzeczywistym komunikację między pracownikami, klientami i partnerami bezpośrednio z poziomu aplikacji LOB, eliminując konieczność przełączania się między wieloma platformami lub urządzeniami.
• Zwiększa środowisko użytkownika i zwiększa ogólną wydajność operacyjną.
• Ułatwia szybkie rozwiązywanie problemów, ponieważ użytkownicy mogą szybko łączyć się z odpowiednimi zespołami pomocy technicznej lub ekspertami w danej dziedzinie szybko i łatwo.

W tym ćwiczeniu wykonasz następujące czynności:

• Zapoznaj się z funkcją połączeń telefonicznych w aplikacji.
• Zapoznaj się z kodem, aby dowiedzieć się, jak jest utworzona funkcja połączeń telefonicznych.

Korzystanie z funkcji połączenia telefonicznego

1. W poprzednim ćwiczeniu utworzono zasób usług Azure Communication Services (ACS) i uruchomiono bazę danych, serwer internetowy i serwer interfejsu API. Zaktualizowano również następujące wartości w pliku 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>
   

   Przed kontynuowaniem upewnij się, że wykonano poprzednie ćwiczenie .

2. Wróć do przeglądarki (http://localhost:4200), znajdź usługę datagrid i wybierz pozycję Skontaktuj się z klientem , a następnie w pierwszym wierszu skontaktuj się z klientem .

   

3. Składnik połączenia telefonicznego zostanie dodany do nagłówka. Wprowadź numer telefonu, który chcesz zadzwonić (upewnij się, że rozpoczyna się od + i zawiera kod kraju), a następnie wybierz pozycję Zadzwoń. Zostanie wyświetlony monit o zezwolenie na dostęp do mikrofonu.

   

4. Wybierz pozycję Zawieszaj się , aby zakończyć połączenie. Wybierz pozycję Zamknij , aby zamknąć składnik połączenia telefonicznego.

Eksplorowanie kodu rozmów telefonicznych

1. Otwórz plik customers-list.component.ts . Pełna ścieżka do pliku to client/src/app/customers-list/customers-list.component.ts.

2. Należy pamiętać, że openCallDialog() wysyła CustomerCall wiadomość i numer telefonu klienta przy użyciu magistrali zdarzeń.

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

   Uwaga / Notatka

   Kod magistrali zdarzeń można znaleźć w pliku eventbus.service.ts , jeśli chcesz go dokładniej eksplorować. Pełna ścieżka do pliku to client/src/app/core/eventbus.service.ts.

3. Funkcja składnika nagłówka ngOnInit() subskrybuje CustomerCall zdarzenie wysyłane przez magistralę zdarzeń i wyświetla składnik połączenia telefonicznego. Ten kod można znaleźć w 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. Otwórz phone-call.component.ts. Pośmiń chwilę, aby wyeksponować kod. Pełna ścieżka do pliku to client/src/app/phone-call/phone-call.component.ts. Zwróć uwagę na następujące kluczowe funkcje:

   • Pobiera token dostępu usług Azure Communication Services przez wywołanie acsService.getAcsToken() funkcji w pliku ngOnInit();
   • Dodaje do strony "numer telefonu". Możesz wyświetlić numer telefonu, klikając numer telefonu w nagłówku.
   • Uruchamia i kończy wywołanie, używając startCall() odpowiednio funkcji i endCall() .

5. Przed przyjrzeniem się kodowi, który wykonuje połączenie telefoniczne, sprawdźmy, jak jest pobierany token dostępu ACS i jak są tworzone obiekty połączeń telefonicznych. ngOnInit() Znajdź funkcję w 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);
               })
           );
       }
   }
   

   Ta funkcja wykonuje następujące akcje:

   • Pobiera identyfikator użytkownika usługi ACS i token dostępu przez wywołanie acsService.getAcsToken() funkcji.
   • Po pobraniu tokenu dostępu kod wykonuje następujące akcje:
     • Tworzy nowe wystąpienie elementu CallClient i AzureCommunicationTokenCredential przy użyciu tokenu dostępu.
     • Tworzy nowe wystąpienie CallAgent obiektu CallClient i AzureCommunicationTokenCredential . Później zobaczysz, że CallAgent służy do uruchamiania i kończenia wywołania.

6. Otwórz acs.services.ts i znajdź getAcsToken() funkcję. Pełna ścieżka do pliku to client/src/app/core/acs.service.ts. Funkcja wysyła żądanie HTTP GET do /acstoken trasy uwidocznionej przez serwer interfejsu API.

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

7. Funkcja serwera interfejsu API o nazwie createACSToken() pobiera identyfikator userId i token dostępu i zwraca ją do klienta. Można go znaleźć w pliku 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 };
   }
   

   Ta funkcja wykonuje następujące akcje:

   • Sprawdza, czy wartość usługi ACS connectionString jest dostępna. Jeśli nie, zwraca obiekt z pustym userId elementem i token.
   • Tworzy nowe wystąpienie CommunicationIdentityClient klasy i przekazuje connectionString do niej wartość.
   • Tworzy nowego użytkownika i tokenu przy użyciu tokenClient.createUserAndToken() zakresu "voip".
   • Zwraca obiekt zawierający userId wartości i token .

8. Teraz, gdy już wiesz, jak pobrano identyfikator userId i token, wróć do phone-call.component.ts funkcji i znajdź tę startCall() funkcję.

9. Ta funkcja jest wywoływana po wybraniu połączenia w składniku połączenia telefonicznego. Używa obiektu wymienionego CallAgent wcześniej do uruchomienia wywołania. Funkcja callAgent.startCall() akceptuje obiekt reprezentujący numer do wywołania i numer telefonu ACS użyty do nawiązania połączenia.

   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. Funkcja jest wywoływana endCall() po wybraniu funkcji Hang Up w składniku połączenia telefonicznego.

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

    Jeśli wywołanie jest w toku, funkcja jest wywoływana w call.hangUp() celu zakończenia wywołania. Jeśli żadne wywołanie nie jest w toku, hangup zdarzenie jest emitowane do składnika nadrzędnego nagłówka w celu ukrycia składnika połączenia telefonicznego.

11. Przed przejściem do następnego ćwiczenia przejrzyjmy kluczowe pojęcia omówione w tym ćwiczeniu:

    • Identyfikator użytkownika usługi ACS i token dostępu są pobierane z serwera interfejsu acsService.createUserAndToken() API przy użyciu funkcji .
    • Token jest używany do tworzenia CallClient obiektu i CallAgent .
    • Obiekt jest używany do uruchamiania CallAgent i kończenia wywołania przez wywołanie callAgent.startCall() odpowiednio funkcji i callAgent.hangUp() .

12. Teraz, gdy wiesz już, jak można zintegrować połączenia telefoniczne z aplikacją, przełączmy naszą koncentrację na używanie usług Azure Communication Services w celu wysyłania wiadomości e-mail i wiadomości SMS.

Następny krok