stream chat js

Offizielles JavaScript SDK für Stream Chat

Offizieller JavaScript-API-Client für Stream Chat, einen Dienst zum Erstellen von Chat-Anwendungen.
Entdecken Sie die Dokumente »

Fehler melden · Funktion anfordern

Über Stream

Sie können sich auf unserer Seite „Erste Schritte“ für ein Stream-Konto anmelden.

Diese Bibliothek kann sowohl von Frontend- als auch von Backend-Anwendungen verwendet werden. Für das Frontend verfügen wir über Frameworks, die auf dieser Bibliothek basieren, wie z. B. die SDKs Flutter, React und Angular. Weitere Informationen finden Sie in unseren Dokumenten.

Installation

NPM

npm install stream-chat

Garn

yarn add stream-chat

JS liefern

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

Erste Schritte

Der StreamChat-Client ist so eingerichtet, dass er bei der Instanziierung eine Erweiterung der Basistypen durch die Verwendung von Generika ermöglicht. Bei der Standardinstanziierung sind alle Generika auf Record<string, unknown> gesetzt.

 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 ( ) ;

Oder Sie können die Generika anpassen:

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

Benutzerdefinierte Typen, die bei der Initialisierung des Clients bereitgestellt werden, werden auf alle Client-Rückgaben übertragen und bieten Intelligenz für Abfragen.

? (Optional) Entwicklungs-Setup in Kombination mit unseren SDKs

Stellen Sie eine Verbindung zum Stream Chat React Native SDK her

Führen Sie es im Stammverzeichnis dieses Repos aus

yarn link

Führen Sie es im Stammverzeichnis einer der Beispiel-Apps (SampleApp/TypeScriptMessaging) im stream-chat-react-native -Repository aus

yarn link stream-chat
yarn start

Öffnen Sie die Datei metro.config.js und legen Sie den Wert für watchFolders fest als

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

Stellen Sie sicher, dass Sie {{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}} durch den richtigen Pfad für den Ordner stream-chat-js gemäß Ihrer Verzeichnisstruktur ersetzen.

Führen Sie es im Stammverzeichnis dieses Repos aus

yarn start

Weitere Codebeispiele

Weitere Beispiele finden Sie unter docs/typescript.md.

✍️Mitwirken

Wir freuen uns über Codeänderungen, die diese Bibliothek verbessern oder ein Problem beheben. Bitte stellen Sie sicher, dass Sie alle Best Practices befolgen und gegebenenfalls Tests hinzufügen, bevor Sie eine Pull-Anfrage auf Github einreichen. Wir freuen uns sehr, Ihren Code im offiziellen Repository zusammenzuführen. Stellen Sie sicher, dass Sie zuerst unsere Contributor License Agreement (CLA) unterzeichnen. Weitere Einzelheiten finden Sie in unserer Lizenzdatei.

Besuchen Sie CONTRIBUTING.md für einige Entwicklungstipps.

?‍Wir stellen ein!

Wir haben kürzlich eine Finanzierungsrunde der Serie B über 38 Millionen US-Dollar abgeschlossen und wachsen weiterhin aktiv. Unsere APIs werden von mehr als einer Milliarde Endbenutzern verwendet, und Sie haben die Chance, innerhalb eines Teams der stärksten Ingenieure auf der ganzen Welt einen großen Einfluss auf das Produkt zu nehmen.

Schauen Sie sich unsere aktuellen Stellenangebote an und bewerben Sie sich über die Website von Stream.