Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Java
Code

بناء تطبيق محادثة في الوقت الحقيقي مع معامل والتمهيد الربيع

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Getting Started with Modulus.
Build a Real-Time Chat Application With Modulus and Python
The Hitchhiker's Guide to Docker and Modulus
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Arabic (العربية/عربي) translation by ansgaradh (you can also view the original English article)

في هذا الدرس ، سنستخدم التمهيد الربيع لبيئة تطوير الويب ، Websockets للاتصال في الوقت الحقيقي ، Tomcat لحاوية تطبيق Java ، Gradle لبناء وإدارة التبعيات ، Thymeleaf لتقديم القالب ، MongoDB لتخزين البيانات ، وأخيرًا هناك لن يكون XML لتكوينات الفول.  ولجعلك مصدر إلهام لك ، في نهاية هذه المقالة ، سترى تطبيقًا يعمل بالكامل مثل ذلك الموضح أدناه. 

Realtime Chat Application Chat Screen

1. السيناريو 

  1. Doe يفتح صفحة الدردشة للتواصل مع أصدقائه. 
  2. تتم مطالبته باختيار لقب. 
  3. يدخل صفحة الدردشة ويرسل رسالة.  يتم إرسال الرسالة إلى نقطة نهاية Spring MVC ليتم حفظها في قاعدة البيانات والبث. 
  4. تعالج نقطة النهاية المحددة الرسالة وتبث هذه الرسالة لجميع العملاء المتصلين بنظام الدردشة. 

2. بناء التبعيات وتكوين Gradle 

قبل الشروع في الهيكل الداخلي للمشروع ، اسمحوا لي أن أشرح أي مكتبات سنستخدمها لميزات المشروع المذكورة أعلاه ، وإدارتها باستخدام Gradle.  عند نسخ المشروع من GitHub ، سترى ملفًا باسم build.gradle في الدليل الجذر للمشروع كما هو موضح أدناه. 

لن أغوص في داخلي Gradle ، لكن دعني أشرح الأجزاء التي نحتاجها لمشروعنا.  تم تصميم Spring Boot بشكل أساسي لتطوير تطبيقات مستقلة في تنسيق jar .  في مشروعنا ، سنقوم بتوليد مشروع الحرب بدلا من الجرة .  وذلك لأن Modulus يحتاج إلى ملف حرب لنشر المشروع تلقائيا إلى السحابة. 

من أجل توليد ملف حرب ، استخدمنا تطبيق البرنامج المساعد: "الحرب" .  ويتوقع معامل أيضا أن يكون اسم الحرب ROOT.war افتراضيا ، وهذا هو السبب في أننا استخدمنا: 

عند تشغيل مهمة Gradle build ، سيتم إنشاء ملف حرب لنشره في حاوية Tomcat.  وأخيرًا ، كما يمكنك التخمين ، يكون قسم التوابع لمكتبات الجهات الخارجية لاتخاذ إجراءات محددة. 

هذا كله مخصص لقسم تبعيات المشروع ، ويمكنك الرجوع إلى دليل مستخدم Gradle لمزيد من المعلومات عن Gradle. 

3. تصميم البرمجيات 

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

3.1  نموذج

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

يساعدنا كائن النطاق هذا في تمثيل رسالة الدردشة على أنها JSON عند الحاجة.  لدينا نموذج على ما يرام ، لذلك دعونا الاستمرار مع وحدات التحكم.  

3.2.  مراقب 

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

  1. رسالة الدردشة حفظ الطلبات 
  2. سرد أحدث رسائل الدردشة 
  3. خدمة صفحة تطبيق الدردشة 
  4. خدمة صفحة تسجيل الدخول 
  5. بث رسائل الدردشة للعملاء 

هنا يمكنك رؤية نقاط النهاية الإجمالية: 

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

كما ترى ، هناك نوعان من نقاط النهاية / الرسائل : GET و POST.  عندما تقوم بإجراء طلب POST إلى نقطة نهاية / رسائل ذات حمولة رسائل مناسبة ، فسيتم إرسالها تلقائيًا إلى فئة ChatMessageModel ، وسيتم حفظ الرسالة إلى MongoDB.  بعد التوفير الناجح ، سيتم دفعه تلقائيًا إلى العملاء.  و لكن كيف؟ في هذا الإجراء ، يوجد تعليق توضيحي SendTo ("/ topic / newMessage") .  سيؤدي هذا إلى إرسال المحتوى الذي تم إرجاعه من الوظيفة إلى العملاء.  والمحتوى المرتجع كما هو موضح أدناه: 

هذه هي آخر رسالة من قاعدة البيانات: 

Sample JSON message

سيتم تحويل الرسالة أعلاه إلى تنسيق للاتصال WebSocket.  سيتم التعامل مع رسالة القناة هذه من جانب العميل مع مكتبة جافا سكريبت خارجية ، وسيتم التعامل معها في الأقسام التالية. 

