stream chat js

SDK oficial de JavaScript para Stream Chat

Cliente API de JavaScript oficial para Stream Chat, un servicio para crear aplicaciones de chat.
Explora los documentos »

Informar error · Solicitar función

Acerca de la transmisión

Puedes registrarte para obtener una cuenta de Stream en nuestra página de introducción.

Esta biblioteca puede ser utilizada tanto por aplicaciones frontend como backend. Para el frontend, tenemos marcos que se basan en esta biblioteca, como los SDK Flutter, React y Angular. Para obtener más información, consulte nuestros documentos.

Instalación

MNP

npm install stream-chat

Hilo

yarn add stream-chat

entrega JS

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

Empezando

El cliente StreamChat está configurado para permitir la extensión de los tipos base mediante el uso de genéricos cuando se crean instancias. La creación de instancias predeterminada tiene todos los genéricos configurados en 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 ( ) ;

O puedes personalizar los 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' } } ) ;

Los tipos personalizados proporcionados al inicializar el cliente se aplicarán a todas las devoluciones del cliente y proporcionarán inteligencia a las consultas.

? (Opcional) Configuración de desarrollo en combinación con nuestros SDK

Conéctese al SDK nativo de Stream Chat React

Ejecutar en la raíz de este repositorio.

yarn link

Ejecute en la raíz de una de las aplicaciones de ejemplo (SampleApp/TypeScriptMessaging) en el repositorio stream-chat-react-native .

yarn link stream-chat
yarn start

Abra el archivo metro.config.js y establezca el 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
    }
  }
} ;

Asegúrese de reemplazar {{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}} con la ruta correcta para la carpeta stream-chat-js según la estructura de su directorio.

Ejecutar en la raíz de este repositorio.

yarn start

Más ejemplos de código

Dirígete a docs/typescript.md para ver más ejemplos.

✍️ Contribuyendo

Agradecemos los cambios de código que mejoran esta biblioteca o solucionan un problema; asegúrese de seguir todas las mejores prácticas y agregar pruebas, si corresponde, antes de enviar una solicitud de extracción en Github. Estamos muy contentos de fusionar su código en el repositorio oficial. Asegúrese de firmar primero nuestro Acuerdo de licencia de colaborador (CLA). Consulte nuestro archivo de licencia para obtener más detalles.

Dirígete a CONTRIBUTING.md para obtener algunos consejos de desarrollo.

?‍ ¡Estamos contratando!

Recientemente cerramos una ronda de financiación Serie B de 38 millones de dólares y seguimos creciendo activamente. Nuestras API son utilizadas por más de mil millones de usuarios finales y usted tendrá la oportunidad de generar un gran impacto en el producto dentro de un equipo de los ingenieros más sólidos de todo el mundo.

Consulte nuestras vacantes actuales y presente su solicitud a través del sitio web de Stream.