React-fbmessenger 是一个使用 React.js 和 Facebook Messenger API 开发的 npm 包，用于快速开发 Facebook Messenger Chatbot。它提供了一系列组件，使得开发者可以快速构建一个 Messenger Chatbot，并对聊天机器人进行定制化设置。
安装
你可以通过 npm 安装 react-fbmessenger：
npm install react-fbmessenger --save
使用
在使用 react-fbmessenger 之前，你需要确保已经拥有一个 Facebook Messenger Chatbot，且已经向 Facebook 手机验证了这个 Chatbot。如果你还没有 Chatbot，可以参考 Facebook 官方文档进行创建。
安装好 react-fbmessenger 包之后，你可以在你的 React.js 项目中导入它：
import { MessengerChat, QuickReplyMessage } from 'react-fbmessenger';在你的 JSX 中，你可以使用 MessengerChat 组件创建一个 Messenger Chatbot：
-- -------------------- ---- ------- -------------- --------------------- ------------------- ---------------- ---------------------------------------------- ------------------------------------ -------------------------------- - -- -- ------- ---- ----------------
其中：
pageId是你的 Facebook 页面 ID；appId是你的 Facebook App ID；language是 Chatbot 所在区域语言；onReceivedMessage是接收信息的回调函数；onQuickReply是对快速回复进行处理的回调函数；onPostback是处理用户点击操作按钮的回调函数。
接着你需要创建一个聊天机器人信息列表，当用户发送信息时 Chatbot 将在该列表中添加回复信息。例如：
-- -------------------- ---- -------
--------------
---------------------
-------------------
----------------
----------------------------------------------
------------------------------------
--------------------------------
-
------------------
---------------------------
-------------------- -- --- -------- ---- --- - ---- --- ---- -------
---------------
- ------------- ------- ------ ------ ----- -- -------- ------------- --
- ------------- ------- ------ ------ ---- -------- ---------- --
--
--
----------------这里我们使用 QuickReplyMessage 组件来创建一个欢迎信息和两个快速回复按钮。当用户按下一个按钮时，将触发 onQuickReply 函数，Chatbot 会将用户选择的按钮信息作为回复信息发送给用户。
handleQuickReply(payload, text) {
console.log(`Quick reply selected: ${payload}`);
}最后我们需要编写回复信息的处理逻辑，并将它们添加到信息列表中：
-- -------------------- ---- -------
------------------------------ -
--- ---------
-- ------------- --- -------------- -
-------- - -
-------------- ------------
-------- -
----- ---- ----- --- ---- ---- --------
-------------- -
- ------------- ------- ------ ----- ------- -------- ------------ --
- ------------- ------- ------ ------ ------- -------- ------------- --
- ------------- ------- ------ ------ -------- -------- -------------- --
--
--
--
- ---- -- ---------------------------- -
-------- - -
-------------- ------------
-------- -
----- ----- --------- - ---- ----- --- --- ---- -- --- ------
--
--
- ---- -
-------- - -
-------------- ------------
-------- -
----- ---- ------ - --- --- ----------- -----------------
--
--
-
----------------------- -- --
--------- ----------------------- ----------
----
-在这个例子中，我们根据用户发送的信息内容，判断 Chatbot 应该返回什么类型的回复信息，然后将这些信息添加到信息列表中。
总结
在这篇文章中，我们了解了 react-fbmessenger 这个 npm 包的使用方法。我们创建了一个 Messenger Chatbot 示例，并对 Chatbot 的消息分类进行了编写处理逻辑。如果你想快速构建一个 Facebook Messenger Chatbot，那么 react-fbmessenger 可能是你需要的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115093