لعمليات db الرسالة ، يتم استخدام spring-boot-startter-data-mongodb .  تساعدنا هذه المكتبة في عمليات مستودع التخزين ، كما أن إنشاء كائن مستودع لـ MongoDB أمر بسيط للغاية.  يمكنك رؤية المثال ChatMessageRepository أدناه: 

إذا قمت بإنشاء واجهة وقمت بتوسيع MongoRepository <؟، String> ، فسوف تتمكن من استخدام عمليات CRUD تلقائيًا مثل find () و findAll ()و save () وما إلى ذلك. 

كما ترى ، يتوقع MongoRepository كائن مجال.  لقد حددنا هذا النموذج بالفعل في قسم الطراز من البرنامج التعليمي.  في هذا المستودع ، قمنا بتعريف وظيفة مخصصة تسمىfindAllByOrderByCreateDateAsc () . 

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

في ChatMessageController ، استخدمنا هذه الوظيفة ، وكذلك استخدمنا الوظائف الافتراضية لـ MongoRepository : 

يتم استخدام findAll كمعلمة للفرز وترقيم الصفحات.  يمكنك إلقاء نظرة على الدليل على موقع Spring لمزيد من التفاصيل عن Spring JPA. 

3.3.  رأي 

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

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

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

ها هي صفحة الدردشة: 

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

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

كما ترى ، فإن بنية البرامج هنا بسيطة جدًا وسهلة التطوير.   لدينا كود جاهز للإنتاج ، ولنقوم بنشره إلى Modulus. 

يعتبر Modulus واحدًا من أفضل أنظمة PaaS لنشر وتغيير ومراقبة تطبيقك باللغة التي تختارها. 

4. النشر 

 4.1.  المتطلبات الأساسية 

قبل نشر التطبيق ، دعنا ننشئ قاعدة بيانات باستخدام لوحة إدارة Modulus.  أنت بحاجة إلى حساب Modulus لإنشاء ونشر تطبيق dba ، لذا يرجى إنشاء حساب إذا لم يكن لديك حساب . 

 انتقل إلى لوحة بيانات Modulus وأنشئ قاعدة بيانات:

Database creation

على شاشة إنشاء قاعدة البيانات ، يرجى تقديم اسم قاعدة البيانات ، حدد إصدار MongoDB (لقد استخدمت 2.6.3 ، لذا سيكون من الأفضل إذا اخترت 2.6.3 أيضًا) ، وأخيرًا حدد مستخدمًا لتطبيق عمليات قراءة / كتابة قاعدة البيانات. 

Create Database

يمكنك الحصول على URL MongoDB بعد إنشاء قاعدة البيانات بنجاح.   سنستخدم عنوان URL الخاص بـ MongoDB في متغيرات البيئة ليتم استخدامه بواسطة تطبيق Spring Boot. 

لتعيين متغيرات البيئة لـ MongoDB ، يجب أن يكون لديك تطبيق.  انتقل إلى Dashboard وانقر على " المشاريع" .  في هذه الصفحة ، انقر فوق " إنشاء مشروع جديد". 

لمتابعة تهيئة متغيرات البيئة ، يرجى الانتقال إلى Dashboard والنقر فوق Projects.  حدد المشروع الخاص بك ، وانقر فوقالإدارة.   قم بالتمرير لأسفل الصفحة وتعيين متغيرات البيئة مع المفتاحSPRING_DATA_MONGODB_URI وقيمة URI الخاص بقاعدة البيانات: 

Environment Variables

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

 4.2  النشر مع CLI 

من أجل نشر المشروع ، قم بتشغيل مهمة إنشاء قاعدة جدل: 

ستقوم هذه المهمة بإنشاء ملف حرب يسمى ROOT.war .   انسخ هذا الملف إلى مجلد جديد وقم بتثبيت معامل CLI إذا لم تقم بذلك. 

تسجيل الدخول إلى النظام 

الآن تنفيذ الأمر التالي لنشر ROOT.war إلى Modulus. 

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

هذا كل ما في النشر! 

5. الخلاصة 

الهدف الرئيسي من هذا البرنامج التعليمي هو إظهار كيفية إنشاء تطبيق دردشة في الوقت الحقيقي باستخدام Booting Spring و WebSockets و MongoDB. 

من أجل تشغيل المشروع في الإنتاج ، يتم استخدام Modulus كمزود PaaS.   لدى Modulus خطوات بسيطة جدًا للنشر ، ولديه أيضًا قاعدة بيانات داخلية (MongoDB) لمشاريعنا.   بجانب ذلك ، يمكنك استخدام أدوات مفيدة جدًا في لوحة معلومات برنامج المعالجة مثل السجلات والإشعارات والتحجيم التلقائي وإدارة Db والمزيد. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.