الرد على دردشة متعددة المستخدمين مع Chatix الخلفية

الآن سأريكم كيفية إجراء محادثة للفريق / المستخدمين / الأصدقاء إذا لم يكن لديك الخلفية الخاصة بك أو لا ترغب في قضاء الوقت في تطويره. سنجري محادثة نصية بسيطة وسوف يستغرق منا حوالي ساعة.

من المستحيل تقريبًا كتابة دردشة على شبكة عمل بدون خلفية ، يجب أن تكون بشكل أو بآخر. سوف نستخدم Chatix و JavaScript SDK الخاص به. ستشارك Chatix و SDK في مهام تخزين الرسائل والشبكات ، وسنتعامل مع الواجهة الأمامية.

رمز المشروع النهائي متاح على جيثب
عرض

هيكل المشروع

• التطبيق (المكون الرئيسي للتطبيق ، يعمل كحارس دولة ، لأنه في هذا الدرس لن نضيف Redux أو أي مدير دولة آخر)
  
  • رأس (رأس تطبيقنا الذي يعرض الشعار واسم الدردشة ويسمح للمستخدم بكتابة اسمه)
  • LogoHeader
  • RoomTitle
  • رئيسي
  • قائمة الأعضاء (قائمة الدردشة)
    
    • MemberItem []
  • ChatField (حاوية لكل ما يتعلق برسائل الدردشة)
    
    • MessageContainer
    • الرسالة [] (عرض للرسالة ؛ في هذا الدرس سوف نعمل فقط مع الرسائل النصية)
    • SendMessageForm (نموذج لإرسال رسالة دردشة جديدة)
  • ChatixSDK (مكون مقطوع الرأس مسؤول عن العمل مع الواجهة الخلفية)

ملاحظة هامة حول تخزين الدولة. بالطبع ، سيكون أكثر ملاءمة لإضافة Redux هنا ومعالجة تغييرات الحالة من خلاله ، ولكن من أجل توفير الوقت ، سنقوم بتخزين الحالة في المكون الرئيسي للتطبيق وسنقوم بإعادة توجيه البيانات إلى المكونات الفرعية واستدعاء أولياء أمورهم من الطرق الفرعية.
على سبيل المثال ، عندما نحصل على اسم الدردشة ، App → Header → RoomTitle في حالة مكون App → Header → RoomTitle عبر props : App → Header → RoomTitle . عندما يكتب المستخدم رسالة ، SendMessageForm → ChatField → Main → App من SendMessageForm إلى التطبيق: SendMessageForm → ChatField → Main → App .

ستبدو محادثتنا في هذا التصميم:

التفاعل بين المكونات

يجب أن تنقل مكوناتنا البيانات إلى بعضهم البعض ولكي يعمل كل شيء كما يجب ، دعونا نحدد الآن كيفية تفاعلهم مع بعضهم البعض.

كما ترون في الشكل ، فإن المكون الرئيسي بالنسبة لنا هو App ، الذي يوفر البيانات للمكونات الفرعية (نظرًا للتفاعلية ، فنحن ببساطة نقوم بتعيين prop وسيقوم المكون الفرعي بالرد على التغييرات) ، والمكونات الفرعية تعيد توجيه المكالمات بالطريقة إلى App . ليس هذا هو أفضل بنية يمكن (وينبغي) القيام بها لمشروع إنتاج ، ولكنها ستقوم بدرسنا.

إنشاء المشروع

إنشاء مكونات مرئية

قبعة

1. تحتاج أولاً إلى إنشاء مشروع جديد ، لذلك سنستخدم إنشاء تطبيق رد فعل .

   
   

    npx create-react-app chatix-chatroom cd chatix-chatroom 

   
   

   قم بتشغيل المشروع باستخدام الأمر

   
   

    npm start 

   
   

2. لنبدأ بإنشاء رأس.
   أولاً ، أضف شعارًا إلى الرأس. للقيام بذلك ، داخل مجلد src ، قم بإنشاء مجلد المكونات ، وفيه مجلد logo_header . نقوم بتحميل الشعار إلى هذا المجلد وإنشاء ملفات 2 LogoHeader.js و LogoHeader.css

   
   

