stream chat js下載 - stream chat js源碼下載

stream chat js

Ai源碼

v8.49.0

下載

用於串流聊天的官方 JavaScript SDK

Stream Chat 的官方 JavaScript API 用戶端，這是一種用於建立聊天應用程式的服務。
探索文件 »

報告錯誤·請求功能

關於流

您可以在我們的「開始」頁面註冊 Stream 帳戶。

該庫可供前端和後端應用程式使用。對於前端，我們有基於該程式庫的框架，例如 Flutter、React 和 Angular SDK。有關更多信息，請查看我們的文件。

安裝

國家公共管理

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

初始化客戶端時提供的自訂類型將延續到所有客戶端返回，並為查詢提供智慧感知。

？（可選）結合我們的 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
    }
  }
} ;