聊天室 SDK 小班课 UI
概述
本项目是保利威小班课聊天室 UI 组件,基于 Vue.js 2.x 编写,开发人员可以直接使用本组件或基于本组件进行定制。 如果您使用的是 React、Angular 等其他框架,可以参照本组件源代码自行实现。
使用
安装
npm i @polyv/chat-sdk @polyv/chat-sdk-scene-small-class
前者为 SDK,后者为 UI 组件。
配置 SDK
请参考聊天室 SDK的「引入」和「初始化」说明。 在 SDK 初始化完毕后,再控制组件加载。
聊天室入口组件
聊天室入口组件包括消息列表、消息收发、查看大图及禁言控制等所有聊天室基本功能,同时提供了部分事件和组件方法,接入方仅需接入此组件并根据本文档指引进行快速集成。
引入
- PC 端
import Chat from '@polyv/polyv/chat-sdk-scene-small-class/lib/PcChat/index';
使用方式
<chat
ref="chat"
:chat="chatSDK"
:font-size="fontSize"
:user-info="userInfo"
:channel-info="channelInfo"
:lang="lang"
:component-render-list="componentRenderList()"
:is-input-disabled="isInputDisabled"
:input-place-holder="inputPlaceHolder"
:img-viewer-z-index="100"
@warning-msg="onWarningMsg"
@error-msg="onErrorMsg"
@new-msg="onNewMsg"
@change-chat-enabled-err="(e) => { console.log('调用出错', e) }"
/>
注 聊天室 chat 组件中不包含 header 部分(或者说弹窗、容器部分,还有字体控制按钮等部分),需要接入方编写弹窗及对应 header。
attributes
属性名 | 类型 | 含义 |
---|---|---|
chat | Object | 聊天室 SDK 实例,用于聊天室组件内部处理与服务端的 websocket 交互 |
fontSize | Number | 字号,可传 1(为12px)、2(14px)、3(16px) |
userInfo | Object | 用户信息,与聊天室 SDK 的 userInfo 配置项结构一致 |
channelInfo | Object | 频道信息,与聊天室 SDK 的 channelInfo 配置项结构一致 |
lang | String | 多语言配置,可传 zh_CN(中文)、en(英文) |
componentRenderList | Object | 自定义组件列表。用于替换相应类型消息的渲染组件。 |
isInputDisabled | Boolean | 控制发言输入框是否禁用状态 |
inputPlaceHolder | String | 控制发言输入框默认文字 |
imgViewerZIndex | Number | 控制查看大图元素 z-index 层级 |
getHistoryMethod | String | 通过什么方法获取消息历史记录,默认session,可选channel |
若 chat 实例发生变化,聊天室组件内部会重新监听和绑定相应事件。
自定义组件支持列表
组件名 | 描述 |
---|---|
normal-msg | 普通消息 |
system-msg | 系统消息 |
img-msg | 图片消息 |
events
事件名 | 参数 | 含义 |
---|---|---|
warning-msg | String | 警告提示信息,用于组件内部出现异常时给外部显示自定义提示 |
error-msg | String | 错误提示信息,用于组件内部出错时给外部显示自定义提示 |
new-msg | Object | 新消息事件,用于通知外部聊天室收到了新消息 |
change-chat-enabled-err | Error | 调用切换全体禁言接口出错 |
methods
组件方法
方法名 | 参数 | 说明 |
---|---|---|
scrollToBottom | void | 使消息列表滚动到底部 |
场次聊天消息列表组件
路径: scene/small-class/src/components/session-msg-list
用于根据传入的场次id sessionId,获取对应场次的聊天消息。与小班课场景功能一致,小班课每课节都会对应一个场次id,因此每个课节间的消息是相互独立的。
注意: 某房间在一个场次的直播结束后,进行过新的直播,若继续使用上一场次号进行发言,发言将不再被记录(按旧sessionId查询接口也不会返回后面的发言消息)