إنشاء تطبيق دردشة محمول على React Native

هذا هو الجزء الثاني من المقال (الأول هنا ) المكرس لإنشاء دردشة باستخدام apollo-server-koa والرد الأصلي. وسوف تغطي إنشاء تطبيق الدردشة المحمول. في الجزء السابق ، تم إنشاء خلفية لهذه الدردشة بالفعل ، لمزيد من التفاصيل حول وصف هذه العملية ، يمكنك العثور على الرابط .

بادئ ذي بدء ، باستخدام expo-cli ، قم بإنشاء مشروع expo جديد ، ولهذا نقوم بتنفيذ الأمر في الجهاز:

expo init 

واتبع جميع خطوات المعالج لإنشاء تطبيق فارغ.

بعد تلقينا التطبيق الذي تم إنشاؤه ، تحتاج إلى إضافة التبعيات التي سيتم استخدامها في المستقبل:

غزل إضافة apollo / رد فعل السنانير apollo-cache-inmemory apollo-client apollo-link-http apollo-link-ws apollo-Utilities graphql graphql-tag الاشتراكات الأصلية في قاعدة تفاعلات جهاز التوجيه

تم ، الخطوة التالية هي الاتصال وتكوين عميل أبولو للعمل مع الواجهة الخلفية لدينا. للقيام بذلك ، أضف الكود أدناه إلى App.js. لاحظ أننا هنا سنقوم بتهيئة apollo للاتصال بواجهة الخلفية الخاصة بنا عبر بروتوكول HTTP وبروتوكولات websocket ، بالإضافة إلى إنشاء ذاكرة تخزين مؤقت في الذاكرة لـ apollo ، وكذلك إنشاء طريقين: واحد لنموذج تسجيل الدخول والثاني لصفحة الدردشة.

 get link() { const BACKEND_URL = Platform.OS === 'ios' ? 'localhost:3000' : '10.0.2.2:3000'; const httpLink = new HttpLink({ uri: `http://${BACKEND_URL}/graphql` }); const wsLink = new WebSocketLink({ uri: `ws://${BACKEND_URL}/graphql`, options: { reconnect: true } }); return split( // split based on operation type ({ query }) => { const definition = getMainDefinition(query); return ( definition.kind === 'OperationDefinition' && definition.operation === 'subscription' ); }, wsLink, httpLink, ); } async componentDidMount() { const cache = new InMemoryCache(); this.client = new ApolloClient({ link: this.link, cache }); …. } render() { return ( ... <ApolloProvider client={this.client}> <NativeRouter> <Route exact path="/" component={UsernameForm}/> <Route path="/chat" component={Chat}/> </NativeRouter> </ApolloProvider> ) } 

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

سوف أتناول نقطة مثيرة للاهتمام:

 const [ findOrCreateUser ] = useMutation(FIND_OR_CREATE_USER, { update(cache, { data: { findOrCreateUser: { id, username } } }) { cache.writeQuery({ query: GET_CURRENT_USER, data: { id, username }, }); } }); 

هنا يتم استدعاء طفرة إضافة / استقبال مستخدم باسم المستخدم الخاص به ، وكذلك تسجيل النتيجة في ذاكرة التخزين المؤقت لاستخدامه مرة أخرى في أجزاء أخرى من التطبيق.

بعد تطبيق نموذج تسجيل الدخول ، يكون العنصر التالي هو الدردشة.

مرة أخرى ، لن نتطرق إلى التصميم ، حيث يمكن العثور على الرمز بالكامل هنا .

نحن نستخدم وظيفة الاشتراك لتلقي إشعارات حول رسالة دردشة جديدة ومعالجة هذا الخيط فقط عندما لا يتم إنشاء الرسالة من قبل المستخدم الحالي ، لأنه بخلاف ذلك ، ستنتقل الرسالة بالفعل إلى ذاكرة التخزين المؤقت apollo:

 useSubscription(MESSAGE_CREATED, { onSubscriptionData: ({ client, subscriptionData: { data: { messageCreated } } }) => { const { getLast100Messages } = client.readQuery({ query: GET_LAST_100_MESSAGES }); if (messageCreated.user.id !== id) { client.writeQuery({ query: GET_LAST_100_MESSAGES, data: { getLast100Messages: [ ...getLast100Messages, messageCreated ] } }); } } }); 

نقطة أخرى مثيرة للاهتمام ، عند تنزيل الدردشة مع الرسائل الموجودة فيها ، سيتم عرض أقدم رسالة في الجزء العلوي من الشاشة ، وهذا أمر غير مألوف للمستخدمين ، وسوف نجعل سلوك التطبيق أكثر طبيعية ، لهذا نضيف أسطر التعليمات البرمجية التالية:

 const scrollEl = useRef(null); … <Content ref={scrollEl} onContentSizeChange={() => { scrollEl.current.wrappedInstance.scrollToEnd({ animated: true }); }} > 

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

ما تبقى من الكود غير منطقي في الاعتبار ، لأنه مشابه لما تم بالفعل ، يتم تخزين تطبيق التطبيق في المستودع .

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