简介
react-optimus-chat 是一款基于 React 的开源聊天组件,它包括消息列表、消息输入框、表情选择器等功能模块,支持发送文本、图片、表情、文件等多种消息类型。
在前端开发中,我们经常需要在项目中添加聊天功能,而 react-optimus-chat 可以帮助我们快速实现这个功能,提高开发效率。
安装
可以通过 npm 进行安装:
- --- ------- ------------------
使用教程
导入组件
------ - ----- ------------ - ---- --------------------- ------ ------------------------------------
需要注意的是,react-optimus-chat 的 UI 样式需要通过 import 引入,否则会出现样式问题。
使用 ChatProvider
ChatProvider 是 react-optimus-chat 中的一个 HOC 组件,用于提供聊天所需的数据和方法。我们需要在项目中使用 ChatProvider 包裹 Chat 组件,例如:
-------------- ----- -- ---------------
使用 Chat 组件
Chat 组件主要负责聊天界面的渲染和交互,包括消息列表、消息输入框、表情选择器等。在使用 Chat 组件之前,需要确认 ChatProvider 已被正确地引入和使用。
----- --
自定义 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
-------- ----------- -------- ----
当用户发送消息后,Chat 组件会调用 onSend 回调函数,将消息信息作为参数传递过来。
- ----- ------ - ------- - ---------- - ------- -- ---- -------- ------- -- ------ ----- ----- -- ---- --------- ------- -- ------ --------- ------- -- ---- -
loadMore
-------- ----------- ----
当用户滚动到消息列表底部时,Chat 组件会调用 loadMore 回调函数,我们可以在这个函数中触发加载更多消息的操作。
messageList
通过 ChatProvider 向 Chat 组件提供的消息数据,一个数组类型,内部结构如下:
- ---------- ------- -- ------ ------- ------- -- ------------ --------- ------- -- ---------- -------- ------- -- ------ ----- ------ - ------- - ---------- - ------- -- ---- --------- -------- -- ----------- ---------- ------- -- ------ ------- ------- -- ------------ -
refreshState
通过 ChatProvider 向 Chat 组件提供的刷新状态,一个对象类型,包括:
- ---------- -------- -- ---------- ------------- -------- -- -------- -
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 回调函数,我们可以在这个函数中处理发送消息的逻辑。函数接收一个消息对象作为参数,包括如下信息:
- ----- ------ - ------- - ---------- - ------- -- ---- -------- ------- -- ------ ----- ----- -- ---- --------- ------- -- ------ --------- ------- -- ---- -
onMessageChange
传入 Input 输入框,用于监听消息输入框中的变化。
onImageUpload
当用户选择图片并点击发送按钮时,Chat 组件会调用 onImageUpload 回调函数,我们可以在这个函数中处理图片上传的逻辑。函数接收一个图片文件对象作为参数。
onFileUpload
当用户选择文件并点击发送按钮时,Chat 组件会调用 onFileUpload 回调函数,我们可以在这个函数中处理文件上传的逻辑。函数接收一个文件对象作为参数。
onEmoticonSelect
当用户选择表情并点击发送按钮时,Chat 组件会调用 onEmoticonSelect 回调函数,我们可以在这个函数中处理表情发送的逻辑。函数接收一个表情对象作为参数。
- --- ------- -- -- -- ------ ------- -- ------ -
onAudioRecorderStop
当音频文件录制结束后,Chat 组件会调用 onAudioRecorderStop 回调函数,我们可以在这个函数中处理音频文件的上传和发送。函数接收一个 ArrayBuffer 对象作为参数。
isRecording
说明此时是否正在录音。
onActionClick
当用户点击工具栏按钮时,Chat 组件会调用 onActionClick 回调函数,我们可以在这个函数中处理对应的操作。
emoticonData
用于展示表情列表,其值可以为一个表情对象列表或异步生成表情对象列表的 Promise 函数。
异步 Promise 函数大致如下:
----- -------- ------------------- - ----- ---- - ----- -- ------------- ------ ---- -- ------ -
如果使用异步 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