إنشاء تطبيق الخلفية للدردشة عبر الإنترنت أبولو ، Node.js

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

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

إذا كنت كسولًا جدًا في القراءة ، فيمكنك رؤية الشفرة في Github'e على الفور هنا وهنا .

باعتبارها التقنيات الرئيسية للتطبيق ، اخترت node.js framework koa ، وقاعدة بيانات postgresql ، وكذلك خادم GraphQL - apollo-server-koa .

بادئ ذي بدء ، تم إنشاء مشروع koa2 فارغ ، ولهذا استخدمت مولد koa بسيطًا عن طريق تنفيذ الأمر في المحطة الطرفية:

$ koa <project name> 

ثم تم تثبيت التبعيات اللازمة ، أفعل ذلك مع الغزل ، ولكن يمكنك استخدام npm.

 $ yarn add apollo-server-koa knex objection pg 

يتم تثبيت جميع المكتبات اللازمة ، والآن يمكنك كتابة التعليمات البرمجية

للاتصال بقاعدة البيانات ، تحتاج إلى وصف ملفين ، الأول هو db.js ، والذي سيقوم بتصدير مثيل عميل knex ويسمح لنماذجنا بالعمل مع البيانات من قاعدة البيانات ، والثاني هو knexfile.js ، والذي يحتوي على إعدادات اتصال قاعدة البيانات لإنشاء و الهجرات المتداوله.

موصوفة أدناه رمز db.js ، لاحظ أن كافة الإعدادات مأخوذة من متغيرات البيئة:

 const db = require('knex')({ client: 'pg', connection: {   host : process.env.POSTGRES_HOST,   port: process.env.POSTGRES_PORT,   user : process.env.POSTGRES_USER,   password : process.env.POSTGRES_PASSWORD,   database : process.env.POSTGRES_DATABASE } }); module.exports = db; 

رمز knexfile.js متاح هنا .

يمكنك الآن وصف عمليات الترحيل لإنشاء الجدولين اللذين نحتاجهما.

ستكون الجداول نفسها بسيطة قدر الإمكان وتحتوي فقط على الحد الأدنى المطلوب من الحقول. أمر إنشائها أدناه:

 $ knex migrate:make migration_name 

يمكنك عرض ملفات الترحيل هنا .

الآن إنشاء نماذج الكيان رسالة والمستخدم

 class Message extends Model { static get tableName() {   return 'messages'; } $beforeInsert() {   this.created_at = new Date().toISOString(); } static get relationMappings() {   return {     user: {       relation: Model.BelongsToOneRelation,       modelClass: User,       join: {         from: 'messages.user_id',         to: 'users.id'       }     }   }; } } 

بقي الشيء الأكثر إثارة للاهتمام - الاتصال وتكوين apollo-server-koa ، ووصف مخططات graphql والمحللات.

للاتصال apollo-server-koa ، ما عليك سوى إضافة سطور التعليمات البرمجية التالية

app.js:

 const { ApolloServer } = require('apollo-server-koa'); const graphqlSchema = require('./graphqlSchema'); … const apolloServer = new ApolloServer(graphqlSchema); apolloServer.applyMiddleware({ app }); 

شبكة الاتصالات العالمية:

 var { app, apolloServer } = require('../app'); ... apolloServer.installSubscriptionHandlers(server); 

بالإضافة إلى توصيل apollo-server-koa ، قمنا بتضمين القدرة على العمل مع الاشتراكات لإعلام العملاء بأن رسالة جديدة قد وصلت إلى الدردشة.

Apollo-server-koa متصل ، والخطوة التالية هي وصف الرسم البياني graphql مع الأنواع اللازمة للدردشة

 input UserInput { username: String! } input MessageInput { text: String! user_id: ID! } type User { id: ID username: String } type Message { id: ID text: String created_at: String user: User } type Query { getLast100Messages: [Message] } type Mutation { findOrCreateUser(user: UserInput!): User createMessage(message: MessageInput!): Message } type Subscription { messageCreated: Message } 

الدائرة جاهزة ، ونحن تصف الحلول

مثال لمحلل لإرسال رسالة جديدة:

 const Message = require('../../models/message'); const { pubsub, MESSAGE_CREATED } = require('../../utils'); module.exports = { createMessage: async (obj, { message }, context, info) => {   const createdMessage = await Message     .query()     .insert(message);   const resultMessage = await Message     .query()     .eager('user')     .findById(createdMessage.id);   pubsub.publish(MESSAGE_CREATED, { messageCreated: resultMessage });   return resultMessage; }, }; 

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

يمكن العثور على رمز باقي أدوات الحل هنا .

جانب الخادم للدردشة جاهز ، وكيفية التحقق من أن كل شيء يعمل؟

افتح المضيف في متصفحك وسترى ملعب graphql فيه.



في الجزء التالي ، سننشئ تطبيقًا للهاتف المحمول.