如何检测 Webchat/DirectLine 中的对话结束？

Question

我在 Node.js 中使用 botbuilder 创建了一个简单的聊天机器人。由于给定的环境，我通过自定义 iframe 包含了聊天机器人。前端是带有 DirectLine 的 WebChat。如何检测父级对话框的结束 window?

我在 WebChat/DirectLine 中找不到关于如何捕捉对话框结尾的正确方法。

我在 iframe 中使用以下代码呈现我的聊天：


const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
 if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
  dispatch({
   type: 'WEB_CHAT/SEND_EVENT',
   payload: {
    name: 'webchat/join',
    value: { language: window.navigator.language }
   }
 });
}
 return next(action);
});

 window.WebChat.renderWebChat({
   directLine: window.WebChat.createDirectLine({ token: "thisismytoken" }),
   store,
   userID: '1',
   username: username,
   styleOptions: {
    botAvatarImage: "https://mylink.azurewebsites.net/avatar_user_1.png",
    userAvatarImage: "https://mylink.azurewebsites.net/avatar_user_1.png"
   }
 }, document.getElementById('webchat'));

在Node.JS我用下面的代码结束对话：

            return await step.endDialog();

一旦 endDialog 为运行，我想提交 iFrame 的父级。谁能给我一些指导？

Answer 1

要实现这一点，只需对您的代码进行一些修改。

首先，在您的机器人中，在 step.endDialog() 调用之前发送一个 activity。此 activity 将是一个事件，并将发送具有状态的数据以供您的页面获取。

在这个例子中，我包括了用户数据，这样我就可以看到谁退出了。我还使用了 sendActivities() 方法，因此我可以在发送事件的同时感谢用户。当然，您可以只使用 sendActivity() 发送单个事件。

  async finalStep(step) {
    const user = stepContext.context.activity.from;
    const data = { user: user, dialogStatus: 'complete' };

    await stepContext.context.sendActivities([
      { text: 'Thank you for visiting my bot!', type: 'message' },
      { name: 'data', type: 'event', channelData: { 'data': data } }
    ]);
    return await stepContext.endDialog();
  }

接下来，在您的页面中，使用 createStore() 方法并检查 DIRECT_LINE/INCOMING_ACTIVITY 的 action.type。在任何传入的 activity 上，您将创建一个名为 'incomingActivity' 的新事件，它将从机器人接收到的负载。

您还将添加一个同名的 window.addEventListener，'incomingActivity'，它将捕获传入的数据并根据需要对其进行解析。

最后，正如您在代码中所做的那样，将 store 传递到 renderWebChat 组件中。

const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
  if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
    const event = new Event('incomingActivity');

    event.data = action.payload.activity;
    window.dispatchEvent(event);
  }

  return next( action );
} );

window.addEventListener('incomingActivity', ({ data }) => {
  const type = data.type;
  if (type === 'event' && data.channelData.data.dialogStatus) {
    const status = data.channelData.data.dialogStatus;
    const user = data.channelData.data.user;
    console.log(`User '${user.name}', with an id of '${user.id}', reached the end of the dialog`);
  }
})

网络聊天window:

Bot 的控制台脚本记录：

浏览器的开发者控制台：

我经常使用类似的东西，所以它应该适合你。

希望得到帮助！

如何检测 Webchat/DirectLine 中的对话结束？

How to detect end of dialog in Webchat/DirectLine?

node.js

web-chat

botframework

direct-line-botframework