简介
react-optimus-chat 是一款基于 React 的开源聊天组件，它包括消息列表、消息输入框、表情选择器等功能模块，支持发送文本、图片、表情、文件等多种消息类型。
在前端开发中，我们经常需要在项目中添加聊天功能，而 react-optimus-chat 可以帮助我们快速实现这个功能，提高开发效率。
安装
可以通过 npm 进行安装：
$ npm install react-optimus-chat
使用教程
导入组件
import { Chat, ChatProvider } from 'react-optimus-chat';
import 'react-optimus-chat/dist/index.css';需要注意的是，react-optimus-chat 的 UI 样式需要通过 import 引入，否则会出现样式问题。
使用 ChatProvider
ChatProvider 是 react-optimus-chat 中的一个 HOC 组件，用于提供聊天所需的数据和方法。我们需要在项目中使用 ChatProvider 包裹 Chat 组件，例如：
<ChatProvider> <Chat /> </ChatProvider>
使用 Chat 组件
Chat 组件主要负责聊天界面的渲染和交互，包括消息列表、消息输入框、表情选择器等。在使用 Chat 组件之前，需要确认 ChatProvider 已被正确地引入和使用。
<Chat />
自定义 Chat 组件
如果我们需要在 Chat 组件的基础上进行二次开发，可以使用 react-optimus-chat 中提供的方法，例如：
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------
---
----- ---------- - ----------------------- -- -
------ -
----- -----------
--- -- -----
-------
--
---此时，可以使用 CustomChat 组件代替 Chat 组件。
API
ChatProvider
ChatProvider 是 react-optimus-chat 中的 HOC 组件，用于提供聊天所需的数据和方法。
Props
| 名称 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 渲染的子组件 |
| config | Object | 聊天组件相关配置 |
| onSend | Function | 消息发送的回调函数 |
| loadMore | Function | 滚动加载的回调函数 |
| messageList | Array | 消息列表 |
| refreshState | Object | 刷新状态 |
config
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| userId | String | '' | 当前用户的唯一标识，用于识别发送消息的用户 |
| userName | String | '' | 当前用户的昵称 |
| userAvatar | String | '' | 当前用户的头像地址 |
onSend
function onSend(msg: Object): void
当用户发送消息后，Chat 组件会调用 onSend 回调函数，将消息信息作为参数传递过来。
{
type: 'text' | 'image' | 'emoticon' | 'file', // 消息类型
content: String, // 文本消息内容
file: File, // 文件消息
imageUri: String, // 图片消息地址
emoticon: Object, // 表情消息
}loadMore
function loadMore(): void
当用户滚动到消息列表底部时，Chat 组件会调用 loadMore 回调函数，我们可以在这个函数中触发加载更多消息的操作。
messageList
通过 ChatProvider 向 Chat 组件提供的消息数据，一个数组类型，内部结构如下：
-- -------------------- ---- ------- - ---------- ------- -- ------ ------- ------- -- ------------ --------- ------- -- ---------- -------- ------- -- ------ ----- ------ - ------- - ---------- - ------- -- ---- --------- -------- -- ----------- ---------- ------- -- ------ ------- ------- -- ------------ -
refreshState
通过 ChatProvider 向 Chat 组件提供的刷新状态，一个对象类型，包括：
{
isRefresh: Boolean, // 是否正在加载更多消息
refreshError: Boolean, // 加载更多消息失败
}Chat
Chat 组件主要负责聊天界面的渲染和交互，包括消息列表、消息输入框、表情选择器等。
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| sendButtonDisabled | Boolean | false | 是否禁用发送消息按钮 |
| onSubmit | Function | - | 消息发送提交回调函数 |
| onMessageChange | Function | - | 用于监听消息输入框中的变化 |
| onImageUpload | Function | - | 图片上传回调函数 |
| onFileUpload | Function | - | 文件上传回调函数 |
| onEmoticonSelect | Function | - | 选择表情时的回调函数 |
| onAudioRecorderStop | Function | - | 音频录制结束回调函数，在 Chat 组件中需要通过 sourceType 字段判断 recorder |
| isRecording | Boolean | false | 是否正在录音 |
| onActionClick | Function | - | 点击工具栏按钮时的回调函数 |
| emoticonData | Array or Function(Object) | - | 表情列表数据，可为数组或异步函数 |
| imageUploadUrl | String | - | 图片上传地址 |
| fileUploadUrl | String | - | 文件上传地址 |
| showActionPanel | Boolean | true | 是否显示工具栏 |
| showEmoticonPanel | Boolean | true | 是否显示表情选择器 |
| /** | |||
| sourceType（Optional）、 | |||
| audioConfig（Optional）、 | |||
| recordBtn（Optional）、 | |||
| showRecordIcon（Optional）、 | |||
| triggerRecordMode（Optional）、 | |||
| minRecordTime（Optional）、 | |||
| */ | Object | - | 留空则不开启 |
具体的类型定义和含义如下：
sendButtonDisabled
消息发送按钮是否被禁用。
onSubmit
当用户点击发送消息按钮或键盘上的回车键时，Chat 组件会调用 onSubmit 回调函数，我们可以在这个函数中处理发送消息的逻辑。函数接收一个消息对象作为参数，包括如下信息：
{
type: 'text' | 'image' | 'emoticon' | 'file', // 消息类型
content: String, // 文本消息内容
file: File, // 文件消息
imageUri: String, // 图片消息地址
emoticon: Object, // 表情消息
}onMessageChange
传入 Input 输入框，用于监听消息输入框中的变化。
onImageUpload
当用户选择图片并点击发送按钮时，Chat 组件会调用 onImageUpload 回调函数，我们可以在这个函数中处理图片上传的逻辑。函数接收一个图片文件对象作为参数。
onFileUpload
当用户选择文件并点击发送按钮时，Chat 组件会调用 onFileUpload 回调函数，我们可以在这个函数中处理文件上传的逻辑。函数接收一个文件对象作为参数。
onEmoticonSelect
当用户选择表情并点击发送按钮时，Chat 组件会调用 onEmoticonSelect 回调函数，我们可以在这个函数中处理表情发送的逻辑。函数接收一个表情对象作为参数。
{
id: String, // 表情 id
image: String, // 表情图片地址
}onAudioRecorderStop
当音频文件录制结束后，Chat 组件会调用 onAudioRecorderStop 回调函数，我们可以在这个函数中处理音频文件的上传和发送。函数接收一个 ArrayBuffer 对象作为参数。
isRecording
说明此时是否正在录音。
onActionClick
当用户点击工具栏按钮时，Chat 组件会调用 onActionClick 回调函数，我们可以在这个函数中处理对应的操作。
emoticonData
用于展示表情列表，其值可以为一个表情对象列表或异步生成表情对象列表的 Promise 函数。
异步 Promise 函数大致如下：
async function fetchEmoticonData() {
const data = await // 发起异步请求，获取表情数据
return data // 返回表情数据
}如果使用异步 Promise 函数，Chat 组件会自动调用函数加载表情数据。如果数据请求失败，Chat 组件会进行默认的异常处理。
imageUploadUrl
用于上传图片的地址。
fileUploadUrl
用于上传文件的地址。
showActionPanel
是否显示工具栏。
showEmoticonPanel
是否显示表情选择器。
withChatContext
withChatContext 是 react-optimus-chat 提供的方法，用于在 Chat 组件基础上开发自定义组件。
withChatContext 会返回一个新的组件，这个新组件会将 ChatProvider 提供的数据和方法作为 props 注入到被包裹的组件中。
例如，我们可以使用 withChatContext 包裹一个自定义的消息列表组件，例如：
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------
----- ----------- - ----------------------- -- -
----- - ----------- - - ------
------ -
----
- --------------------- -- -
------ -
--- ----- ------------- --- ----------- ------
--
-- -
-----
--
---示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -
-----
-------------
----------------
- ---- ---------------------
------ ------------------------------------
----- ------- - -- -- -
----- - ----------- ------------- - - -------------
-- ---------
----- ----------- - ----------------------- -- -
----- - ------------ ------ - - ------
------ -
----
- --------------------- -- -
----- - -------- - - ----
------ -
---
----- ------------- -
--------
-------- -------
--------------- -------- - ---------- - -------------
--
-
----
--------
------ ---
------- ---
------------- ---
------------ ---
----------- ---
--
----- ---------- -- ----------------- -
--
------- ----------- --------
-----
--
-- -
-----
--
---
-- ----------
----- ----------- - ----------------------- -- -
----- - ---------------- ------------------- -------- - - ------
----- ----------------- - --- -- -
------------------------------
--------------------------------
--
----- ------------------ - -- -- -
----------
----- -------
-------- -----------
---
------------------
--
------ -
----
--------
-------- -------
----------- ---------
-------- ---
---------- ---- ----- ---------
--
-
------
--------
----- --
------------ ---
-------- --
------- ---- ----- ------
------------- --
--
-----------
------- ---------- -
---------- ----------------- -
--
-------
--------
-------- --
------------- --
---------------- ----------
------ -------
------- -------
--
---------- ------------------ -
--------- ------------------ -
-
--
---------
------
--
---
------ -
-------------
---------
------- -------
--------- -----
----------- ---
--
-
------------ --
------------ --
-----
------------------- ----- -
----------------- ----- -
--
---------------
--
--
------ ------- --------使用示例代码的间接目的是展示，react-optimus-chat 使用过程中的灵活性，也许其提供的 UI 引擎可能并不合适你的产品，但是其 API 注重可扩展性，对于想自由发挥，快速完成产品开发的同学，可能具备较好的参考和借鉴意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d781e8991b448e0332