stream chat js

JavaScript SDK อย่างเป็นทางการสำหรับการแชทแบบสตรีม

ไคลเอ็นต์ JavaScript API อย่างเป็นทางการสำหรับ Stream Chat ซึ่งเป็นบริการสำหรับการสร้างแอปพลิเคชันแชท
สำรวจเอกสาร »

รายงานข้อผิดพลาด · คุณสมบัติคำขอ

เกี่ยวกับ สตรีม

คุณสามารถลงทะเบียนบัญชีสตรีมได้ที่หน้าเริ่มต้นใช้งานของเรา

ไลบรารีนี้สามารถใช้ได้ทั้งแอปพลิเคชันส่วนหน้าและส่วนหลัง สำหรับฟรอนต์เอนด์ เรามีเฟรมเวิร์กที่อิงตามไลบรารีนี้ เช่น Flutter, React และ Angular SDK หากต้องการข้อมูลเพิ่มเติม โปรดดูเอกสารของเรา

การติดตั้ง

นพีเอ็ม

npm install stream-chat

เส้นด้าย

yarn add stream-chat

เจเอสมาส่ง

 < 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 ของเรา

เชื่อมต่อกับ Stream Chat React Native SDK

รันในรูทของ repo นี้

yarn link

รันในรูทของหนึ่งในแอพตัวอย่าง (SampleApp/TypeScriptMessaging) ใน repo stream-chat-react-native

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 ตามโครงสร้างไดเรกทอรีของคุณ

รันในรูทของ repo นี้

yarn start

ตัวอย่างโค้ดเพิ่มเติม

ไปที่ docs/typescript.md เพื่อดูตัวอย่างเพิ่มเติม

✍️ร่วมสมทบทุน

เรายินดีรับการเปลี่ยนแปลงโค้ดที่ช่วยปรับปรุงไลบรารีนี้หรือแก้ไขปัญหา โปรดตรวจสอบให้แน่ใจว่าได้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดทั้งหมดและเพิ่มการทดสอบหากมีก่อนส่งคำขอดึงข้อมูลบน Github เรายินดีเป็นอย่างยิ่งที่จะรวมโค้ดของคุณเข้ากับพื้นที่เก็บข้อมูลอย่างเป็นทางการ ตรวจสอบให้แน่ใจว่าได้ลงนามในข้อตกลงใบอนุญาตผู้สนับสนุน (CLA) ของเราก่อน ดูไฟล์ใบอนุญาตของเราสำหรับรายละเอียดเพิ่มเติม

ไปที่ CONTRIBUTING.md เพื่อดูเคล็ดลับในการพัฒนา

?‍ เรากำลังรับสมัครงาน!

เมื่อเร็วๆ นี้เราได้ปิดการระดมทุน Series B มูลค่า 38 ล้านดอลลาร์ และเรายังเติบโตอย่างต่อเนื่อง API ของเรามีผู้ใช้ปลายทางมากกว่าพันล้านคน และคุณจะมีโอกาสที่จะสร้างผลกระทบอย่างใหญ่หลวงต่อผลิตภัณฑ์ภายในทีมวิศวกรที่แข็งแกร่งที่สุดทั่วโลก

ตรวจสอบการเปิดรับสมัครในปัจจุบันของเราและสมัครผ่านทางเว็บไซต์ของ Stream