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) の 1 つのルートで実行します。

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

{{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}}ディレクトリ構造に応じたstream-chat-jsフォルダーの正しいパスに置き換えてください。

このリポジトリのルートで実行します

yarn start

その他のコード例

その他の例については、docs/typescript.md にアクセスしてください。

✍️ 貢献する

このライブラリを改善したり問題を修正したりするコード変更は歓迎します。Github でプルリクエストを送信する前に、すべてのベストプラクティスに従い、該当する場合はテストを追加してください。あなたのコードを公式リポジトリにマージできることを非常に嬉しく思います。最初に必ずコントリビューターライセンス契約 (CLA) に署名してください。詳細については、ライセンスファイルを参照してください。

開発のヒントについては、CONTRIBUTING.md にアクセスしてください。