中的加载程序图标

Question

我正在使用网络聊天。很少有与用户相关的数据，我是通过store选项使用反向通道post活动来向用户发送的。

<ReactWebChat
  activityMiddleware={ activityMiddleware }
  directLine={ window.WebChat.createDirectLine( this.state.token ) }
  store = {this.handleGetStore()}
  styleOptions={styleOptions}
/>

handleGetStore返回存储数据：

handleGetStore(){
    const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            dispatch({
                type: 'WEB_CHAT/SEND_EVENT',
                payload: {
                    name: 'userDetail',
                    value: this.state.userDetail
                }
            });
        }
        return next(action);
    });
    return store;
}

当连接启动时，将出现加载程序。

​

​

在此之后，在欢迎消息出现之前有大约3-5秒的延迟，同时，网络聊天似乎已经为用户做好了准备。

​

​

稍微延迟3秒是可以接受的，但通常延迟最多10秒或更长。我知道，通过使用App的Always On特性和扩展计划，可以稍微改进这一点。有没有一种方法，我可以等待后通道欢迎消息出现并显示加载程序，直到那时？

参考资料：https://github.com/microsoft/BotFramework-WebChat/pull/1866

Answer 1

不幸的是，连接状态显示依赖于从DirectLineJs接收到的事件，而Web Chat目前不支持自定义其行为。尽管如此，还是有一种通过发送伪DirectLine事件来完成您想要完成的任务的方法。

以下是以下步骤：

• 创建一个标志，该标志将指示机器人是否发送了欢迎消息- received_welcome_message。
• 当welcome发送连接已完成的事件时，请检查标志以确保已收到欢迎消息。如果bot尚未发送欢迎消息，则将欢迎事件发送给bot，并将连接状态重置为满足。
• 当welcome接收到机器人的活动时，请检查它是否是欢迎消息。我建议在bot端的消息中添加一个name属性来检查- await context.sendActivity({ text: 'Welcome', name: 'welcome'})。如果该活动是一条欢迎消息，则分派一个连接完成事件并将标志设置为true。

要了解更多细节，请看下面的代码片段。

let received_welcome_message = false;
const store = createStore(
  {},
  ({ dispatch}) => next => action => {

    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {

      if (!received_welcome_message) {
        dispatch({
          type: 'DIRECT_LINE/CONNECT_FULFILLING'
        });
        dispatch({
          type: 'WEB_CHAT/SEND_EVENT',
          payload: { name: 'webchat/join' }
        });

        return
      }

    } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' && action.payload.activity.name === 'welcome') {
      received_welcome_message = true;
      dispatch({
        type: 'DIRECT_LINE/CONNECT_FULFILLED',
      });
    }
    return next(action);
  }
);

编辑

一种不那么麻烦的方法是，在完成与bot的连接时，发送一个post活动挂起事件，以模拟机器人发送欢迎消息。注意，机器人不知道模拟的活动。请参阅下面的代码片段。

const store = createStore(
  {},
  ({ dispatch}) => next => action => {
    console.log(action)
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
      dispatch({
        type: 'DIRECT_LINE/POST_ACTIVITY_PENDING',
        meta: { method: 'keyboard' },
        payload: {
          activity: {
            from: { role: "bot" },
            text: "Welcome Message",
            textFormat: "plain",
            timestamp: new Date().toString(),
            type: "message"
          }
        }
      })
    }
    return next(action);
  }

希望这能有所帮助！