搭配 Direct Line App Service 擴充功能使用網路聊天

2025-06-21

從 2023 年 9 月 1 日起，強烈建議使用 Azure 服務標籤方法來進行網路隔離。 DL-ASE 的使用率應僅限於高度特定的案例。在生產環境中實作此解決方案之前，建議您諮詢您的支援小組以取得指引。

適用於： SDK v4

本文說明如何搭配 Direct Line App Service 擴充功能使用網路聊天。原生 Direct Line App Service 擴充功能支援需要 Web Chat 4.9.1 或更新版本。

整合網路聊天用戶端

備註

透過 Direct Line App Service 擴充功能傳送的調適型卡片不會進行與透過其他 Direct Line 通道版本傳送的調適型卡片相同的處理。因此，如果 Bot 在建立卡片時省略字段，則從 Direct Line App Service 擴充功能傳送至網路聊天的調適型卡片的 JSON 表示法不會有通道新增的預設值。

一般來說，這種方法與之前相同。除了 4.9.1 版或更新版本的網路聊天中，內建支援建立雙向 WebSocket。這可讓網路聊天直接連線到裝載於 Bot 的 Direct Line App Service 延伸模組，而不是連線到 https://directline.botframework.com/。您的 Bot 的 Direct Line URL 將是應用程式服務擴充中的 Direct Line https://<your_app_service>.azurewebsites.net/.bot/，URL 為。如果您設定自訂的網域名稱，或您的 Bot 裝載在主權 Azure 雲端中，請以適當的 URL 取代為，並附加 /.bot/ 路徑以存取 Direct Line App Service 延伸模組的 REST API。

依照驗證一文中的指示，將秘密兌換為令牌。您將不會在https://directline.botframework.com/v3/directline/tokens/generate取得令牌，而是直接在位於https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate的 Direct Line App Service 擴充功能中產生令牌。

如需示範如何擷取令牌的範例，請參閱網路聊天範例。

<!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.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: You should replace the below fetch with a call to your own token service as described in step 2 above, 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>"
            },
            "body": "{'user': {'id': 'my_test_id', 'name': 'my_test_name'}}"
          }
        );
        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>

共用方式為

搭配 Direct Line App Service 擴充功能使用網路聊天

整合網路聊天用戶端

其他資源