網路聊天概觀

發行項
01/18/2024

適用於： 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`

若要這樣做，您可以新增套件，然後變更項目的登錄。

新增網路聊天以外的專案相依性。
在專案的根目錄中，建立 .npmrc 檔案
將下列這一行新增至您的檔案： registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
將網路聊天新增至專案相依性npm i botframework-webchat --save
package-lock.json在您的中，指向的登錄現在是 MyGet。網路聊天項目已啟用上游來源 Proxy，這會將非 MyGet 套件重新導向至 npmjs.com。

重新訂閱正式發行日期 `npmjs.com`

重新訂閱需要重設登錄。

刪除您的 .npmrc file
刪除您的根目錄 package-lock.json
拿掉目錄node_modules
使用重新安裝套件 npm i
package-lock.json在您的中，登錄會再次指向 https://npmjs.com/ 。

參與

如需如何建置專案和提取要求的存放庫指導方針的詳細資訊，請參閱我們的參與頁面。

此專案採用了 Microsoft 開放原始碼管理辦法。如需詳細資訊，請參閱管理辦法常見問題集，如有其他問題或意見，請連絡 opencode@microsoft.com。

報告安全性問題

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

網路聊天 概觀

開始使用 網路聊天

與 JavaScript 整合

與 React 整合

自訂 網路聊天 UI

從 網路聊天 v3 移轉至 v4