搭配使用 Web Chat 與 Direct Line App Service 擴充功能

適用于: SDK v4

本文說明如何使用網路聊天搭配 Direct Line app service 延伸模組。 原生 Direct Line app service 延伸模組支援需要網路聊天版本4.9.1 或更新版本。

整合 Web Chat 用戶端

注意

透過 Direct Line App Service 擴充功能傳送的調適型卡片,並不會像透過其他版本的 Direct Line 通道傳送的卡片一樣進行相同的處理。 因此,從 App Service Direct Line 擴充功能傳送至 Web Chat 的調適型卡片,如果 Bot 在建立卡片時省略這些欄位,這類卡片的 JSON 表示法將不會有通道新增的預設值。

此方法與之前大致相同。 除了在4.9.1 或更新版本的網路聊天中,有內建的支援可建立雙向 WebSocket,而不是 https://directline.botframework.com/ 直接連接到您的 bot 所裝載的 Direct Line app service 延伸模組。 您 bot 的 Direct Line URL 會是 https://<your_app_service>.azurewebsites.net/.bot/ app service 延伸模組上的 Direct Line 端點 。 如果您設定自己的功能變數名稱,或您的 bot 裝載于主權 Azure 雲端中,請以適當的 URL 取代,並附加 /.bot/ 路徑以存取 Direct Line app service 延伸模組的 REST api。

  1. 依照驗證一文中的指示交換權杖的秘密。 您不會在中取得權杖,而是 https://directline.botframework.com/v3/directline/tokens/generate 會直接從 Direct Line 的 App Service 延伸模組產生權杖 https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate

  2. 如需示範如何提取權杖的範例,請參閱 網路聊天範例

    <!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 的執行中,請確定已在 web.config 檔案中啟用 websocket,如下所示。

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