# @xkit-yx/kit-chatroom-web

> 聊天室组件

Latest version **1.8.3** (published 2024-06-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xkit-yx/kit-chatroom-web
pnpm add @xkit-yx/kit-chatroom-web
yarn add @xkit-yx/kit-chatroom-web
bun add @xkit-yx/kit-chatroom-web
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.8.3 |
| Published | 2024-06-14 |
| First published | 2022-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | netease-yunxin |

## Links

- npm: https://www.npmjs.com/package/@xkit-yx/kit-chatroom-web
- Repository: https://g.hz.netease.com:22222/yunxin-app/kit-chatroom-web
- npm.io page: https://npm.io/package/@xkit-yx/kit-chatroom-web

## Dependencies (8)

- [antd](https://npm.io/package/antd.md) ^5.15.3
- [eventemitter3](https://npm.io/package/eventemitter3.md) ^4.0.7
- [yunxin-log-debug](https://npm.io/package/yunxin-log-debug.md) ^1.1.6
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^5.0.1
- [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.22.5
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.0
- [react-string-replace](https://npm.io/package/react-string-replace.md) ^1.1.1
- [react-simple-pull-to-refresh](https://npm.io/package/react-simple-pull-to-refresh.md) ^1.3.3

## Recent versions

- 1.8.3 (latest) — 2024-06-14
- 1.8.2 — 2024-05-10
- 1.8.1 — 2024-02-02
- 1.8.0 — 2023-07-11
- 1.7.1 — 2023-04-10
- 1.7.0 — 2023-03-21
- 1.6.0 — 2023-03-02
- 1.5.0 — 2022-12-08
- 1.4.2 — 2022-11-15
- 1.4.1 — 2022-09-27

## README

# Kit-Chatroom-Web

聊天室组件

## 下载依赖

```bash
$ npm install kit-chatroom-web react react-dom --save
```

## 使用

```js
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 // 是否开启定向消息控制栏
  enableFileMessage?: boolean // 是否开启文件发送，默认开启
  enableImageMessage?: 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
  }
  customClassName?: 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
}
```

其他方法

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

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

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

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

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

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

## onError 错误码

```js
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 主题定制](https://ant.design/docs/react/customize-theme-cn)

## FAQ

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

```js
import 'antd/dist/index.less'
```

## 组件预览

![preview](assets/preview.jpg)

---
_Source: https://npm.io/package/@xkit-yx/kit-chatroom-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._