时间戳

首页 > 解决方案 > 在 React Client 中使用反向通道 - Bot 框架

reactjs - 在 React Client 中使用反向通道 - Bot 框架

问题描述

我正在使用 NodeJS 构建基于 MS 机器人框架的机器人。我想用 TypeScript + React 构建客户端，但是，我希望能够在用户登录后发送消息。通过在线搜索，我想我可以使用反向通道来做到这一点，如本页所述。

但是，我想在 React 应用程序中使用它，如此处所述

我可以让 React 应用程序在我的应用程序中工作，但是我还需要集成反向通道。

我不明白为什么在每个样本中我们都使用不同的东西。例如，在 React 应用程序中，我们使用BotChat.Chat.. 但在反向通道中，我们使用BotChat.App.. 这两者有什么区别？

另外，我将在我的 React 应用程序中使用反向通道，我需要声明 BotChannel 并将其传递给BotChat.App，这将如何在我们使用的 React 中工作BotChat.Chat？

任何关于这些差异以及如何使用 React 实现反向通道的示例或清晰文档将不胜感激。

谢谢。

标签： reactjsbotframework

解决方案

为了稍后引用聊天，您初始化您的聊天 div，如下所示：

<div>
   <Chat ref={(chat) => {this._chat = chat;}} directLine={{ secret: "<secret>" }} user={{ id: 'user_id', name: 'user_name' }} />
</div>

这里的重要部分是您包含 ref 的定义，如下所示：

ref={(chat) => {this._chat = chat;}}

初始化后，您可以稍后通过以下方式访问 botConnectionthis._chat.botConnection并进行.postActivity()如下调用：

this._chat.botConnection
    .postActivity({ type: "message", value: "hi", from: { id: "me" } })
    .subscribe(id => console.log("success"));

关于App和Chat的区别，简单来说就是App是全模态的，而Chat被细分了一些，便于定制。应用程序扩展聊天。

推荐阅读