هذا هو الجزء الثاني من المقال (الأول
هنا ) المكرس لإنشاء دردشة باستخدام 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(
لن أصف إنشاء النموذج بالتفصيل ، أعتقد أنك قد رأيت هذا بالفعل عدة مرات ، وسأقول فقط أن رمز نموذج تسجيل الدخول يمكن العثور عليه
هنا ، للبساطة قررت عدم إضافة ترخيص وحقل كلمة مرور ، ومع ذلك ، إذا كنت ترغب في ذلك ، يمكنك بسهولة القيام بذلك بنفسك .
سوف أتناول نقطة مثيرة للاهتمام:
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 }); }} >
الآن ، عند تلقي البيانات الأولية أو عند إضافة رسالة جديدة ، ستنتقل المحادثة بسلاسة إلى آخر رسالة.
ما تبقى من الكود غير منطقي في الاعتبار ، لأنه مشابه لما تم بالفعل ، يتم تخزين تطبيق التطبيق في
المستودع .
بعد تنفيذ كافة وظائف التطبيق ، يبقى فقط اختبار قابلية تشغيل التطبيق مع الواجهة الخلفية من المقالة السابقة. يبدو التطبيق الذي تم تشغيله على المحاكي كما يلي: