-3

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

谁能帮我创建这个？现在，我不知道如何创建这个窗口/框/iframe。

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

4

1 回答 1

1

显示从聊天中收集的信息的最简单方法是从机器人发送回带有数据的通道事件，然后使用 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 构建此网页。已经有一个示例 -自定义可选活动- 将页面分成两列，其中一列是 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();

希望这可以帮助。

于 2019-04-10T20:28:36.410 回答