您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

将 Web Chat 与 Direct Line 应用服务扩展配合使用Use Web Chat with the direct line app service extension

适用于: SDK v4APPLIES TO: SDK v4

本文介绍如何将 Web 聊天与直接线路应用服务扩展结合使用。This article describes how to use Web Chat with the Direct Line app service extension. 需要4.9.1 或更高版本的 Web 聊天版本来支持本机直接线路应用服务扩展。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 应用服务扩展发送的自适应卡片经历的处理不同于通过其他版本的 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. 因此,从 Direct Line 应用服务扩展发送到 Web Chat 的自适应卡片的 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 或更高版本的 Web 聊天 版本中,内置了对建立双向 WebSocket的支持,而不是连接到 https://directline.botframework.com/ 与机器人一起托管的直接线路应用服务扩展。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. 机器人的直接连线 URL 将是 https://<your_app_service>.azurewebsites.net/.bot/ 应用服务扩展上的直接连线 终结点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/ 路径以访问直接线路应用服务扩展的 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. 请按 Authentication(身份验证)一文中的说明操作,通过交换机密来获取令牌。Exchange the secret for a token by following the instructions in the Authentication article. 不是在中获取标记 https://directline.botframework.com/v3/directline/tokens/generate ,而是直接从直接线路应用服务扩展生成令牌 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. 有关演示如何获取令牌的示例,请参阅 Web 聊天示例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 机器人实现中,确保在 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>