Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@polyv/chat-sdk-ui-assistant) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

聊天室 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查询接口也不会返回后面的发言消息)