다음을 통해 공유

웹 채팅 개요

  • 아티클

적용 대상: SDK v4

이 문서에는 Bot Framework 웹 채팅 구성 요소에 대한 세부 정보가 포함되어 있습니다. Bot Framework 웹 채팅 구성 요소는 Bot Framework V4 SDK에 대해 고도로 사용자 지정 가능한 웹 기반 클라이언트입니다. Bot Framework SDK v4를 사용하면 개발자가 대화를 모델링하고 정교한 봇 애플리케이션을 빌드할 수 있습니다.

웹 채팅 v3에서 v4로 마이그레이션하려는 경우 마이그레이션 섹션으로 이동합니다.

웹 채팅 시작

참고 항목

이전 버전의 웹 채팅(v3)을 사용하는 경우 웹 채팅 v3 분기로 이동합니다.

먼저 Azure AI Bot Service를 사용하여 봇을 만듭니다. 봇이 만들어지면 Azure Portal에서 봇의 웹 채팅 비밀을 가져와야 합니다. 그런 다음, 이 비밀을 사용하여 토큰을 생성하고 웹 채팅에 전달합니다.

다음 예제에서는 웹 사이트에 웹 채팅 컨트롤을 추가하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>

         // Set style options.
         const styleOptions = {
            botAvatarInitials: 'BF',
            userAvatarInitials: 'WC'
         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID',
               username: 'Web Chat User',
               locale: 'en-US',
               styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

userID, username, locale및 botAvatarInitialsuserAvatarInitials 메서드에 전달할 모든 선택적 매개 변수입니다renderWebChat. 스타일에 대한 자세한 내용은 styleOptions 이유를 참조 하세요. 웹 채팅 속성에 대한 자세한 내용은 웹 채팅 API 참조 섹션을 참조하세요.

또한 봇이 지역 봇인 경우(즉, 봇 리소스가 "전역" 이외의 지역에 있음) 메서드의 추가 domain 필드에 window.WebChat.createDirectLine() 설정하여 지역별 직접 회선 URL을 지정해야 합니다. do기본 중 하나 europe.webchat.botframework.comunitedstates.webchat.botframework.com 또는 india.webchat.botframework.com선택한 지역에 적합한 것으로 지정합니다. 데이터 보존에 대한 자세한 내용은 유럽 통화 응답: EU의 EU 데이터 저장 및 처리에 대해 읽어보세요.

JavaScript와 통합

웹 채팅은 JavaScript 또는 React를 사용하여 기존 웹 사이트와 통합하도록 설계되었습니다. JavaScript와 통합하면 몇 가지 스타일 지정 및 사용자 지정이 가능하며, 자세한 내용은 웹 사이트에 웹 채팅 통합을 참조하세요.

가장 일반적으로 사용되는 기능을 포함하는 일반적인 전체 botframework-webchat 패키지를 사용할 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

전체 웹 채팅 번들의 작업 샘플을 참조하세요.

React와 통합

완전한 사용자 지정을 위해 React를 사용하여 웹 채팅 구성 요소를 다시 구성할 수 있습니다.

npm에서 프로덕션 빌드를 설치하려면 .를 실행합니다 npm install botframework-webchat.

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
      element
    );
  }
}

실행 npm install botframework-webchat@master 하여 웹 채팅 GitHub 분기와 동기화되는 개발 빌드를 설치할 수도 있습니다master.

React를 통해 렌더링된 웹 채팅 작업 샘플을 참조하세요.

팁

React 및 jsx를 접하는 경우 Reacts 시작 페이지에서 학습을 찾을 수 있습니다.

웹 채팅 UI 사용자 지정

웹 채팅은 소스 코드를 포크하지 않고 사용자 지정할 수 있도록 설계되었습니다. 아래 표에서는 다양한 방법으로 웹 채팅 가져올 때 수행할 수 있는 사용자 지정 종류를 간략하게 설명합니다. 이 목록은 완전하지 않습니다.

사용자 지정 CDN 번들 React
색 변경 ✔️ ✔️
크기 변경 ✔️ ✔️
CSS 스타일 업데이트/바꾸기 ✔️ ✔️
이벤트 수신 대기 ✔️ ✔️
호스팅 웹 페이지와 상호 작용 ✔️ ✔️
사용자 지정 렌더링 작업 ✔️
사용자 지정 렌더링 첨부 파일 ✔️
새 UI 구성 요소 추가 ✔️
전체 UI 재구성 ✔️

사용자 지정에 대해 자세히 알아보려면 웹 채팅 사용자 지정을 참조하세요.

참고 항목

CDN(Content Delivery Network)에 대한 자세한 내용은 CDN(콘텐츠 배달 네트워크)을 참조 하세요.

웹 채팅 v3에서 v4로 마이그레이션

