stream chat react
v12.8.1
مكونات React الرسمية لدردشة الدفق ، خدمة لبناء تطبيقات الدردشة.
روابط سريعة
مع مكتبة المكونات الخاصة بنا ، يمكنك إنشاء مجموعة متنوعة من حالات استخدام الدردشة ، بما في ذلك:
أفضل طريقة للبدء هي اتباع برنامج React Chat Tutorial. يوضح لك كيفية استخدام هذا SDK لإنشاء تطبيق دردشة يعمل بكامل طاقته ويتضمن تخصيصات شائعة.
تيار مجاني لمعظم مشاريع الجانبية والهوايات. للتأهل ، يجب ألا يكون لدى مشروعك/شركتك أكثر من 5 أعضاء في الفريق وكسب أقل من 10 آلاف دولار في الإيرادات الشهرية. للحصول على أسعار كاملة وتفاصيل ، تفضل بزيارة صفحة تسعير الدردشة الخاصة بنا.
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>
لقد قمنا ببناء خمسة تطبيقات تجريبية تعرض مجموعة متنوعة من حالات استخدام الدردشة ، بما في ذلك الرسائل الاجتماعية ، والتعاون الجماعي ، ودعم العملاء ، وألعاب البث المباشر ، والحدث الافتراضي. يمكنك معاينة هذه العروض التوضيحية على موقعنا. أيضا ، الرمز مفتوح المصدر.
نستخدم مولد مستند لإنشاء وثائق المكونات الخاصة بنا. نحن نقدم وصفًا موجزًا لكل مكون دردشة وتحديد جميع الدعائم التي تقبلها.
يتم إنشاء مكونات React باستخدام مكتبة الدفق-js. إذا كنت تقوم بتخصيص المكونات ، فمن المحتمل أن تحتاج إلى إجراء مكالمات إضافية إلى واجهة برمجة تطبيقات الدردشة الخاصة بنا باستخدام عميل JavaScript الخاص بنا ، والذي يحتوي على وثائق على موقعنا.
اعتبارًا من الإصدار 5.0.0 ، تم تحويل مكتبة المكون إلى TypeScript. يرجى قراءة دليل TypeScript للحصول على التفاصيل والمساعدة في التنفيذ.
بالنسبة للمكونات التي تنفذ منطقًا كبيرًا ، من المفيد تقسيم المكون إلى جزأين: مكون المستوى الأعلى الذي يتولى الوظيفة ومكون المستوى الأدنى الذي يجعل واجهة المستخدم. وبهذه الطريقة يمكنك تبديل واجهة المستخدم دون تغيير المنطق الذي يعطي المكون وظائفه. نستخدم نمط الموفر/المستهلك هذا بشكل متكرر في المكتبة ، ويوضح المثال أدناه كيفية تبديل مكون واجهة مستخدم 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) أولاً. انظر ملف الترخيص الخاص بنا لمزيد من التفاصيل.
لقد أغلقنا مؤخرًا جولة تمويل من سلسلة B بقيمة 38 مليون دولار ونموت بنشاط. يتم استخدام واجهات برمجة التطبيقات لدينا من قبل أكثر من مليار مستخدم نهائي ، ومن خلال العمل في Stream ، لديك فرصة لإحداث تأثير كبير على فريق من المهندسين الأقوياء للغاية.
تحقق من فتحاتنا الحالية وقدم التقديم عبر موقع Stream.
يستخدم هذا المشروع مكتبة lamejs ضمن ترخيص LGPL لتحويل الصوت المسجل إلى تنسيق MP3. يتم استيراد رمز مصدر المكتبة ديناميكيًا واستخدامه فقط إذا تم تمكين تسجيل الصوت.
يمكنك الحصول على الكود المصدري لـ lamejs من مستودع LameJS الذي يعد شوكًا لمكتبة JS الأصلية. يمكنك العثور على الكود المصدري لـ Lame على https://lame.sourceforge.net وترخيصه على: https://lame.sourceforge.net/license.txt
