你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

将 Web 聊天与 Direct Line 应用服务扩展配合使用

项目
12/26/2023

2023 年 9 月 1 日起，强烈建议使用 Azure 服务标记方法进行网络隔离。 DL-ASE 的使用应仅限于高度特定的应用场景。在生产环境中实施此解决方案之前，我们建议咨询支持团队，以获取他们的指导。

适用于：SDK v4

本文介绍如何将 Web 聊天与 Direct Line 应用服务扩展配合使用。需要 4.9.1 或更高版本的 Web 聊天以获得本机 Direct Line 应用服务扩展支持。

集成 Web Chat 客户端

注意

通过 Direct Line 应用服务扩展发送的自适应卡片经历的处理不同于通过其他版本的 Direct Line 通道发送的自适应卡片。因此，从 Direct Line 应用服务扩展发送到 Web 聊天的自适应卡片的 JSON 表示形式不会包含通道添加的默认值（如果在创建卡片时，机器人省略了这些字段）。

一般说来，方法与以前一样。但 4.9.1 或更高版本的 Web 聊天内置了对建立双向 WebSocket 的支持。使 Web 聊天能够直接连接到通过机器人托管的 Direct Line 应用服务扩展，而不是连接到https://directline.botframework.com/。机器人的 Direct Line URL 将为 https://<your_app_service>.azurewebsites.net/.bot/，它是应用服务扩展上的 Direct Line 终结点。如果配置自己的域名，或者机器人托管在主权 Azure 云中，请替换相应的 URL，并追加 /.bot/ 路径（用于访问 Direct Line 应用服务扩展的 REST API）。

请按 Authentication（身份验证）一文中的说明操作，通过交换机密来获取令牌。需要在 https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate 中直接从 Direct Line 应用服务扩展生成令牌，而不是在 https://directline.botframework.com/v3/directline/tokens/generate 中获取令牌。

有关演示如何提取令牌的示例，请参阅 Web 聊天示例。

<!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 机器人实现中，请确保在 web.config 文件中启用 WebSocket，如下所示。

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

将 Web 聊天与 Direct Line 应用服务扩展配合使用

集成 Web Chat 客户端

其他资源