stream chat js

SDK JavaScript oficial para Stream Chat

Cliente oficial da API JavaScript para Stream Chat, um serviço para construção de aplicativos de chat.
Explore os documentos »

Reportar bug · Solicitar recurso

Sobre o fluxo

Você pode se inscrever para uma conta Stream em nossa página de primeiros passos.

Esta biblioteca pode ser usada por aplicativos frontend e backend. Para frontend, temos frameworks baseados nesta biblioteca como os SDKs Flutter, React e Angular. Para mais informações, confira nossos documentos.

Instalação

NPM

npm install stream-chat

Fio

yarn add stream-chat

Entrega JS

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

Começando

O cliente StreamChat é configurado para permitir a extensão dos tipos base por meio do uso de genéricos quando instanciado. A instanciação padrão tem todos os genéricos definidos como 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 ( ) ;

Ou você pode personalizar os genéricos:

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

Os tipos personalizados fornecidos ao inicializar o cliente serão executados em todos os retornos do cliente e fornecerão inteligência às consultas.

? (Opcional) Configuração de desenvolvimento em combinação com nossos SDKs

Conecte-se ao Stream Chat React Native SDK

Execute na raiz deste repositório

yarn link

Execute na raiz de um dos aplicativos de exemplo (SampleApp/TypeScriptMessaging) no repositório stream-chat-react-native

yarn link stream-chat
yarn start

Abra o arquivo metro.config.js e defina o valor para watchFolders como

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

Certifique-se de substituir {{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}} pelo caminho correto para a pasta stream-chat-js de acordo com sua estrutura de diretórios.

Execute na raiz deste repositório

yarn start

Mais exemplos de código

Acesse docs/typescript.md para mais exemplos.

✍️ Contribuindo

Aceitamos alterações de código que melhorem esta biblioteca ou corrijam um problema. Certifique-se de seguir todas as práticas recomendadas e adicionar testes, se aplicável, antes de enviar uma solicitação pull no Github. Estamos muito felizes em mesclar seu código no repositório oficial. Certifique-se de assinar nosso Contrato de Licença de Colaborador (CLA) primeiro. Consulte nosso arquivo de licença para obter mais detalhes.

Acesse CONTRIBUTING.md para obter algumas dicas de desenvolvimento.

?‍ Estamos contratando!

Fechamos recentemente uma rodada de financiamento da Série B de US$ 38 milhões e continuamos crescendo ativamente. Nossas APIs são usadas por mais de um bilhão de usuários finais, e você terá a chance de causar um enorme impacto no produto dentro de uma equipe dos mais fortes engenheiros de todo o mundo.

Confira nossas vagas atuais e inscreva-se através do site do Stream.