如何创建 side window 或 iframe 以在一个网页中显示网络聊天收集的数据？

Question

我正在通过 Microsoft 机器人框架构建聊天机器人，最近将其部署为网页上的网络聊天。在我的网页中，我必须有一个侧框，其中显示从机器人收集和计算的数据。

任何人都可以帮我创建这个吗？现在，我不知道如何创建这个 window/box/iframe。

我的聊天机器人与用户协商。我想在一种信息框中显示用户数据，例如可用于谈判的项目。它应该能够在聊天期间发生事件后刷新它。到目前为止，我在网页的 html 代码中实现了网络聊天，正如 Microsoft 文档对网络聊天的描述。

Answer 1

显示从聊天中收集的信息的最简单方法是从机器人发回通道事件和数据，然后使用 WebChat 中的自定义 activity 中间件拦截消息。然后你就可以随心所欲地处理网页上的数据了。

机器人 - NodeJs SDK v4

在 bot 中，我们将使用我们在聊天中收集的数据将通道事件发送回 WebChat。基本上，您只需要发送一个 activity 类型属性设置为 'event' 并且 name 属性设置为某个字符串值 - 我们将在这种情况下使用数据。对话数据将被封装在 activity 的频道数据中。

await step.context.sendActivity({name: 'data', type: 'event', channelData: data});

WebChat - 自定义中间件

在 WebChat 中，我们将实施一个自定义中间件，该中间件将检查传入活动中我们之前指定的类型和名称值。当我们遇到后台通道事件时，我们可以处理传入的数据并更新网页。

const store = createStore(
  {},
  ({ dispatch }) => next => action => {
    if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
      let { channelData, name, type } = action.payload.activity;
      channelData || (channelData = {});

      if(type === 'event' && name === 'data') {
        this.props.handleData(channelData);
      }
    }
    return next(action);
  });

截图

由于 WebChat 是使用 React 构建的，因此我强烈建议您也使用 React 构建此网页。已经有一个示例 - customization-selectable-activity - 将页面分成两列，一列是网络聊天，另一列是 activity 检查器。您可以轻松修改此示例以满足您的要求，方法是将自定义中间件添加到此示例中的 WebChat 并将检查器视图更改为数据 table.

请求网络聊天令牌

注意，为了入门简单，您可以从客户端获取DirectLine令牌；但是，建议您创建一个后端 REST API 来生成和管理您的令牌。

const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', 
{ 
  method: 'POST',
  headers: {
    'Authorization': `Bearer <SECRET>`,
    'Content-Type': 'application/json'
  },
});

const { token } = await res.json();

希望对您有所帮助。

如何创建 side window 或 iframe 以在一个网页中显示网络聊天收集的数据？

How to create a side window or iframe that shows data that was gathered by a Web-Chat in one web page?

html

node.js

botframework

web-chat