搭配使用 Web Chat 與 Direct Line App Service 擴充功能Use Web Chat with the direct line app service extension

適用于: SDK v4APPLIES TO: SDK v4

本文說明如何使用網路聊天搭配 Direct Line app service 延伸模組。This article describes how to use Web Chat with the Direct Line app service extension. 原生 Direct Line app service 延伸模組支援需要網路聊天版本4.9.1 或更高版本。Web Chat version 4.9.1 or higher is required for native Direct Line app service extension support.

整合 Web Chat 用戶端Integrate Web Chat client

注意

透過 Direct Line App Service 擴充功能傳送的調適型卡片,並不會像透過其他版本的 Direct Line 通道傳送的卡片一樣進行相同的處理。Adaptive Cards sent through the Direct Line App Service Extension do not undergo the same processing as those sent through other versions of the Direct Line channel. 因此,從 App Service Direct Line 擴充功能傳送至 Web Chat 的調適型卡片,如果 Bot 在建立卡片時省略這些欄位,這類卡片的 JSON 表示法將不會有通道新增的預設值。Due to this the JSON representation of the Adaptive Card sent to Web Chat from the Direct Line App Service Extension will not have default values added by the channel if the fields are omitted by the bot when the card is created.

此方法與之前大致相同。Generally speaking, the approach is the same as before. 除了在4.9.1 或更高版本的 網路聊天 中,有內建的支援可建立雙向 WebSocket,而不是直接連接到您的 https://directline.botframework.com/ bot 所裝載的 Direct Line app service 延伸模組。With the exception that in version 4.9.1 or higher of Web Chat there is built in support for establishing a two-way WebSocket, which instead of connecting to https://directline.botframework.com/ connects directly to the Direct Line app service extension hosted with your bot. 您 bot 的 Direct Line URL 會是 https://<your_app_service>.azurewebsites.net/.bot/ app service 延伸模組上的 Direct Line 端點The Direct Line URL for your bot will be https://<your_app_service>.azurewebsites.net/.bot/, the Direct Line endpoint on your app service extension. 如果您設定自己的功能變數名稱,或您的 bot 裝載于主權 Azure 雲端中,請以適當的 URL 取代,並附加 /.bot/ 路徑以存取 Direct Line app service 延伸模組的 REST api。If you configure your own domain name, or your bot is hosted in a sovereign Azure cloud, substitute in the appropriate URL and append the /.bot/ path to access the Direct Line app service extension's REST APIs.

  1. 依照驗證一文中的指示交換權杖的秘密。Exchange the secret for a token by following the instructions in the Authentication article. 您不會在中取得權杖,而是 https://directline.botframework.com/v3/directline/tokens/generate 會直接從 Direct Line 的 App Service 延伸模組產生權杖 https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generateInstead of obtaining a token at https://directline.botframework.com/v3/directline/tokens/generate, you will generate the token directly from your Direct Line App Service Extension at https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

  2. 如需示範如何提取權杖的範例,請參閱 網路聊天範例For an example that shows how to fetch a token see Web Chat Samples.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      crossorigin="anonymous"
      src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.js"
    ></script>
    <style>
      html,
      body {
        background-color: #f7f7f7;
        height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        height: 100%;
        margin: auto;
        max-width: 480px;
        min-width: 360px;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script>
      (async function() {
        <!-- NOTE: It is highly recommended to replace the below fetch with a call to your own token service as described in step 2 above, and to avoid exposing your channel secret in client side code. -->
        const res = await fetch('https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate', { method: 'POST', headers:{'Authorization':'Bearer ' + '<Your Bot's Direct Line channel secret>'}});
        const { token } = await res.json();

        window.WebChat.renderWebChat(
          {
            directLine: await window.WebChat.createDirectLineAppServiceExtension({
              domain: 'https://<your_app_service>.azurewebsites.net/.bot/v3/directline',
              token
            })
          },
          document.getElementById('webchat')
        );

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>

提示

JavaScript bot 的執行中,請確定已在檔案 websockets 中啟用 web.config ,如下所示。In the JavaScript bot implementation, make sure that websockets are enabled in the web.config file, as shown below.

<configuration>
    <system.webServer>
        <webSocket enabled="true"/>
        ...
    </system.webServer>
</configuration>