如何在一个网页中创建显示由Web-Chat收集的数据的侧窗口或iframe？

Posted 2021-03-26

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

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

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

答案

显示从聊天中收集的信息的最简单方法是使用数据从机器人发回信道事件，然后使用WebChat中的自定义活动中间件拦截消息。然后，您可以根据需要处理网页上的数据。

Bot - NodeJs SDK v4

在机器人中，我们将使用我们在聊天中收集的数据将通道事件发送回WebChat。基本上，您只需要发送一个活动，其type属性设置为'event'，name属性设置为某个字符串值 - 在这种情况下我们将使用数据。会话数据将封装在活动的频道数据中。

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 - 将页面分成两列，其中一列中有WebChat，另一列中有活动检查器。您可以通过在此示例中将自定义中间件添加到WebChat并将检查器视图更改为数据表，轻松修改此示例以满足您的要求。

请求WebChat令牌

注意，为了简化入门，您可以从客户端获取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();

希望这可以帮助。