stream chat js

用于流聊天的官方 JavaScript SDK

Stream Chat 的官方 JavaScript API 客户端，这是一种用于构建聊天应用程序的服务。
探索文档 »

报告错误·请求功能

关于流

您可以在我们的“开始”页面注册 Stream 帐户。

该库可供前端和后端应用程序使用。对于前端，我们有基于该库的框架，例如 Flutter、React 和 Angular SDK。有关更多信息，请查看我们的文档。

安装

国家公共管理

npm install stream-chat

纱

yarn add stream-chat

JS 交付

 < script src =" https://cdn.jsdelivr.net/npm/stream-chat " > </ script > 

入门

StreamChat 客户端设置为允许在实例化时通过使用泛型来扩展基本类型。默认实例化将所有泛型设置为Record<string, unknown> 。

 import { StreamChat } from 'stream-chat' ;
// Or if you are on commonjs
const StreamChat = require ( 'stream-chat' ) . StreamChat ;

const client = StreamChat . getInstance ( 'YOUR_API_KEY' , 'API_KEY_SECRET' ) ;

const channel = client . channel ( 'messaging' , 'TestChannel' ) ;
await channel . create ( ) ;

或者您可以自定义泛型：

 type ChatChannel = { image : string ; category ?: string } ;
type ChatUser1 = { nickname : string ; age : number ; admin ?: boolean } ;
type ChatUser2 = { nickname : string ; avatar ?: string } ;
type UserMessage = { country ?: string } ;
type AdminMessage = { priorityLevel : number } ;
type ChatAttachment = { originalURL ?: string } ;
type CustomReaction = { size ?: number } ;
type ChatEvent = { quitChannel ?: boolean } ;
type CustomCommands = 'giphy' ;

type StreamType = {
  attachmentType : ChatAttachment ;
  channelType : ChatChannel ;
  commandType : CustomCommands ;
  eventType : ChatEvent ;
  messageType : UserMessage | AdminMessage ;
  reactionType : CustomReaction ;
  userType : ChatUser1 | ChatUser2 ;
} ;

const client = StreamChat . getInstance < StreamType > ( 'YOUR_API_KEY' , 'API_KEY_SECRET' ) ;

// Create channel
const channel = client . channel ( 'messaging' , 'TestChannel' ) ;
await channel . create ( ) ;

// Create user
await client . upsertUser ( {
  id : 'vishal-1' ,
  name : 'Vishal' ,
} ) ;

// Send message
const { message } = await channel . sendMessage ( { text : `Test message` } ) ;

// Send reaction
await channel . sendReaction ( message . id , { type : 'love' , user : { id : 'vishal-1' } } ) ;

初始化客户端时提供的自定义类型将延续到所有客户端返回，并为查询提供智能感知。

？ （可选）结合我们的 SDK 进行开发设置

连接到流聊天 React Native SDK

在此存储库的根目录中运行

yarn link

在stream-chat-react-native存储库中的示例应用程序之一（SampleApp/TypeScriptMessaging）的根目录中运行

yarn link stream-chat
yarn start

打开metro.config.js文件并将 watchFolders 的值设置为

 const streamChatRoot = '{{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}}/stream-chat-js'

module . exports = {
  // the rest of the metro config goes here
  ...
  watchFolders : [ projectRoot ] . concat ( alternateRoots ) . concat ( [ streamChatRoot ] ) ,
  resolver : {
    // the other resolver configurations go here
    ...
    extraNodeModules : {
      // the other extra node modules go here
      ...
      'stream-chat' : streamChatRoot
    }
  }
} ;

确保根据您的目录结构将{{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}}替换为stream-chat-js文件夹的正确路径。

在此存储库的根目录中运行

yarn start

更多代码示例

请访问 docs/typescript.md 了解更多示例。

✍️贡献

我们欢迎改进此库或解决问题的代码更改，请确保遵循所有最佳实践并添加测试（如果适用），然后再在 Github 上提交 Pull 请求。我们很高兴将您的代码合并到官方存储库中。请务必先签署我们的贡献者许可协议 (CLA)。有关更多详细信息，请参阅我们的许可证文件。

前往 CONTRIBUTING.md 了解一些开发技巧。

？‍ 我们正在招聘！

我们最近完成了 3800 万美元的 B 轮融资，并且我们一直在积极发展。我们的 API 被超过 10 亿最终用户使用，您将有机会在全球最强大的工程师团队中对产品产生巨大影响。

查看我们当前的空缺职位并通过 Stream 网站进行申请。