stream chat react
v12.8.1
ส่วนประกอบ React อย่างเป็นทางการสำหรับสตรีมแชทบริการสำหรับการสร้างแอปพลิเคชันแชท
ลิงค์ด่วน
ด้วยไลบรารีส่วนประกอบของเราคุณสามารถสร้างกรณีการใช้แชทที่หลากหลายรวมถึง:
วิธีที่ดีที่สุดในการเริ่มต้นคือการติดตามการสอนการแชทแบบตอบโต้ มันแสดงวิธีการใช้ SDK นี้เพื่อสร้างแอปพลิเคชันแชทที่ใช้งานได้อย่างสมบูรณ์และรวมถึงการปรับแต่งทั่วไป
สตรีมฟรีสำหรับโครงการด้านข้างและงานอดิเรกส่วนใหญ่ เพื่อให้มีคุณสมบัติโครงการ/บริษัท ของคุณจะต้องมีสมาชิกในทีมไม่เกิน 5 คนและรับรายได้น้อยกว่า $ 10K ต่อเดือน สำหรับการกำหนดราคาและรายละเอียดที่สมบูรณ์เยี่ยมชมหน้าราคาแชทของเรา
npm install react react-dom stream-chat stream-chat-react
yarn add react react-dom stream-chat stream-chat-react
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat"></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat-react"></script>
เราได้สร้างแอปพลิเคชั่นตัวอย่างห้ารายการที่จัดแสดงกรณีการใช้แชทที่หลากหลายรวมถึงการส่งข้อความทางสังคมการทำงานร่วมกันของทีมการสนับสนุนลูกค้าการเล่นเกมสดและเหตุการณ์เสมือนจริง คุณสามารถดูตัวอย่างการสาธิตเหล่านี้บนเว็บไซต์ของเรา นอกจากนี้รหัสเป็นโอเพ่นซอร์ส
เราใช้เครื่องกำเนิด DOC เพื่อสร้างเอกสารประกอบของเรา เราให้คำอธิบายสั้น ๆ ของแต่ละองค์ประกอบการแชทและกำหนดอุปกรณ์ประกอบฉากทั้งหมดที่ยอมรับ
ส่วนประกอบ React ถูกสร้างขึ้นโดยใช้ไลบรารี Stream-Chat-JS หากคุณกำลังปรับแต่งส่วนประกอบอาจเป็นไปได้ว่าคุณจะต้องโทรเพิ่มเติมไปยังแชท API ของเราโดยใช้ไคลเอนต์ JavaScript ของเราซึ่งมีเอกสารในเว็บไซต์ของเรา
ณ รุ่น 5.0.0 ไลบรารีส่วนประกอบได้รับการแปลงเป็น typeScript โปรดอ่านคู่มือ TypeScript สำหรับรายละเอียดและความช่วยเหลือในการนำไปใช้
สำหรับส่วนประกอบที่ใช้ตรรกะที่สำคัญมันมีประโยชน์ในการแบ่งส่วนประกอบออกเป็นสองส่วน: องค์ประกอบระดับบนสุดที่จัดการกับฟังก์ชันการทำงานและส่วนประกอบระดับล่างซึ่งทำให้ UI วิธีนี้คุณสามารถสลับ UI ได้โดยไม่ต้องเปลี่ยนตรรกะที่ให้ส่วนประกอบฟังก์ชันการทำงาน เราใช้รูปแบบผู้ให้บริการ/ผู้บริโภคนี้บ่อยครั้งในไลบรารีและตัวอย่างด้านล่างแสดงวิธีการสลับองค์ประกอบ UI Message ด้วย MessageTeam โดยไม่ส่งผลกระทบต่อตรรกะใด ๆ ในแอพ
< Channel Message = { MessageTeam } >
< Window >
< ChannelHeader />
< MessageList />
< MessageInput />
</ Window >
< Thread />
</ Channel >วิธีที่ต้องการสำหรับการเอาชนะรูปแบบที่กำหนดไว้ล่วงหน้าในห้องสมุดคือกระบวนการสองขั้นตอน ขั้นแรกให้นำเข้า CSS ที่รวมอยู่ในไฟล์ที่คุณยกตัวอย่างแอปพลิเคชันแชทของคุณ ประการที่สองค้นหารูปแบบสตรีมที่คุณต้องการแทนที่โดยใช้ผู้ตรวจสอบเบราว์เซอร์หรือดูรหัสไลบรารี จากนั้นคุณสามารถเพิ่มตัวเลือกลงในไฟล์ CSS ในเครื่องของคุณเพื่อแทนที่ค่าเริ่มต้นของเรา ตัวอย่างเช่น:
import 'stream-chat-react/dist/css/v2/index.css' ;
import './App.css' ; ห้องสมุดของเรารองรับการแปลอัตโนมัติสำหรับภาษาผู้ใช้ต่างๆ โปรดอ่านเอกสารประกอบสากลของเราสำหรับรายละเอียดเพิ่มเติมและคำแนะนำการตั้งค่า
เรายินดีต้อนรับการเปลี่ยนแปลงรหัสที่ปรับปรุงไลบรารีนี้หรือแก้ไขปัญหา โปรดตรวจสอบให้แน่ใจว่าได้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดทั้งหมดและเพิ่มการทดสอบหากมีก่อนที่จะส่งคำขอดึงบน GitHub เรายินดีที่จะรวมรหัสของคุณเข้ากับที่เก็บอย่างเป็นทางการหากตรงตามความต้องการ ตรวจสอบให้แน่ใจว่าได้ลงนามข้อตกลงใบอนุญาตผู้สนับสนุน (CLA) ก่อน ดูไฟล์ใบอนุญาตของเราสำหรับรายละเอียดเพิ่มเติม
เมื่อเร็ว ๆ นี้เราได้ปิดการระดมทุนรอบ 38 ล้านเหรียญสหรัฐและกำลังเติบโตอย่างแข็งขัน API ของเราถูกใช้โดยผู้ใช้ปลายทางมากกว่าพันล้านคนและโดยการทำงานที่สตรีมคุณมีโอกาสที่จะสร้างผลกระทบอย่างมากต่อทีมวิศวกรที่แข็งแกร่งมาก
ตรวจสอบช่องเปิดปัจจุบันของเราและสมัครผ่านเว็บไซต์ของสตรีม
โครงการนี้ใช้ไลบรารี lamejs ภายใต้ใบอนุญาต LGPL เพื่อแปลงรูปแบบเสียงที่บันทึกไว้เป็น MP3 ซอร์สโค้ดของไลบรารีจะถูกนำเข้าและใช้แบบไดนามิกเฉพาะในกรณีที่เปิดใช้งานการบันทึกเสียง
คุณสามารถรับซอร์สโค้ดสำหรับ lamejs จากที่เก็บ LameJS ซึ่งเป็นส้อมของไลบรารี JS ดั้งเดิม คุณสามารถค้นหาซอร์สโค้ดสำหรับ Lame ได้ที่ https://lame.sourceforge.net และใบอนุญาตที่: https://lame.sourceforge.net/license.txt
