퀵스타트: Visual Studio Code 확장 프로그램으로 개발

Azure Web PubSub는 개발자가 WebSockets와 게시-구독 패턴을 활용해 실시간 메시징 웹 애플리케이션을 쉽게 구축할 수 있도록 돕습니다.

이 튜토리얼에서는 Visual Studio Code의 도움을 받아 Azure Web PubSub를 사용해 채팅 애플리케이션을 만듭니다.

필수 조건

• 활성 구독이 있는 Azure 계정이 필요합니다. 계정이 아직 없는 경우 계정을 무료로 만들 수 있습니다.
• Visual Studio Code, 무료 다운로드로 사용할 수 있습니다.
• 설치된 Visual Studio Code 확장은 다음과 같습니다.
  • Azure 계정 확장
  • Azure Web PubSub 확장

프로젝트 복제

1. 새 Visual Studio Code 창을 엽니다.

2. F1을 눌러 명령 팔레트를 엽니다.

3. Git: Clone을 입력하고 Enter 키를 누릅니다.

4. 다음 URL을 입력하여 샘플 프로젝트를 복제합니다.

   https://github.com/Azure/azure-webpubsub.git
   

   비고

   이 자습서에서는 JavaScript 프로젝트를 사용하지만 단계는 언어에 구애받지 않습니다.

5. 프로젝트를 복제할 폴더를 선택합니다.

6. Visual Studio Code에서 열기 -> 폴더 열기를azure-webpubsub/samples/javascript/chatapp/nativeapi 선택하세요.

Azure에 로그인

1. F1을 눌러 명령 팔레트를 엽니다.

2. Azure: 로그인을 선택하고 프롬프트에 따라 인증합니다.

3. 로그인한 후 Visual Studio Code로 돌아갑니다.

Create an Azure Web PubSub Service

Visual Studio Code용 Azure Web PubSub 확장 기능을 통해 사용자는 Azure Web PubSub 서비스와 Azure Web PubSub 로컬 터널 도구와 같은 개발자 도구를 빠르게 생성, 관리, 활용할 수 있습니다. 이 시나리오에서는 새로운 Azure Web PubSub Service 리소스를 생성하고 애플리케이션을 호스팅하도록 설정합니다. Web PubSub 확장 프로그램을 설치한 후에는 Visual Studio Code의 Azure 제어판에서 해당 기능에 접근할 수 있습니다.

1. F1 키를 눌러 명령 팔레트를 열고 Azure Web PubSub: Create Web PubSub Service 명령을 실행하세요.

2. 확장에서 프롬프트에 따라 다음 값을 입력합니다.

   프롬프트	가치
   구독 선택	사용할 Azure 구독을 선택합니다.
   리소스 그룹 선택	사용할 Azure 리소스 그룹을 선택하세요.
   서비스 이름을 입력하세요	my-wps를 입력합니다.
   위치 선택	가까운 Azure 지역을 선택합니다.
   요금 등급을 선택하세요	원하는 요금 구간을 선택하세요.
   단위 수를 선택하세요	사용할 유닛 수를 선택하세요.

   Azure 활동 로그 패널이 열리고 배포 진행률이 표시됩니다. 이 프로세스를 완료하는 데 몇 분 정도 걸릴 수 있습니다.

3. 이 프로세스가 완료되면 Visual Studio Code에서 알림을 표시합니다.

허브 설정을 만드세요

1. Visual Studio Code 왼쪽 액티비티 바에서 Azure 아이콘을 열어보세요.

   비고

   활동 바가 숨겨져 있으면 확장 프로그램에 접근할 수 없습니다. 보기 보기 활동 바를 클릭하여 > 활동 바 표시 >

2. 리소스 트리에서 생성한 Azure Web PubSub 리소스 my-wps 를 찾아서 클릭해 확장하세요

3. 아이템 허브 설정을 우클릭하고 허브 설정 생성을 선택하세요

4. 허브 이름으로 입력 sample_chat 하고 허브 설정을 만드세요. 추가 이벤트 핸들러를 만들든 말든 상관없습니다. 완료 완료 알림을 기다리세요

5. 아이템 허브 설정 아래에 새로운 하위 아이템 허브 sample_chat 가 나타납니다. 새 항목을 우클릭한 후 "로컬 터널 부착"을 선택하세요.

6. 터널 활성화 이벤트 핸들러를 만들라는 알림이 뜨고, 예 버튼을 클릭하세요. 그 다음 확장에 따라 다음 값들을 입력합니다

   프롬프트	가치
   선택 사용자 이벤트	모두 선택
   셀렉트 시스템 이벤트	연결 상태 선택
   입력 서버 포트	8080의 등장

7. 확장 프로그램은 로컬 터널 도구를 실행할 새 터미널을 생성하고, 로컬 터널 포털을 열라는 알림이 나타납니다. "예" 버튼을 클릭하거나 "http://localhost:4000"여는 "; 웹 브라우저에서 수동으로 포털을 확인하세요.

서버 애플리케이션을 실행하세요

1. 작업 디렉터리가 azure-webpubsub/samples/javascript/chatapp/nativeapi

2. Node.js 종속성 설치

   npm install
   

3. 활동 바에서 Azure 아이콘을 열고 Azure Web PubSub 리소스 my-wps를 찾으세요. 그런 다음 리소스 항목을 우클릭하고 Copy Connection String을 선택하세요. 연결 문자열은 클립보드에 복사됩니다

4. 복사한 연결 문자열로 서버 애플리케이션을 실행하세요

   node server.js "<connection-string>"
   

5. 브라우저를 열 http://localhost:8080/index.html 어 채팅 앱을 사용해 보세요.