【Bot Framework SDK】Web Chat概述 |

语言 Chinese, Simplified

SEO Title

开始网络聊天

注：

有关以前版本的Web Chat（v3），请访问Web Chat v3分支。

首先，使用Azure AI bot Service创建一个机器人。创建机器人后，您需要在Azure门户中获取机器人的网络聊天密码。然后使用该密钥生成一个令牌并将其传递给您的网络聊天。

以下示例显示了如何将Web聊天控件添加到网站。

HTML

<!DOCTYPE html>
<html>
  <body>
     <div id="webchat" role="main"></div>
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <script>
        // Set style options.
        const styleOptions = {
           botAvatarInitials: 'BF',
           userAvatarInitials: 'WC'
        };
        window.WebChat.renderWebChat(
           {
              directLine: window.WebChat.createDirectLine({
                 token: 'YOUR_DIRECT_LINE_TOKEN'
              }),
              userID: 'YOUR_USER_ID',
              username: 'Web Chat User',
              locale: 'en-US',
              styleOptions
           },
           document.getElementById('webchat')
        );
     </script>
  </body>
</html>

userID、用户名、区域设置、botAvatarInitials和userAvatarInitial都是传递给renderWebChat方法的可选参数。有关样式的更多信息，请参阅为什么使用styleOptions？。要了解有关Web Chat属性的更多信息，请参阅Web Chat API参考部分。

此外，如果您的机器人是区域机器人（意味着您的机器人资源位于“全局”以外的区域），您必须通过在窗口中的其他域字段中设置区域直线URL来指定区域直线URL。WebChat.createDirectLine（）方法。将域指定为europe.webchat.botframework.com、unitedstates.webchat.botframework.com或india.webchat.bot framework.com，以适合您所选地区的为准。阅读《响应欧洲的号召：在欧盟存储和处理欧盟数据》，了解有关数据驻留的信息。

与JavaScript集成

网络聊天旨在使用JavaScript或React与您现有的网站集成。与JavaScript集成将为您提供一些样式和可定制性，有关更多信息，请参阅将网络聊天集成到您的网站中。

您可以使用包含最常用功能的完整、典型的botframework webchat包。

HTML

<!DOCTYPE html>
<html>
  <body>
     <div id="webchat" role="main"></div>
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <script>
        window.WebChat.renderWebChat(
           {
              directLine: window.WebChat.createDirectLine({
                 token: 'YOUR_DIRECT_LINE_TOKEN'
              }),
              userID: 'YOUR_USER_ID'
           },
           document.getElementById('webchat')
        );
     </script>
  </body>
</html>

查看完整网络聊天包的工作示例。

与React集成

为了实现完全的可定制性，您可以使用React重新组合Web Chat的组件。

要从npm安装生产版本，请运行npm install botframework webchat。

jsx

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';
export default class extends React.Component {
 constructor(props) {
   super(props);
   this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
 }
 render() {
   return (
     <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
     element
   );
 }
}

你也可以运行npm installbotframework-webchat@master安装与WebChat的GitHub主分支同步的开发版本。

查看通过React渲染的Web Chat的工作示例。

小贴士

如果你是React和jsx的新手，你可以在Reacts入门页面上找到培训。

自定义网络聊天UI

网络聊天的设计是可定制的，无需分叉源代码。下表概述了以不同方式导入网络聊天时可以实现的自定义类型。这份清单并不详尽。

Customization	CDN bundle	React
Change colors	✔️	✔️
Change sizes	✔️	✔️
Update/replace CSS styles	✔️	✔️
Listen to events	✔️	✔️
Interact with hosting webpage	✔️	✔️
Custom render activities		✔️
Custom render attachments		✔️
Add new UI components		✔️
Recompose the whole UI		✔️

查看有关自定义网络聊天的更多信息，以了解有关自定义的更多信息。

注：

有关内容交付网络（CDN）的信息，请参阅内容交付网络

从网络聊天v3迁移到v4

从v3迁移到v4时，迁移可能采取三种路径。将您的初始场景与下面列出的场景进行比较。

要升级嵌入在<iframe>中的Web Chat控件，请参阅Web Chat仓库中关于嵌入包的文档。
要升级几乎不使用自定义的Web Chat控件，请查看Web Chat 00.migration/a.v3-To-v4示例，其中描述了该过程。
要升级高度定制的网络聊天的分叉版本，请参阅网络聊天迁移指南。

网络聊天API参考

您可以将几个属性传递到Web聊天React组件（<ReactWebChat>）或renderWebChat（）方法中。有关可用属性的简短说明，请参阅Web Chat API参考。此外，您可以从packages/component/src/Comporar.js开始检查源代码。

浏览器兼容性

网络聊天支持Chrome、Edge和FireFox等最新两个版本的现代浏览器。如果您需要在Internet Explorer 11中进行网络聊天，请参阅ES5捆绑包和演示。

网络聊天不支持早于版本11的Internet Explorer
Internet Explorer不支持非ES5示例中显示的自定义。由于IE11是一个非现代浏览器，它不支持ES6，许多使用箭头函数和现代promise的示例需要手动转换为ES5。如果您需要对应用程序进行大量定制，我们强烈建议您为Google Chrome或Edge等现代浏览器开发应用程序。
网络聊天没有计划支持IE11（ES5）的示例。
对于希望手动重写我们的其他示例以在IE11中工作的客户，我们建议考虑使用polyfill和像babel这样的转译器将代码从ES6+转换为ES5。

如何使用网络聊天的最新功能进行测试

目前只能通过MyGet打包测试未发布的功能。

如果你想测试一个尚未发布的功能或bug修复，你需要将你的网络聊天包指向网络聊天的每日提要，而不是官方的npmjs提要。

目前，您可以通过订阅我们的MyGet订阅源来访问网络聊天的日报。为此，您需要更新项目中的注册表。这一变化是可逆的，我们的方向包括如何恢复订阅官方版本。

订阅myget.org上的最新动态

为此，您可以添加包，然后更改项目的注册表。

添加除网络聊天之外的项目依赖项。
在项目的根目录中，创建一个.npmrc文件
将以下行添加到文件中：注册表=https://botbuilder.myget.org/F/botframework-webchat/npm/
将网络聊天添加到您的项目依赖项npm i botframework webchat--save
在package-lock.json中，指向的注册表现在是MyGet。WebChat项目启用了上游源代理，这将把非MyGet包重定向到npmjs.com。
在npmjs.com上重新订阅官方发布

重新订阅需要您重置注册表。

删除您的.npmrc文件
删除你的根包-lock.json
删除node_modules目录
用npm i重新安装你的包
在package-lock.json中，注册表指向https://npmjs.com/再一次。
贡献
请参阅我们的贡献页面，了解如何构建项目的详细信息以及我们的Pull Requests存储库指南。

该项目采用了微软开源行为准则。有关更多信息，请参阅行为准则常见问题解答或联系opencode@microsoft.com如有任何其他问题或意见。

报告安全问题
安全问题和错误应通过电子邮件私下报告给微软安全响应中心（MSRC）secure@microsoft.com.您应该在24小时内收到回复。如果由于某种原因您没有收到，请通过电子邮件跟进，以确保我们收到您的原始信息。更多信息，包括MSRC PGP密钥，可以在安全技术中心找到。

本文地址

https://architect.pub