@polyv/chat-sdk-ui-assistant

0.1.0-rc.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @polyv/chat-sdk-ui-assistant

Homepage

polyv.net/

Weekly Downloads

0

Version

0.1.0-rc.1

License

none

Unpacked Size

5.24 MB

Total Files

14

Last publish

Collaborators

  • easefun-ci
  • easefun
  • heeroluo