Kit-Chatroom-Web

聊天室组件

下载依赖

$ npm install kit-chatroom-web react react-dom antd styled-components --save

使用

import { Chatroom } from 'kit-chatroom-web'

const App = () => {
  return (
    <Chatroom {...props}/>
  )
}

// props声明：
interface ChatroomProps {
  nim: any // 网易 IM sdk 实例
  appKey: string
  account: string
  nickName: string
  token: string
  chatroomId: string
  debug?: boolean // 打开调试日志，默认打开
  historyLimit?: number // 历史聊天消息数，默认100
  imPrivateConf?: any // 聊天室私有化配置
  tags?: string[] // 自身进入聊天室时的标签，用于分组和定向消息
  enableDirectionalTransmission?: boolean // 是否开启定向消息控制栏
  defaultDirectionalTags?: string[] // 固定发送权限组，跟tags字段配合使用，传入后无法再自行选择定向消息接受者
  title?: string | null
  theme?: { // 主题定制
    localTextBgColor?: string // 本端消息背景色
    remoteTextBgColor?: string // 远端消息背景色
    contentBgColor?: string // 聊天区域背景色
    toolsStyle?: React.CSSProperties // 工具栏style
    uploadImgIcon?: React.ReactChild // 上传图片icon
    uploadFileIcon?: React.ReactChild // 上传文件icon
    privateControlClass?: string // 定向消息控制栏class
  }
  prefixCls?: string // 设置统一样式前缀。注意：需要配合 antd 的 ConfigProvider.prefixCls 和 less 变量 @ant-prefix 使用
  onMsg?: (msgs: Message[]) => void // IM消息透传回调，方便用户做一些目前组件未处理的消息类型的处理
  onConnect?: () => void // 连接成功的回调
  onError?: (err: { code: number; msg: string }) => void // 错误事件
  isChangeTimePosition?: boolean //  本端消息昵称显示在时间戳前面还是后面，false表示时间戳在前昵称在后，默认false
}

其他方法

import { render, unmountComponentAtNode } from 'kit-chatroom-web'

// render 用于在非react框架中渲染
const view = document.getElementById('view')
render(view: HTMLElement, props: ChatroomProps)

// unmountComponentAtNode 用于卸载组件
unmountComponentAtNode(view)

除此之外，组件还提供了 commonjs 与 umd 的输出方式。

// commonjs
const { Chatroom, render } = require('kit-chatroom-web')

// umd
const { Chatroom, render } = window.NEChatroom

onError 错误码

const errors = {
  SEND_TEXT_FAIL: {
    code: 100,
    msg: '发送文本失败',
  },

  SEND_IMG_FAIL: {
    code: 101,
    msg: '发送图片失败',
  },

  SEND_FILE_FAIL: {
    code: 102,
    msg: '发送文件失败',
  },

  SEND_UNKNOW_FAIL: {
    code: 103,
    msg: '发送未知消息失败',
  },

  UPLOAD_IMG_FAIL: {
    code: 104,
    msg: '上传图片失败',
  },

  UPLOAD_FILE_FAIL: {
    code: 105,
    msg: '上传文件失败',
  },

  UPLOAD_UNKNOW_FAIL: {
    code: 106,
    msg: '上传未知消息失败',
  },

  GET_ADDRESS_FAIL: {
    code: 107,
    msg: '获取聊天室地址失败',
  },

  ROOM_DISCONNECT: {
    code: 108,
    msg: '聊天室连接断开',
  },

  ROOM_ERROR: {
    code: 109,
    msg: '聊天室发生错误',
  },

  ROOM_DESTROY_FAIL: {
    code: 110,
    msg: '聊天室销毁失败',
  },
}

定制主题

组件使用了 antd 来开发 UI，因为 antd 是外置依赖，所以可以直接在工程中通过设置 antd 的主题来设置组件的主题。 具体参考：antd 主题定制

FAQ

如果遇到样式丢失问题，需要手动导入 antd 的样式

import 'antd/dist/index.less'

组件预览