LogoHeader.js

 import React from 'react' import logo from './chatix_logo.svg'; import './LogoHeader.css'; function LogoHeader(){ return ( <div className="LogoHeader"> <img src={logo} className="App-logo" alt="Chatix logo" /> </div> ); } export default LogoHeader; 

LogoHeader.css

 .LogoHeader{ flex-basis: 200px; flex-grow: 0; flex-shrink: 0; } 

كل شيء واضح هنا ، في هذا المكون يتم استيراد ملف به شعار وأنماط.

لن أضيف رمز أوراق الأنماط هنا بعد الآن ، يمكنك رؤيتها على صفحة المشروع النهائي

الآن عرض اسم غرفة الدردشة. للقيام بذلك ، قم بإنشاء مجلد عنوان الغرفة وفيه مكون RoomTitle . props.chatroomName الاسم في هذا المكون من خلال الدعائم ، لذلك نكتب props.chatroomName والآن props.chatroomName هنا.

RoomTitle

 import React from 'react'; import './RoomTitle.css'; function RoomTitle(props){ return ( <div className="RoomTitle"> <h1>{props.chatroomName}</h1> </div> ); } export default RoomTitle; 

ثم نقوم بإنشاء مكون الرأس نفسه ووضع الشعار واسم غرفة الدردشة فيه. رمي اسم الدردشة على الفور في المكون الفرعي من خلال prop chatroomName .

أذكرك بأننا اتفقنا على أنه سيتم تخزين جميع البيانات (حالة التطبيق) من خلال المكون الجذر للتطبيق. منه سننقل الرأس أولاً إلى الرأس ومن الرأس إلى RoomTitle .

مكونات \ رأس \ Header.js

Header.js

 import React from 'react'; import './Header.css' import LogoHeader from '../logo_header/LogoHeader'; import RoomTitle from '../room-title/RoomTitle'; function Header(props) { return ( <header> <LogoHeader/> <RoomTitle chatroomName={props.chatroomName} /> </header> ); } export default Header; 

