共用方式為

網路聊天 概觀

  • 發行項

適用於： SDK v4

本文包含 Bot Framework 網路聊天 元件的詳細數據。 Bot Framework 網路聊天 元件是 Bot Framework V4 SDK 高度自定義的 Web 型用戶端。 Bot Framework SDK v4 可讓開發人員建立對話模型，並建置複雜的 Bot 應用程式。

如果您想要從 網路聊天 v3 移轉至 v4，請跳到移轉區段。

開始使用 網路聊天

注意

如需舊版的 網路聊天 （v3），請流覽 網路聊天 v3 分支。

首先，使用 Azure AI Bot Service 建立 Bot。 建立 Bot 之後，您必須在 Azure 入口網站 中取得 Bot 的 網路聊天 秘密。 然後使用秘密來產生令牌，並將它傳遞至您的 網路聊天。

下列範例示範如何將 網路聊天 控件新增至網站。

<!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、 botAvatarInitials和 userAvatarInitials 都是傳遞至 renderWebChat 方法的選擇性參數。 如需樣式的詳細資訊，請參閱 為什麼 styleOptions？。 若要深入瞭解 網路聊天 屬性，請參閱 網路聊天 API 參考一節。

此外，如果您的 Bot 是區域 Bot（這表示 Bot 資源位於「全域」以外的區域），您必須在 方法的其他domainwindow.WebChat.createDirectLine()欄位中設定它，以指定區域直接線路 URL。 將網域指定為 europe.webchat.botframework.com、 unitedstates.webchat.botframework.com 或 india.webchat.botframework.com，無論哪個區域都適合您所選擇的區域。 如需數據落地的相關信息，請閱讀 接聽歐洲的電話：在歐盟儲存和處理歐盟 數據。

與 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） 的資訊，請參閱內容傳遞網路 （CDN）

從 網路聊天 v3 移轉至 v4

從 v3 移轉至 v4 時，移轉可能需要三個可能的路徑。 比較您的開始案例與下面所列的案例。

  • 若要升級內嵌在 中的 <iframe>網路聊天 控件，請參閱內嵌套件 網路聊天 存放庫中的檔。
  • 若要升級幾乎不需要自定義的 網路聊天 控件，請檢閱描述此程式的 網路聊天 00.migration/a.v3-to-v4 範例。
  • 若要升級高度自定義 網路聊天 的分支版本，請參閱 網路聊天 移轉指引。

網路聊天 API 參考

您可能會將數個屬性傳遞至 網路聊天 React 元件 （<ReactWebChat>） 或 renderWebChat() 方法。 如需可用屬性的簡短描述，請參閱 網路聊天 API 參考。 此外，請隨意檢查從 開始的 packages/component/src/Composer.js原始程式碼。

瀏覽器相容性

網路聊天 支援最新 2 版的新式瀏覽器，例如 Chrome、Edge 和 FireFox。 如果您需要 Internet Explorer 11 中的 網路聊天，請參閱 ES5 套件組合和示範。

  • 網路聊天 不支援 11 版之前的 Internet Explorer
  • Internet Explorer 不支援如非ES5範例所示的自定義。 由於 IE11 是非新式瀏覽器，因此不支援 ES6，而且使用箭號函式和新式承諾的許多範例都必須手動轉換成 ES5。 如果您需要大量自定義應用程式，強烈建議您針對Google Chrome或Edge等新式瀏覽器開發您的應用程式。
  • 網路聊天 沒有計劃支援 IE11 （ES5） 的範例。
  • 對於想要以手動方式重寫其他範例以在 IE11 中運作的客戶，建議您使用 polyfill 和 Transpiler 等 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。 網路聊天 項目已啟用上游來源 Proxy，這會將非 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 開放原始碼管理辦法。 如需詳細資訊，請參閱管理辦法常見問題集，如有其他問題或意見，請連絡 opencode@microsoft.com。

報告安全性問題

安全性問題和錯誤應該透過電子郵件私下回報給位於 secure@microsoft.com的 Microsoft 安全性回應中心 （MSRC）。 您應該會在 24 小時內收到回應。 如果基於某些原因，請透過電子郵件追蹤，以確保我們收到您的原始訊息。 如需詳細資訊，包括 MSRC PGP 金鑰，請參閱 安全性 TechCenter。