v3에서 v4로 마이그레이션할 때 마이그레이션에 걸릴 수 있는 세 가지 경로가 있습니다. 시작 시나리오를 아래에 나열된 시나리오와 비교합니다.

웹 채팅 API 참조

웹 채팅 React 구성 요소(<ReactWebChat>) 또는 메서드에 전달할 수 있는 몇 가지 속성이 renderWebChat() 있습니다. 사용 가능한 속성에 대한 간단한 설명은 웹 채팅 API 참조를 참조하세요. 또한 .로 시작하는 소스 코드를 자유롭게 검사할 수 있습니다 packages/component/src/Composer.js.

브라우저 호환성

웹 채팅 Chrome, Edge 및 FireFox와 같은 최신 브라우저의 최신 2 버전을 지원합니다. Internet Explorer 11에서 웹 채팅 필요한 경우 ES5 번들 및 데모를 참조하세요.

  • 웹 채팅 버전 11보다 오래된 Internet Explorer를 지원하지 않습니다.
  • ES5가 아닌 샘플에 표시된 대로 사용자 지정은 Internet Explorer에서 지원되지 않습니다. IE11은 최신이 아닌 브라우저이므로 ES6을 지원하지 않으며 화살표 함수와 최신 약속을 사용하는 많은 샘플을 수동으로 ES5로 변환해야 합니다. 앱에 대한 사용자 지정이 많이 필요한 경우 Google Chrome 또는 Edge와 같은 최신 브라우저용 앱을 개발하는 것이 좋습니다.
  • 웹 채팅은 IE11(ES5)용 샘플을 지원할 계획이 없습니다.
  • IE11에서 작동하도록 다른 샘플을 수동으로 다시 작성하려는 고객의 경우 다음과 같은 babel폴리필 및 트랜스파일러를 사용하여 코드를 ES6+에서 ES5로 변환하는 것이 좋습니다.

웹 채팅 최신 비트로 테스트하는 방법

릴리스되지 않은 기능 테스트는 현재 MyGet 패키징을 통해서만 사용할 수 있습니다.

아직 릴리스되지 않은 기능 또는 버그 수정을 테스트하려면 공식 npmjs 피드와 달리 웹 채팅 패키지를 웹 채팅 일일 피드를 가리킬 수 있습니다.

현재, MyGet 피드를 구독하면 웹 채팅의 일별 피드에 액세스할 수 있습니다. 이렇게 하려면 프로젝트에서 레지스트리를 업데이트해야 합니다. 이러한 변경은 되돌릴 수 있으며, 공식 릴리스를 다시 구독하는 되돌리기 방법을 안내합니다.

에서 최신 비트 구독 myget.org

이렇게 하려면 패키지를 추가한 다음 프로젝트의 레지스트리를 변경할 수 있습니다.

  1. 웹 채팅 이외의 프로젝트 종속성을 추가합니다.
  2. 프로젝트의 루트 디렉터리에서 파일을 만듭니다 .npmrc .
  3. 파일에 다음 줄을 추가합니다. registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. 프로젝트 종속성에 웹 채팅 추가npm i botframework-webchat --save
  5. 사용자의 package-lock.json레지스트리에서 가리키는 레지스트리는 이제 MyGet입니다. 웹 채팅 프로젝트에는 업스트림 원본 프록시가 활성화되어 있으므로 MyGet이 아닌 패키지를 리디렉션합니다npmjs.com.

공식 릴리스에 다시 구독 npmjs.com

다시 구독하려면 레지스트리를 다시 설정해야 합니다.

  1. 삭제합니다. .npmrc file
  2. 루트 삭제 package-lock.json
  3. node_modules 디렉터리 제거
  4. 를 사용하여 패키지 다시 설치 npm i
  5. 레지스트리 package-lock.json에서 다시 가리 https://npmjs.com/ 킵니다.

참여

프로젝트를 빌드하는 방법 및 끌어오기 요청에 대한 리포지토리 지침에 대한 자세한 내용은 기여 페이지를 참조하세요.

이 프로젝트는 Microsoft 오픈 소스 준수 사항을 채택했습니다. 자세한 내용은 준수 사항 FAQ를 참조하거나 opencode@microsoft.com에 추가 질문 또는 의견을 알려주세요.

보안 문제 보고

보안 문제 및 버그는 이메일을 통해 MSRC(Microsoft Security Response Center)에 secure@microsoft.com비공개로 보고되어야 합니다. 24시간 이내에 응답을 받게 됩니다. 어떤 이유로도 그렇지 않은 경우 전자 메일을 통해 후속 조치를 수행하여 원본 메시지를 받았는지 확인합니다. MSRC PGP 키를 포함한 추가 정보는 Security TechCenter에서 찾을 수 있습니다.