다음을 통해 공유


채팅 주인공 샘플 시작

Azure Communication Services 그룹 채팅 주인공 샘플은 Communication Services 채팅 웹 SDK를 사용하여 그룹 채팅 환경을 만드는 방법을 보여 줍니다.

이 샘플 빠른 시작에서는 샘플이 어떻게 작동하는지 살펴본 후 로컬 컴퓨터에서 샘플을 실행합니다. 그런 다음, 사용자 고유의 Azure Communication Services 리소스를 사용하여 Azure에 샘플을 배포합니다.

개요

이 샘플에는 클라이언트 쪽 애플리케이션과 서버 쪽 애플리케이션이 모두 들어 있습니다. 클라이언트 쪽 애플리케이션은 Microsoft의 Fluent UI 프레임워크를 사용하는 React/Redux 웹 애플리케이션입니다. 이 애플리케이션은 클라이언트 쪽 애플리케이션에서 Azure에 연결하는 데 도움이 되는 Node.js 서버 쪽 애플리케이션으로 요청을 보냅니다.

샘플은 다음과 같습니다.

샘플 애플리케이션의 방문 페이지를 보여주는 스크린샷.

채팅 시작을 누르면 웹 애플리케이션이 서버 쪽 애플리케이션에서 사용자 액세스 토큰을 가져옵니다. 그런 다음 이 토큰을 사용하여 클라이언트 앱을 Azure Communication Services에 연결합니다. 토큰이 검색되면 시스템에서 이름을 입력하고 채팅에서 여러분을 나타낼 이모티콘을 선택하라는 메시지가 표시됩니다.

애플리케이션의 채팅 전 화면을 보여주는 스크린샷.

표시 이름 및 이모지 구성이 끝나면 채팅 세션에 참가할 수 있습니다. 이제 핵심 채팅 환경이 있는 기본 채팅 캔버스가 표시됩니다.

샘플 애플리케이션의 기본 화면을 보여 주는 스크린샷

기본 채팅 화면의 구성 요소:

  • 기본 채팅 영역: 사용자가 메시지를 보내고 받을 수 있는 핵심 채팅 환경입니다. 메시지를 보내려면 입력 영역을 사용하고 Enter 키를 누릅니다(또는 보내기 단추를 사용). 수신된 채팅 메시지는 보낸 사람별로 올바른 이름과 이모지를 사용하여 구성됩니다. 채팅 영역에 두 가지 유형의 알림이 표시됩니다. 1) 사용자가 입력 중일 때 표시되는 입력 알림과 2) 메시지 발신 및 읽음 알림의 두 가지 알림 유형이 표시됩니다.
  • 헤더: 채팅 스레드의 제목, 참가자를 전환하고 사이드바를 설정하는 컨트롤, 채팅 세션을 종료하는 나가기 단추가 여기에 표시됩니다.
  • 사이드바: 헤더의 컨트롤을 사용하여 사이드바를 전환하면 참가자 및 설정 정보가 사이드바에 표시됩니다. 참가자 사이드바에는 채팅의 참가자 목록과 참가자를 채팅 세션에 초대하는 링크가 있습니다. 설정 사이드바를 통해 채팅 스레드 제목을 구성할 수 있습니다.

다음 필수 구성 요소 및 샘플을 설정하는 단계를 완료합니다.

필수 조건

처음으로 샘플을 실행하기 전에

  1. PowerShell, Windows 터미널, 명령 프롬프트 또는 그에 상응하는 인스턴스를 열고 샘플을 복제할 디렉터리로 이동합니다.

  2. 다음 CLI 문자열을 사용하여 리포지토리를 복제합니다.

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

    또는 기존 Git 리포지토리 복제에 설명된 방법을 사용하여 리포지토리를 복제합니다.

  3. Azure Portal에서 또는 Azure CLI를 사용하여 Connection StringEndpoint URL을(를) 가져옵니다.

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

    연결 문자열에 대한 자세한 내용은 Azure Communication Services 리소스 만들기를 참조하세요.

  4. Connection String을(를) 가져온 후에는 Chat 폴더 아래에 있는 Server/appsettings.json 파일에 연결 문자열을 추가합니다. ResourceConnectionString 변수에 연결 문자열을 입력합니다.

  5. Endpoint을(를) 가져오면 엔드포인트 문자열을 Server/appsetting.json 파일에 추가합니다. 변수 EndpointUrl에 엔드포인트를 입력합니다.

  6. Azure Portal에서 identity을 가져옵니다. Azure Portal에서 ID 및 사용자 액세스 토큰을 선택합니다. Chat 범위가 있는 사용자를 생성합니다.

  7. identity 문자열을 가져오면 ID 문자열을 Server/appsetting.json 파일에 추가합니다. 변수에 ID 문자열 AdminUserId을(를) 입력합니다. 채팅 스레드에 새 사용자를 추가하는 서버 사용자입니다.

로컬 실행

  1. Server/appsettings.json에서 연결 문자열 설정
  2. Server/appsettings.json에서 엔드포인트 URL 문자열 설정
  3. Server/appsettings.json에서 adminUserId 문자열 설정
  4. 루트 디렉터리의 npm run setup
  5. 루트 디렉터리의 npm run start

채팅 URL을 사용하여 여러 브라우저 세션을 열고 다중 사용자 채팅을 시뮬레이션하여 샘플을 로컬로 테스트할 수 있습니다.

Azure에 샘플 게시

  1. 루트 디렉터리에서 다음 명령을 실행합니다.
npm run setup
npm run build
npm run package
  1. Azure 확장을 사용하고 Chat/dist 디렉터리를 앱 서비스에 배포

리소스 정리

Communication Services 구독을 정리하고 제거하려면 리소스 또는 리소스 그룹을 삭제하면 됩니다. 리소스 그룹을 삭제하면 해당 리소스 그룹에 연결된 다른 모든 리소스가 함께 삭제됩니다. 리소스 정리에 대해 자세히 알아보세요.

다음 단계

자세한 내용은 다음 문서를 참조하세요.

  • 샘플 - 샘플 개요 페이지에서 추가 샘플과 예제를 찾아보세요.
  • Redux - 클라이언트 쪽 상태 관리
  • FluentUI - Microsoft 기반 UI 라이브러리
  • React - 사용자 인터페이스 빌드용 라이브러리