stream chat js

스트림 채팅용 공식 JavaScript SDK

채팅 애플리케이션 구축을 위한 서비스인 Stream Chat용 공식 JavaScript API 클라이언트입니다.
문서 살펴보기 »

버그 신고 · 기능 요청

스트림 소개

시작하기 페이지에서 Stream 계정에 가입할 수 있습니다.

이 라이브러리는 프런트엔드 및 백엔드 애플리케이션 모두에서 사용할 수 있습니다. 프런트엔드의 경우 Flutter, React 및 Angular SDK와 같은 이 라이브러리를 기반으로 하는 프레임워크가 있습니다. 자세한 내용은 문서를 확인하세요.

설치

NPM

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' } } ) ;

클라이언트를 초기화할 때 제공되는 사용자 정의 유형은 모든 클라이언트 반환을 수행하고 쿼리에 intellisense를 제공합니다.

? (선택 사항) 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에 풀 요청을 제출하기 전에 모든 모범 사례를 따르고 해당되는 경우 테스트를 추가하십시오. 귀하의 코드를 공식 저장소에 병합하게 되어 매우 기쁩니다. 먼저 기여자 라이선스 계약(CLA)에 서명하세요. 자세한 내용은 라이센스 파일을 참조하십시오.

몇 가지 개발 팁을 보려면 CONTRIBUTING.md를 방문하세요.

?‍ 채용 중입니다!

우리는 최근 3,800만 달러 규모의 시리즈 B 자금 조달 라운드를 마감했으며 계속 활발하게 성장하고 있습니다. 당사의 API는 10억 명 이상의 최종 사용자가 사용하고 있으며, 전 세계에서 가장 강력한 엔지니어로 구성된 팀 내에서 제품에 큰 영향을 줄 수 있는 기회를 갖게 됩니다.

현재 채용 공고를 확인하고 Stream 웹사이트를 통해 지원하세요.