node.js - 如何检测 Webchat/DirectLine 中的对话结束？

Question

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

我找不到如何在 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() 调用之前发送一个事件。此事件将是一个事件，并将发送带有状态的数据，供您的页面获取。

在此示例中，我包含了用户数据，以便我可以看到谁退出了。我还使用 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。对于任何传入事件，您将创建一个名为“incomingActivity”的新事件，该事件将从机器人接收到的有效负载。

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

最后，正如您在代码中所做的那样，将 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`);
  }
})

网络聊天窗口:

机器人的控制台记录日志:

浏览器的开发者控制台:

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

希望得到帮助!