# @chatscope/use-chat 中文文档

规范地址：https://npmcn.com/package/%40chatscope/use-chat/

版本：3\.1\.2
npm 元数据更新时间：2023-09-27T05:48:07.135Z
中文译文更新时间：2026-11-09T11:26:56.183Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40chatscope/use-chat
原文对照：https://npmcn.com/package/%40chatscope/use-chat/?lang=original
项目主页：https://chatscope.io/
源码仓库：https://github.com/chatscope/use-chat

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：205 kB，159 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>= 17\.0 \<= 18\.2\.0
- 首次发布：2021-05-10T11:06:22.194Z
- 最新版本发布：2023-09-27T05:48:06.930Z
- 近 30 天下载量：71619（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：36（近 12 个月 0 个）

## 中文简介

聊天应用程序中的状态管理反应钩子

## 安装

```sh
npm install @chatscope/use-chat
```

也可以使用：`pnpm add @chatscope/use-chat`、`yarn add @chatscope/use-chat`、`bun add @chatscope/use-chat`

## README

# 使用聊天

[![Actions Status](https://github.com/chatscope/chat-ui-kit-react/workflows/build/badge.svg)](https://github.com/chatscope/use-chat/actions) [![npm version](https://img.shields.io/npm/v/@chatscope/use-chat.svg?style=flat)](https://npmjs.com/@chatscope/use-chat) [![](https://img.shields.io/npm/l/@chatscope/use-chat?dummy=unused)](https://github.com/chatscope/use-chat/blob/main/LICENSE) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

快点! 请不要使用 1. 5.0 版本 它有错误的属性名称!

聊天应用程序中状态管理的反应钩.

完整的文件尚未提供,但 **将准备**。 。 。 .

如果你对图书馆感兴趣 需要更多的文件, 请让我知道,在此增加一个积极反应(+1,心,火箭): [https://github.com/chatscope/use-chat/issues/1 (中文(简体) )](https://github.com/chatscope/use-chat/issues/1)

## 这是什么?

这是一个无头聊天室。 把它当成一个像Formik的东西 但聊天应用.

库可同时使用 [@chatscope/chat-ui-kit-反应](https://github.com/chatscope/chat-ui-kit-react) 以及其他聊天组件.

其目的是提供一个工具,处理聊天应用程序中最常执行的功能.  
主要是应用状态管理,以及一些优美的加词,如发出或接收打字指示器信号的去弹出或节奏.

## 为什么?

聊天应用程序的逻辑经常是重复的. 这些应用程序大多包含用户列表,会议列表和课程信息. 市场上至少有几家聊天API供应商. 它们提供saas服务,您可以用来构建聊天应用程序. 你也几乎总是从他们那里得到一个随时可以使用,简单的信息库. 这样一个库封装了一个复杂的通信协议.  
有时也会得到UI组件和钩子/提供者,将UI绑定在提供者的信息库上. 两者密切相关,这使得替换消息库或UI组件的工作很多.

在此情况下,您必须注意如何在您的应用程序中保存:联系人列表及其状态,每个联系人的信息列表,聊天间切换,设置活动聊天,传送消息等. .

如果你自己创建了备份并执行通信层,你也不会避免做所有这些事情.

关注应用程序的业务功能不更好吗? 在布局,颜色选择等方面,而不是在数组中想着如何找到一个消息来将其状态设置为"已读"?

这种事情往往比看起来复杂.

例如,消息列表并不总是一个平坦的数组. 它常常是被指定给用户和对话的信息的对象,此外,它将被归类为收发信息块.

在列表中添加信息需要大致采取以下步骤:

-   为给定的对话找到信件列表,
-   找到最后一组,
-   检查信件是否来自用户组,
-   如果不是,那么就创建一个小组,并添加信息
-   将组添加到列表中

额,有一点,对不对?

这种东西应该在单独的逻辑库中被关闭,可以简单而直观地使用. 实施一致的接口也提供了内部调试(如改变数据结构)而不改变库使用方式的可能性.

## 特征

-   处理用户状态( 具有用户的商业属性, 如名称、 外观、 存在等)
-   处理对话状态(包括当前对话)
-   许多对话处理分组信件状态
-   发送已解禁的打字指标
-   自动节奏收到打字指示器
-   处理当前信件输入值
-   处理信件草稿
-   更新已有信件
-   支持任何通信服务

## 安装

使用纱线.

```sh
yarn add @chatscope/use-chat
```

使用 npm. (中文(简体) ).

```sh
npm install @chatscope/use-chat
```

## 建筑

该图书馆由三部分组成:

-   存储 - 保存状态的地点
-   ChatProvider - 聊天上下文提供者
-   使用Chat - 绑定存储服务和用户界面的钩子

### 基本组合

这是一个执行IStorage接口的类. 所有数据,如对话,消息,当前对话指标等都坐落在存储中. BasicStorage是IStorage的基本执行. 它应充分发挥作用,并可用于大多数应用. 然而,有可能根据redux或另一个州立图书馆编写新的执行. 因此,储存从外部提供给查特普罗维德.

### 实例聊天服务

此类执行 IChatService 接口 . 该服务的目的是维持与聊天服务器的连接,发送并接收消息和聊天协议命令. 这是连接您的聊天服务器和库的点 . 要使用此库, 您需要自己编写执行 IChatService 接口的 ChatService . 服务的执行取决于您正在使用的聊天服务器 . 服务的内容可以是您从零开始写的代码, 但服务也可以是任何随时可以使用聊天通信库的封装层  
有一个 [实例/实例/实例](https://github.com/chatscope/use-chat/blob/main/src/examples/ExampleChatService.ts) 可供快速启动。 这是为您的应用程序开发真实服务的好起点.

今后,我将提供更多实例,说明与套接字的真正沟通。 基于io聊天服务器.

还将为一些SAAS供应商提供服务.

### 服务厂

这是一个简单的功能,你需要执行自己. 此函数收到一个聊天存储对象(IChatStorage)作为第一个参数,并更新函数作为第二个参数. 此函数必须返回执行 IChatService 的类实例 . 有时在您的 ChatService 执行中, 您需要从存储中获取值并保存到存储中 . 你可以把存储器交给你服务。 访问存储状态是通过存储.getstate()方法提供的. 写入存储通过调用存储.addConversation (), survey.addUser ()等功能实现. 第二个论点是 **更新状态** 函数. 每次写入从服务中执行的存储需要调用更新状态函数来进行再交付. 例如,当服务收到一些用户已连接的信号化时,您可以使用存储.addUser () 方法添加用户到存储中 和下一个调用更新状态 ().

这种描述可能看起来很复杂:). 但相信我,这真的很简单 比起你必须照顾一切.

## 基本用途

这是一个非常简单的例子,但它表明,使用 **使用聊天** 钩.

关于基于CRA的更复杂的例子,请访问 [https://github.com/查特镜/use-查特-例](https://github.com/chatscope/use-chat-example)。 。 。 . 这里有工作示例应用程序: [https://use-chat.examples.chatscope.io (英语)](https://use-chat.examples.chatscope.io/)

文件:索引.js

```jsx
import {nanoid} from "nanoid";
import {
  BasicStorage,
  ChatProvider,
  ExampleChatService,
  AutoDraft
} from "@chatscope/use-chat";

// Storage needs to generate id for messages and groups
const messageIdGenerator = () => nanoid();
const groupIdGenerator = () => nanoid();

// Create serviceFactory
const serviceFactory = (storage, updateState) => {
  return new ExampleChatService(storage, updateState);
};

const chatStorage = new BasicStorage({groupIdGenerator, messageIdGenerator});

export const App = () => {
  return (
    <ChatProvider serviceFactory={serviceFactory} storage={chatStorage} config={{
      typingThrottleTime: 250,
      typingDebounceTime: 900,
      debounceTyping: true,
      autoDraft: AutoDraft.Save | AutoDraft.Restore
    }}>
      <Chat />
    </ChatProvider>
  );
};
```

文件 Chat.js :

```jsx
import {useState, useMemo } from "react";
import { MainContainer, Sidebar, ConversationList, Conversation, Avatar, MessageGroup, Message,
  ChatContainer, ConversationHeader, MessageList, MessageInput} from "@chatscope/chat-ui-kit-react";
import { useChat, ChatMessage, MessageContentType, MessageDirection, MessageStatus } from "@chatscope/use-chat";

export const Chat = () => {

  // Message input value
  const [value, setValue] = useState("");

  // Get all chat related values and methods from useChat hook 
  const {
    currentMessages, conversations, activeConversation, setActiveConversation, sendMessage, getUser
  } = useChat();

  // Get current user data
  const [currentUserAvatar, currentUserName] = useMemo(() => {

    if (activeConversation) {
      const participant = activeConversation.participants.length > 0 ? activeConversation.participants[0] : undefined;

      if (participant) {
        const user = getUser(participant.id);
        if (user) {
          return [<Avatar src={user.avatar} />, user.username]
        }
      }
    }

    return [undefined, undefined];

  }, [activeConversation]);

  const handleSend = text => {

    // Logger user (sender)
    const currentUserId = "123";

    const message = new ChatMessage({
      id: "",
      content: text,
      contentType: MessageContentType.TextHtml,
      senderId: currentUserId,
      direction: MessageDirection.Outgoing,
      status: MessageStatus.Sent
    });

    sendMessage({
      message,
      conversationId: activeConversation.id,
      senderId: currentUserId,
    });

  };

  return (<MainContainer>
    <Sidebar position="left">
      <ConversationList>
        {conversations.map(c => {
          
          // Helper for getting the data of the first participant
          const [avatar, name] = (() => {

            const participant = c.participants.length > 0 ? c.participants[0] : undefined;
            if (participant) {
              const user = getUser(participant.id);
              if (user) {

                return [<Avatar src={user.avatar} />, user.username]

              }
            }

            return [undefined, undefined]
          })();

          return (<Conversation key={c.id}
                        name={name}
                        active={activeConversation?.id === c.id}
                        unreadCnt={c.unreadCounter}
                        onClick={e => setActiveConversation(c.id)}>
            {avatar}
          </Conversation>);
        })}
      </ConversationList>
    </Sidebar>
    
    <ChatContainer>
      
      <ConversationHeader>
        {currentUserAvatar}
        <ConversationHeader.Content userName={currentUserName} />
      </ConversationHeader>
      
      <MessageList>
        {currentMessages.map(g => <MessageGroup key={g.id} direction={g.direction}>
          <MessageGroup.Messages>
            {g.messages.map(m => <Message key={m.id} model={{
              type: "text",
              payload: m.content
            }} />)}
          </MessageGroup.Messages>
        </MessageGroup>)}
      </MessageList>
      
      <MessageInput value={value} onSend={handleSend} />
      
    </ChatContainer>
    
  </MainContainer>);
}
```

## 社区和支助

-   通过旋转 [@ 分镜](https://twitter.com/chatscope)
-   聊天时 [解析器](https://discord.gg/TkUYWQRf2M)
-   脸书在 [脸书](https://www.facebook.com/chatscope)
-   文章 [聊天镜博客](https://chatscope.io/blog/)

## 网站

[https://chatscope.io (英语)](https://chatscope.io/)

## 许可证

[麻省理工学院](https://github.com/chatscope/use-chat/blob/main/LICENSE)

## 常见问题

### @chatscope/use-chat 是什么？

聊天应用程序中的状态管理反应钩子

### 如何安装 @chatscope/use-chat？

在项目目录运行 npm install @chatscope/use-chat，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>= 17\.0 \<= 18\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @chatscope/use-chat 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @chatscope/use-chat 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @chatscope/use-chat 可以商用吗？

@chatscope/use-chat 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @chatscope/use-chat 的下载量有多少？

根据 npm 官方下载统计，@chatscope/use-chat 在 2026/10/10 – 2026/11/08 这 30 天内被下载 71,619 次，日均约 2,387 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chatscope/use-chat 还在维护吗？

最新版本 3\.1\.2 发布于 2023/09/27（3 年前）；至今共发布 36 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/05/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。