stream chat js

SDK JavaScript officiel pour Stream Chat

Client API JavaScript officiel pour Stream Chat, un service permettant de créer des applications de chat.
Explorer les documents »

Signaler un bug · Fonctionnalité de demande

À propos du flux

Vous pouvez créer un compte Stream sur notre page de démarrage.

Cette bibliothèque peut être utilisée à la fois par les applications frontend et backend. Pour le frontend, nous avons des frameworks basés sur cette bibliothèque tels que les SDK Flutter, React et Angular. Pour plus d’informations, consultez nos documents.

Installation

MNP

npm install stream-chat

Fil

yarn add stream-chat

JS livrer

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

Commencer

Le client StreamChat est configuré pour permettre l'extension des types de base grâce à l'utilisation de génériques lors de l'instanciation. L'instanciation par défaut a tous les génériques définis sur 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 vous pouvez personnaliser les génériques :

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

Les types personnalisés fournis lors de l'initialisation du client seront appliqués à tous les retours du client et fourniront une intelligence aux requêtes.

? (Facultatif) Configuration de développement en combinaison avec nos SDK

Connectez-vous au SDK natif Stream Chat React

Exécuter à la racine de ce dépôt

yarn link

Exécuté à la racine de l'un des exemples d'applications (SampleApp/TypeScriptMessaging) dans le référentiel stream-chat-react-native

yarn link stream-chat
yarn start

Ouvrez le fichier metro.config.js et définissez la valeur de watchFolders comme

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

Assurez-vous de remplacer {{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}} par le chemin correct du dossier stream-chat-js selon votre structure de répertoires.

Exécuter à la racine de ce dépôt

yarn start

Plus d'exemples de code

Rendez-vous sur docs/typescript.md pour plus d'exemples.

✍️ Contribuer

Nous apprécions les modifications de code qui améliorent cette bibliothèque ou résolvent un problème, veuillez vous assurer de suivre toutes les meilleures pratiques et d'ajouter des tests le cas échéant avant de soumettre une Pull Request sur Github. Nous sommes très heureux de fusionner votre code dans le référentiel officiel. Assurez-vous de signer d'abord notre contrat de licence de contributeur (CLA). Consultez notre fichier de licence pour plus de détails.

Rendez-vous sur CONTRIBUTING.md pour quelques conseils de développement.

?‍ Nous recrutons !

Nous avons récemment clôturé un cycle de financement de série B de 38 millions de dollars et nous poursuivons notre croissance active. Nos API sont utilisées par plus d'un milliard d'utilisateurs finaux, et vous aurez la chance d'avoir un impact énorme sur le produit au sein d'une équipe composée des ingénieurs les plus compétents du monde entier.

Consultez nos ouvertures actuelles et postulez via le site Web de Stream.