بعد ذلك ، افتح ملف App.js وأضف مكون Header.js إليه .
ثم نضيف الاسم إلى الدولة ونرسله إلى العنوان عبر الدعائم .
تحتاج أيضًا في الرأس إلى إضافة اسم المستخدم الحالي. للقيام بذلك ، قم بإضافة كائن المستخدم إلى الحالة وإعادة توجيهه بالمثل إلى الرأس

 import React from 'react'; import './App.css'; import Header from './components/header/Header'; class App extends React.Component { constructor(props){ super(props); chatroomName: '-', me: { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" } } render() { return ( <div className="App"> <Header chatroomName={this.state.chatroomName} me={this.state.me} /> </div> ); }; } export default App; 

تحتاج الآن في الرأس إلى إضافة إدخال باسم المستخدم الحالي وتعيين معالج للتغيير حتى نتمكن من نقل اسم المستخدم الجديد إلى مكون التطبيق .

للقيام بذلك ، نضيف handleChangeName الدالة props.updateVisitor إلى الإدخال بالاسم props.updateVisitor وظيفة رد الاتصال props.updateVisitor التي نمر بها كائن المستخدم بالاسم المحدث.

Header.js

 function Header(props) { const [name, setName] = useState(props.me.name ? props.me.name : props.me.uuid.substr(-10)) const handleChangeName = (e) => { setName(e.target.value) let visitor = {...props.me}; visitor.name = e.target.value; props.updateVisitor(visitor) } return ( <header> <LogoHeader/> <RoomTitle chatroomName={props.chatroomName}/> { props.me ? <input className='name-input' value={name} placeholder=' ' onChange={(e) => handleChangeName(e)} /> : null } </header> ); } 

أضف الآن هذه الوظيفة props.updateVisitor إلى التطبيق props.updateVisitor إلى props.updateVisitor . حتى الآن ، يقوم فقط بتحديث كائن المستخدم في الحالة ، ولكن من خلاله سنقوم بتحديث المستخدم على الخادم.

 onUpdateVisitor = (visitor) => { this.setState({me: visitor}) } 

لذا ، يبدو تطبيقنا الآن بهذا الشكل ويعرف حتى الآن كيفية تحديث الاسم. المضي قدما

الشريط الجانبي

الآن دعونا ننكب على إنشاء شريط جانبي.
سيكون الشريط الجانبي موجودًا داخل المكون الرئيسي في صفحة Main.js.
نقوم بإنشائه بمكونات \ main \ Main.js ، ثم ننشئ مكونًا بقائمة بمكونات المستخدمين \ member-list \ MemberList.js وننشئ على الفور مكونًا سيعرض على المستخدمين أنفسهم المكونات \ member-item \ MemberItem.js .

لتوضيح مدى ارتباط هذه المكونات الثلاثة ، ألق نظرة على مخطط المشروع في بداية المقال.

يتم إنشاء المكونات ، والآن دعنا نذهب في النظام.
أولاً ، أضف صفيف المستخدمين إلى حالة مكون التطبيق وإضافة المكون الرئيسي . ثم سنقوم بإعادة توجيه هؤلاء المستخدمين إلى ذلك.

التطبيق

 class App extends React.Component { constructor(props) { super(props); this.state = { chatroomName: '-', members: [ { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" }, { is_online: true, name: "", uuid: "mnzxcv97zx6chvo" }, { is_online: false, name: "", uuid: "kjuhv987ashdfoua" }, { is_online: false, name: "", uuid: "jdhnf978WEHJSNDL" }, ], me: { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" } }; } render() { return ( <div className="App"> <Header chatroomName={this.state.chatroomName} me={this.state.me} /> <Main members={this.state.members} me={this.state.me} /> </div> ); }; } 

في المكون الرئيسي ، أضف مكون MemberList وأعد توجيه صفيف المستخدمين إلى ذلك.

Main.js

 function Main(props) { return( <section className="Main"> <MemberList members={props.members} /> </section> ); } 

وفي مكون MemberList ، ندخل في جميع المستخدمين ولكل إرجاع مكون MemberItem ونمرر كائن المستخدم إليه.

MemberList.js

 function MemberList(props) { const members = props.members.map((member) => <MemberItem key={member.uuid} member={member} /> ); return ( <section className="MemberList"> {members} </section> ); } 

المكون MemberItem يعرض بالفعل المستخدم مباشرة في الشريط الجانبي. في ذلك ، نتحقق من اسم المستخدم ، إذا لم يكن مثبتًا ، فسنقوم بعرض أول 10 أحرف من المعرف. نحن أيضًا نتحقق من الحالة على الإنترنت / غير متصل ونقارن المعرف بمعرف المستخدم الحالي ، بحيث نعارضه لعرض العلامة "(أنت)".

 function MemberItem(props) { function getName(){ let name = '' if (props.member.uuid === props.me.uuid) { if(props.me.name) { name = props.me.name } else { name = props.me.uuid.substring(props.me.uuid.length-10, props.me.uuid.length); } } else { if(props.member.name){ name = props.member.name } else { name = props.member.uuid.substring(props.member.uuid.length-10, props.member.uuid.length); } } return name; } return( <div className="MemberItem"> <img src={ icon } alt={ props.member.name }/> <span> { getName() } { props.member.uuid === props.me.uuid && " () " } </span> { props.member.is_online && <span className="online">•</span> } </div> ); } 

القيام به. الآن التطبيق يبدو بالفعل مثل هذا

قائمة الرسائل ونموذج التقديم

الآن سنتعامل مع قائمة الرسائل وشكل الإرسال.
أولاً ، أضف صفيفًا به رسائل إلى حالة مكون التطبيق .

التطبيق

 this.state = { chatroomName: '-', messages: [ { content: " 1", sender_id: "mnzxcv97zx6chvo", uuid: "dg897sdfg" }, { content: " 2", sender_id: "98s7dfh9a8s7dhf", uuid: "8723hernm" }, { content: "  ", sender_id: "mnzxcv97zx6chvo", uuid: "435nbcv98234" } ], members: [ { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" }, { is_online: true, name: "", uuid: "mnzxcv97zx6chvo" }, { is_online: false, name: "", uuid: "kjuhv987ashdfoua" }, { is_online: false, name: "", uuid: "jdhnf978WEHJSNDL" }, ], me: { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" } }; 

وأرسلها إلى المكون الرئيسي

التطبيق

  <Main members={this.state.members} messages={this.state.messages} me={this.state.me} /> 

الآن قم بإنشاء مكون conponents / chat-field / ChatField.js
قم بتوصيله بـ Main وقم بإعادة توجيه الرسائل إليه.

رئيسي

 function Main(props) { return( <section className="Main"> <MemberList me={props.me} members={props.members} /> <ChatField messages={props.messages} /> </section> ); } 

بعد ذلك ، قم بإنشاء مكون conponents / message-container / MessageContainer.js
قم بتوصيله بـ ChatField وقم أيضًا بإعادة توجيه الرسائل إليه.

شاتفيلد

 function Main(props) { return( <section className="Main"> <MemberList me={props.me} members={props.members} /> <ChatField messages={props.messages} /> </section> ); } 

بعد ذلك ، سوف ندور في كل الرسائل ولكل إرجاع المكون الذي سيظهره.
دعونا إنشاء ذلك conponents / message / Message.js . فيه نعرض أيقونة الزائر واسمه أو معرفه إذا لم يتم تحديد الاسم ونص الرسالة نفسه.

رسالة

 function Message(props) { const getSenderName = () => { if (props.sender) { return props.sender.name ? props.sender.name : props.sender.uuid.substr(-10); } return "Unknown sender"; }; return( <div className="Message"> <div className="message-sender-icon"> <img src={icon} alt="visitor icon"/> </div> <div className="message-bubble"> <div className="message-sender-name">{getSenderName()}</div> <div className="message-content">{props.message.content}</div> </div> </div> ); } 

الآن ، في MessageContainer ، ندخل في كل الرسائل ولكل إرجاع مكون الرسائل الذي ننقل إليه كائن الرسالة

MessageContainer

 function MessageContainer(props) { const messageList = props.messages.map(message => <Message key={message.uuid} sender={props.members.find((member) => member.uuid === message.sender_id)} message={message} /> ); return ( <section className="MessageContainer" ref={messagesContainer}> {messageList} </section> ); } 

الآن يبدو المشروع كالتالي:

الآن إنشاء مكون مع نموذج لإرسال مكونات الرسائل / إرسال رسالة نموذج / SendMessageForm.js . في ذلك ، إنشاء مدخلات وزر للإرسال. عندما يتغير الإدخال ، يتم كتابة النص منه إلى الحالة ، وعند النقر فوق الزر ، ندعو وظيفة رد الاتصال onSendNewMessage الرسالة من الحالة إليها. onSendNewMessage بإنشاء وظيفة onSendNewMessage قليلاً في وقت لاحق في مكون التطبيق وإعادة توجيهها من خلال الدعائم.

SendMessageForm

 class SendMessageForm extends React.Component { constructor(props) { super(props); this.state = { message: '' }; } currentMessageChanged = (e) => { this.setState({message: e.target.value }); } sendMessageClicked = async (e) => { e.preventDefault(); if (this.state.message.length > 0) { await this.props.onSendNewMessage(this.state.message); this.setState({...this.state, ...{message : ''}}); } } render(){ return ( <section className="SendMessageForm"> <form> <input type="text" value={this.state.message} onChange={this.currentMessageChanged} placeholder="Type message to send"/> <button type="submit" onClick={this.sendMessageClicked} > Send </button> </form> </section> ); } } 

الآن ضع المكون SendMessageForm داخل ChatField .

شاتفيلد

 function ChatField(props) { return( <section className="ChatField"> <MessageContainer members={props.members} messages={props.messages} /> <SendMessageForm onSendNewMessage={props.onSendNewMessage}/> </section> ); } 

في المكون الرئيسي ، سنقوم أيضًا onSendNewMessage وظيفة onSendNewMessage في ChatField .

رئيسي

 <ChatField members={props.members} messages={props.messages} onSendNewMessage={props.onSendNewMessage} /> 

الآن قم بإنشاء هذه الوظيفة في التطبيق وأحيلها إلى Main .

التطبيق

 onSendNewMessage = async (message) => { console.log(message) } 

التطبيق

 <Main members={this.state.members} messages={this.state.messages} onSendNewMessage={this.onSendNewMessage} me={this.state.me} /> 

القيام به. الآن ، عند النقر فوق زر إرسال رسالة ، سيتم نقله إلى مكون التطبيق .
الآن يبدو التطبيق كالتالي:

الآن ، يتم عرض كل شيء في تطبيقنا ويعمل كل شيء كما يجب ، ولكن حتى الآن مع البيانات الثابتة ، ومن أجل تنشيط الدردشة لدينا ، تحتاج إلى توصيله مع الواجهة الخلفية.

اتصال الخلفية

للقيام بذلك ، فإن أول شيء فعله هو تثبيت حزمة chatix-core .

 npm i chatix-core 

ثم قم بإنشاء حساب على chatix وإنشاء غرفة دردشة. للقيام بذلك ، انتقل إلى chatix.io وقم بالتسجيل.
بعد التسجيل ، يمكنك رؤية معرف موقع websiteId في واجهة المشرف في صفحة إعدادات الدردشة.

الآن نقوم بإنشاء غرفة دردشة جديدة سنعمل معها.

نعود إلى مشروعنا وننشئ مكونًا جديدًا سنعمل من خلاله مع الخادم.
المكونات \ chatix \ ChatixSDK.js

نحن استيراد ChatixCore في ذلك.

 import ChatixCore from 'chatix-core'; 

في مكون ChatixSDK ، قم بإنشاء مثيل لفئة ChatixCore وتمرير websiteId كوسيطة.

 const websiteId = "_WEBSITE_ID"; this.sdk = new ChatixCore(websiteId); 

الآن في this.sdk يمكنك استخدام أساليب العمل مع غرفة الدردشة. يمكنك عرض قائمة الطرق على صفحة مشروع chatix-core

بعد ذلك ، نحتاج إلى الاتصال بالخادم والحصول على بيانات حول غرفة الدردشة التي تم إنشاؤها مسبقًا. هناك طرق غير متزامنة تبدأ () و getChatroom () لهذا الغرض .

بعد تلقي كائن غرفة الدردشة ، لنأخذ اسمه على الفور ونقله إلى التطبيق . للقيام بذلك ، قم بإضافة وظيفة رد الاتصال updateChatroomTitle(chatroom.title) في التطبيق واتصل بها في ChatixSDK .

ChatixSDK

 class ChatixSDK extends React.Component { constructor(props){ super(props); const websiteId = "_WEBSITE_ID"; this.chatroomId = "_CHATROOM_ID"; this.sdk = new ChatixCore(websiteId); this.sdk.start() .then( async () => { try { // refresh information about chatroom and call passed handler const chatroom = await this.sdk.getChatroom(this.chatroomId); if (props.updateChatroomTitle) { props.updateChatroomTitle(chatroom.title); } } catch (err) { console.error(err); } }) .catch((e) => { console.error(e); }); } render(){ return null; } } 

يمكنك إلقاء نظرة على this.chatroomId في واجهة المدير عن طريق فتح غرفة الدردشة المرغوبة.

الآن في التطبيق ، سنقوم بتوصيل مكون ChatixSDK ورمي وظيفة updateChatroomTitle فيه ، والتي ستقوم بتحديث اسم الدردشة. نضيف أيضًا رابط ref إليه حتى نتمكن من الوصول إلى هذا المكون.

التطبيق

 this.chatixSDK = React.createRef(); 

 setChatroomTitle = (newName) => { const newStateFragment = { chatroomName: newName}; this.setState({...this.state, ...newStateFragment}); }; 

التطبيق

 render() { return ( <div className="App"> <Header chatroomName={this.state.chatroomName} me={this.state.me} updateVisitor={this.onUpdateVisitor} /> <Main members={this.state.members} messages={this.state.messages} onSendNewMessage={this.onSendNewMessage} me={this.state.me} /> <ChatixSDK ref={this.chatixSDK} updateChatroomTitle={this.setChatroomTitle} /> </div> ); }; 

القيام به. الآن ، بعد الاتصال بالخادم مباشرة ، نطلب بيانات الدردشة ، ونحصل على اسمه ونكتبها إلى حالة مكون التطبيق ، وبما أن التغييرات في الحالة تتسبب في تقديم المكون مرة أخرى ، سيتم تحديث الاسم في الرأس تلقائيًا. الآن يمكن استبدال الاسم الافتراضي في الولاية بسلسلة فارغة.

التطبيق

 chatroomName: '' 

الآن دعونا ملء الشريط الجانبي مع المستخدمين الحقيقيين.
ولكن قبل أن تحصل على قائمة المستخدمين ، تحتاج إلى الاتصال بالدردشة ، لذلك ، في ChatixSDK داخل وظيفة this.sdk.start() نحصل على قائمة بجميع غرف الدردشة الخاصة بالمستخدم ، وتحقق مما إذا كانت متصلة بالغرفة الحالية ، وإذا لم تكن كذلك ، this.sdk.start() بتوصيلها.

ChatixSDK

 const myChatrooms = await this.sdk.getMyChatrooms(); if (myChatrooms.filter(x => x.id===this.chatroomId).length === 0) { await this.sdk.connectToChatroom(this.chatroomId); } 

بعد التأكد من أن مستخدمنا متصل بغرفة الدردشة ، يمكننا الحصول على قائمة المشاركين في هذه الدردشة.

ChatixSDK

 // lets get all chatroom members using infinite loop with break on empty server response let membersPage = 1; let allChatroomMembers = []; while(true) { let pagedMembers = await this.sdk.getChatroomMembers(this.chatroomId, membersPage++, 10); allChatroomMembers = [...allChatroomMembers, ...pagedMembers]; if (pagedMembers.length === 0) { break; } } 

هنا ، في حلقة لا نهائية ، نطلب من المستخدمين صفحة تلو الأخرى حتى نحصل على الجميع ، حالما نحصل على الجميع ، نقوم بتكسير الحلقة. بعد ذلك ، تمامًا مثل اسم غرفة الدردشة ، نعيد توجيهها إلى المكون الأصل باستخدام وظيفة رد الاتصال.

ChatixSDK

 if (props.setChatroomMembers) { props.setChatroomMembers(allChatroomMembers); } 

الآن ، في مكون التطبيق ، قم بإنشاء setChatroomMembers لوظائف رد الاتصال هذه والتي ستقوم setChatroomMembers المستخدمين حسب حالتهم عبر الإنترنت / دون اتصال setChatroomMembers في الحالة.

App.js

 setChatroomMembers = (members) => { members.sort(this.sortMembers); const newStateFragment = { members: members}; this.setState({...this.state, ...newStateFragment}); } 

إضافة وظيفة الفرز sortMembers . يقوم بفرز المستخدمين حسب الحالة وحسب الترتيب الأبجدي.

App.js

 sortMembers(a, b) { if (a.is_online === true && b.is_online === false) { return -1; } else if (b.is_online === true && a.is_online === false) { return 1; } else { if (a.name && b.name) { if (a.name.toLocaleUpperCase() > b.name.toLocaleUpperCase()) { return 1; } else if (a.name.toLocaleUpperCase() < b.name.toLocaleUpperCase()) { return -1; } } else if (a.name && !b.name) { return -1; } else if (!a.name && b.name) { return 1; } if (a.uuid > b.uuid) { return -1; } else { return 1; } } } 

بعد ذلك ، نعيد توجيه وظيفة setChatroomMembers في ChatixSDK .

التطبيق

 render() { return ( <div className="App"> <Header chatroomName={this.state.chatroomName} me={this.state.me} updateVisitor={this.onUpdateVisitor} /> <Main members={this.state.members} messages={this.state.messages} onSendNewMessage={this.onSendNewMessage} me={this.state.me} /> <ChatixSDK ref={this.chatixSDK} updateChatroomTitle={this.setChatroomTitle} setChatroomMembers={this.setChatroomMembers} /> </div> ); }; 

الآن ، بعد الاتصال بالخادم مباشرة ، نحن ، وكذلك مع الرأس ، نطلب قائمة بجميع المستخدمين المتصلين ونكتبها إلى حالة مكون التطبيق . وأيضًا تغيير القيمة الافتراضية لقائمة المستخدمين في الولاية.

التطبيق

 members: [] 

الآن ، وفقًا لنفس المبدأ تمامًا ، نحصل على كائن المستخدم الحالي ومجموعة من الرسائل ونكتبها أيضًا إلى حالة التطبيق

ChatixSDK

 // lets load 100 last messages from current chatroom const lastMessages = await this.sdk.getChatroomMessages(this.chatroomId, null, 100); if (props.setChatroomMessages) { props.setChatroomMessages(lastMessages); } if (props.setMe) { const me = this.sdk.getVisitor(); this.props.setMe(me); } 

التطبيق

 <ChatixSDK ref={this.chatixSDK} setMe={this.setMe} updateChatroomTitle={this.setChatroomTitle} setChatroomMembers={this.setChatroomMembers} setChatroomMessages={this.setChatroomMessages} /> 

بعد ذلك ، سوف نرسل الرسائل.

لدينا في التطبيق بالفعل وظيفة onSendNewMessage التي تعرض إرسال رسالة إلى وحدة التحكم. بدلاً من ذلك ، سنتصل ببساطة sendChatroomMessage لإرسال رسالة من ChatixSDK .
هذه طريقة غير متزامنة وتقوم بإرجاع كائن الرسالة المرسلة في الاستجابة ، والتي نضيفها على الفور إلى صفيف الرسائل في الحالة. بالمناسبة ، يرجى ملاحظة أننا نصل this.chatixSDK رابط this.chatixSDK تم إنشاؤه مسبقًا.

التطبيق

 onSendNewMessage = async (message) => { let receivedMsg = await this.chatixSDK.current.sendChatroomMessage(message); const currentMessages = this.state.messages; currentMessages.push(receivedMsg); const newStateFragment = {messages: currentMessages}; this.setState({...this.state, ...newStateFragment}); } 

نظرًا لأن التغيير في الحالة يؤدي إلى إعادة تقديمه ، سيتم تحديث قائمة الرسائل تلقائيًا. لكننا بحاجة إلى التأكد من أنه عند إضافة الرسائل ، فإن شريط التمرير في كتلة الرسالة سينخفض.

للقيام بذلك ، افتح مكون MessageContainer واستخدم ربط useEffect ، راقب صفيف الرسائل للتغييرات ، وبمجرد أن يتم تغييره وتمت إضافة الرسائل ، نحصل على كتلة scrollHeight مع الرسائل وقم بالتمرير بها بنفس المقدار

 function MessageContainer(props) { const messagesContainer = React.createRef(); useEffect(() => { messagesContainer.current.scrollTop = messagesContainer.current.scrollHeight }, [props, messagesContainer]); const messageList = props.messages.map(message => <Message key={message.uuid} sender={props.members.find((member) => member.uuid === message.sender_id)} message={message} /> ); return ( <section className="MessageContainer" ref={messagesContainer}> {messageList} </section> ); } 

الآن دعونا ننتهي من تحديث اسم المستخدم. لقد أنشأنا بالفعل إدخالًا في الرأس وعند تغييره ، نقوم بإعادة توجيه كائن المستخدم المحدّث إلى مكون التطبيق وهناك نعرضه في وحدة التحكم. دعونا ننهي هذه الوظيفة. للقيام بذلك ، قم بإضافة طريقة استدعاء this.chatixSDK.current.updateVisitor(user) إليها ، سيؤدي ذلك إلى تحديث البيانات الموجودة على الخادم. this.state.me فقط بتحديث البيانات في الحالة المحلية ، ولهذا نقوم بتحديث كائن this.state.me وفي صفيف this.state.members أيضًا المستخدم الحالي this.state.members . هذا ضروري لتحديث اسم المستخدم الحالي في الرسائل المرسلة إليهم.

التطبيق

 onUpdateVisitor = (user) => { this.chatixSDK.current.updateVisitor(user) this.setMe(user) let currentUser = this.state.members.find((member) => (member.uuid === user.uuid)) let currentUserIndex = this.state.members.indexOf(currentUser) let newMembers = [...this.state.members] newMembers[currentUserIndex] = user; this.setState({ members: newMembers }) } 

نحن الآن بحاجة إلى معرفة كيفية الرد على الرسائل الواردة ، وربط / فصل المستخدمين وتغيير المعلومات والمستخدمين المتصلين.

للقيام بذلك ، في ملف ChatixSDK.js في المُنشئ ، نحتاج إلى تجاوز وظائف رد الاتصال. يمكنك رؤية القائمة الكاملة للوظائف والحجج في صفحة مشروع chatix-core .

نحن مهتمون حاليًا في onchatroomMessageRe تلقي ، onMemberConnectedToChatroom ، onMemberDisconnectedFromChatroom و onApplyVisitorInfo .

نحن نعيد تعريفهم ولكل وظيفة ندعو رد الاتصال الذي سننشئه في التطبيق .

 this.sdk.onChatroomMessageReceived = (chatroomId, message) => { if (chatroomId === this.chatroomId) { this.props.onNewMessageReceived(message); } }; this.sdk.onMemberConnectedToChatroom = (chatroomId, member) => { if (chatroomId === this.chatroomId && props.addChatroomMember) { this.props.addChatroomMember(member); } }; this.sdk.onMemberDisconnectedFromChatroom = (chatroomId, member) => { if (chatroomId === this.chatroomId && props.removeChatroomMember) { this.props.removeChatroomMember(member); } }; this.sdk.onApplyVisitorInfo = (visitor) => { this.props.onMemberUpdated(visitor) } 

بعد ذلك ، انتقل إلى التطبيق وإنشاء هذه الوظائف.

onNewMessageReceived (رسالة)
تأخذ هذه الوظيفة كائن رسالة وتضيفها ببساطة إلى الحالة مع بقية الرسائل. , .

App

 onNewMessageReceived = (message) => { const currentMessages = this.state.messages; currentMessages.push(message); const newStateFragment = {messages: currentMessages}; this.setState({...this.state, ...newStateFragment}); } 

App
addChatroomMember(member)
state members. .

App

 addChatroomMember = (member) => { const newStateFragment = {}; const currentMembers = this.state.members; currentMembers.push(member); currentMembers.sort(this.sortMembers); newStateFragment.members = currentMembers; this.setState({...this.state, ...newStateFragment}); } 

App
removeChatroomMember(memberId)
state members state .

 removeChatroomMember = (memberId) => { const currentMembers = this.state.members; const filteredMembers = currentMembers.filter(x=> x.uuid !== memberId); const newStateFragment = {members: filteredMembers}; this.setState({...this.state, ...newStateFragment}); } 

onMemberUpdated(updatedMember)
. . state .

App

 onMemberUpdated = (updatedMember) => { let oldMember = this.state.members.find(member => member.uuid === updatedMember.uuid); oldMember = this.state.members.indexOf(oldMember); let newStateMembers = this.state.members; newStateMembers[oldMember] = updatedMember; this.setState({ members: newStateMembers }) } 

ChatixSDK

ChatixSDK

 <ChatixSDK ref={this.chatixSDK} setMe={this.setMe} updateChatroomTitle={this.setChatroomTitle} setChatroomMembers={this.setChatroomMembers} addChatroomMember={this.addChatroomMember} removeChatroomMember={this.removeChatroomMember} setChatroomMessages={this.setChatroomMessages} onNewMessageReceived={this.onNewMessageReceived} onMemberUpdated={this.onMemberUpdated} /> 

القيام به! \ , , / .

alekseyso
مواد إضافية:
SDK Chatix ()
SDK Chatix (npm)
192 -