聊天室 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 |
| isHideCtrl | Boolean | 是否隐藏全体禁言按钮 |
若 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查询接口也不会返回后面的发言消息)