Udostępnij za pośrednictwem

Zacznij od przykładu wzorcowego czatu

Ważne

Ten przykład jest dostępny w witrynie GitHub.

Przykład czatu grup usług Azure Communication Services Hero pokazuje, jak za pomocą zestawu SDK czatu usług komunikacyjnych utworzyć środowisko czatu grupowego.

W tym artykule opisano, jak działa przykład, zanim uruchomimy go na komputerze lokalnym. Następnie wdrożymy przykład na platformie Azure przy użyciu własnych zasobów usług Azure Communication Services.

Omówienie

Przykład zawiera zarówno aplikację po stronie klienta, jak i aplikację po stronie serwera. Aplikacja po stronie klienta to aplikacja internetowa React/Redux, która korzysta z platformy Fluent UI firmy Microsoft. Ta aplikacja wysyła żądania do aplikacji po stronie serwera Node.js, która pomaga aplikacji po stronie klienta nawiązywać połączenie z platformą Azure.

Oto jak wygląda przykład:

Zrzut ekranu przedstawiający stronę docelową przykładowej aplikacji.

Po naciśnięciu przycisku Rozpocznij czat aplikacja internetowa pobiera token dostępu użytkownika z aplikacji po stronie serwera. Użyj tego tokenu, aby połączyć aplikację klienta z usługami Azure Communication Services. Po pobraniu tokenu system wyświetli monit o wprowadzenie swojej nazwy i wybranie emoji do reprezentowania Cię na czacie.

Zrzut ekranu przedstawiający ekran przedczatu aplikacji.

Po skonfigurowaniu nazwy wyświetlanej i emoji możesz dołączyć do sesji czatu. Teraz zobaczysz główną kanwę czatu, gdzie znajduje się główna funkcja czatu.

Zrzut ekranu przedstawiający ekran główny przykładowej aplikacji.

Składniki głównego ekranu czatu:

  • Główny obszar czatu: podstawowe środowisko czatu, w którym użytkownicy mogą wysyłać i odbierać wiadomości. Aby wysyłać komunikaty, możesz użyć obszaru wejściowego i nacisnąć Enter (lub użyć przycisku wyślij). Ekran czatu organizuje odebrane wiadomości czatu przez nadawcę z odpowiednią nazwą i emoji. W obszarze czatu są wyświetlane dwa typy powiadomień: 1) powiadomienia o wpisywaniu, gdy użytkownik pisze, i 2) powiadomienia o wysłaniu i odczytaniu wiadomości.
  • Nagłówek: Gdzie użytkownik widzi tytuł rozmowy czatu oraz kontrolki do przełączania bocznych pasków uczestników i ustawień, a także przycisk wyjścia do zakończenia sesji czatu.
  • Pasek boczny: Gdzie uczestnicy i informacje o ustawieniach są wyświetlane po przełączeniu za pomocą kontrolek w nagłówku. Pasek boczny uczestników zawiera listę uczestników czatu i link do zapraszania uczestników do sesji czatu. Pasek boczny ustawień umożliwia skonfigurowanie tytułu wątku czatu.

Wykonaj następujące wymagania wstępne i kroki, aby skonfigurować przykład.

Wymagania wstępne

Przed uruchomieniem próbki po raz pierwszy

  1. Otwórz instancję programu PowerShell, Windows Terminal, wiersza polecenia lub równoważnego i przejdź do katalogu, w którym chcesz sklonować przykład.

  2. Sklonuj repozytorium przy użyciu następującego polecenia CLI:

    git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git

    Możesz też sklonować repozytorium przy użyciu dowolnej metody opisanej w temacie Klonowanie istniejącego repozytorium Git.

  3. Pobierz elementy Connection String i Endpoint URL z portalu Azure lub za pomocą wiersza polecenia Azure.

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"

    Aby uzyskać więcej informacji na temat ciągów połączenia, zobacz Tworzenie zasobów usługi Azure Communication Services

  4. Gdy już otrzymasz Connection String, dodaj ciąg połączenia do pliku Server/appsettings.json znajdującego się w folderze Chat. Wprowadź parametry połączenia w zmiennej: ResourceConnectionString.

  5. Gdy już uzyskasz Endpoint, dodaj ciąg punktu końcowego do pliku Server/appsetting.json. Wprowadź punkt końcowy w zmiennej: EndpointUrl.

  6. Pobierz element identity z witryny Azure Portal. W portalu Azure wybierz Tożsamości i tokeny dostępu użytkowników. Wygeneruj użytkownika z zakresem Chat.

  7. Gdy otrzymasz ciąg identity, dodaj ciąg identyfikacyjny do pliku Server/appsetting.json. Wprowadź ciąg tożsamości w zmiennej: AdminUserId. Serwer używa ciągu , aby dodać nowych użytkowników do wątku czatu.

Uruchamianie lokalne

  1. Ustaw parametr połączenia w Server/appsettings.json
  2. Ustaw ciąg adresu URL punktu końcowego w Server/appsettings.json
  3. Ustaw ciąg znaków adminUserId w Server/appsettings.json
  4. npm run setup z katalogu głównego
  5. npm run start z katalogu głównego

Przykład można przetestować lokalnie, otwierając wiele sesji przeglądarki przy użyciu adresu URL czatu, aby symulować czat z wieloma użytkownikami.

Publikowanie przykładu na platformie Azure

  1. W katalogu głównym uruchom następujące polecenia:

    npm run setup
npm run build
npm run package

  2. Użyj rozszerzenia platformy Azure i wdróż katalog Chat/dist w usłudze aplikacji

Czyszczenie zasobów

Jeśli chcesz wyczyścić i usunąć subskrypcję usług Komunikacyjnych, możesz usunąć zasób lub grupę zasobów. Usunięcie grupy zasobów powoduje również usunięcie wszelkich innych skojarzonych z nią zasobów. Dowiedz się więcej o czyszczeniu zasobów.

Następne kroki

Pobieranie przykładu z usługi GitHub

Aby uzyskać więcej informacji, zobacz:

  • Przykłady — znajdź więcej przykładów i wzorów na naszej stronie z przeglądem przykładów.
  • Redux — zarządzanie stanem po stronie klienta
  • FluentUI — biblioteka interfejsu użytkownika obsługiwana przez firmę Microsoft
  • React — biblioteka do tworzenia interfejsów użytkownika