أنشئ نظام دردشة باستخدام Rails 5 API Action Cable و ReactJS مع غرف خاصة متعددة وخيار دردشة جماعي

يرجى ملاحظة أن هذا المنشور ليس تعليميًا ويتطلب معرفة Rails 5 ActionCable و ReactJS / Javascript لبناء مكتبة مخصصة.

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

  • Rails 5 واجهة برمجة تطبيقات الواجهة وواجهة ReactJS
  • غرف خاصة متعددة
  • أي عدد إيجابي من المستخدمين في الغرفة (ليس فقط 1-1) أو الدردشة الجماعية

يحتوي نظام الدردشة ، صديقي الموهوب تيم تشانغ ، على:

  1. غرف الدردشة الخاصة متعددة
  2. دردشة متعددة المستخدمين لكل غرفة
  3. حالة متصل / غير متصل لكل مستخدم
  4. في الوقت الحقيقي "الكتابة ..." الحالة
  5. في الوقت الحقيقي قراءة إيصال
هكذا تبدو النتيجة النهائية. (هذه المقالة المثال لن تظهر لك العمل الأمامي على الرغم من)

في هذا المنشور القصير ، سأريك فقط أساس # 1 و 2. يرجى ترك لي تعليقًا أدناه إذا كنت تريد مني أن أريك كيفية إنشاء المبنى رقم 3 ورقم 4 ورقم 5. أنا أستخدم Rails 5 كواجهة برمجة تطبيقات API و ReactJS في النهاية الأمامية.

الخلفية

عند الإنشاء ، ستنشئ Rails مجلدات وملفات القنوات حيث يحدث كل السحر في الوقت الحقيقي :)

التطبيق / قنوات / application_cable / channel.rb
التطبيق / قنوات / application_cable / connection.rb

المصادقة

أولاً ، دعنا نتحقق من طلبات اتصال websocket لخادم Rails داخل connection.rb.

اعتمادًا على جوهرة المصادقة أو الخدمة التي تستخدمها في مشروعك ، يجب تعديل طريقة find_verified_user حسب حاجتك. لدي طريقة تسمى valid_token؟ للتحقق من رمز الوصول وتم تمرير client_id مع طلب websocket. إذا لم تتم المصادقة على الطلب ، فسيتم رفضه.

هيكل البيانات

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

  • المحادثة (غرفة): has_many الرسائل والمستخدمين ومعرف
  • الرسالة: تنتمي إلى محادثة ، لديها مرسل ، بها محتوى نصي
  • المرسل: هو مستخدم

نتيجة لذلك ، قمتُ بإنشاء 3 نماذج:

مشغلات العمل

عندما يتصل عميل (مشترك) أو يبث رسالة (يتكلم) ، سوف تتفاعل الواجهة الخلفية مع الإجراءات. داخل تطبيق / قنوات المجلد ، سأقوم بإنشاء ملف يسمى room_channel.rb.

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

after_create_commit {MessageBroadcastJob.perform_later (self)}

قابلية التوسع

يتم استدعاء رد الاتصال هذا فقط بعد إنشاء الرسالة والتزامها بقاعدة البيانات. أنا أستخدم وظائف الخلفية لمعالجة هذا الإجراء من أجل القياس. تخيل أن لديك الآلاف من العملاء الذين يرسلون الرسائل في نفس الوقت (هذا هو نظام الدردشة ، لماذا لا؟) ، واستخدام وظيفة الخلفية هو شرط هنا.

هنا عندما يحدث البث. سوف ActionCable بث الحمولة إلى الغرفة المحددة مع الحمولة المقدمة.

ActionCable.server.broadcast (room_name ، الحمولة النافعة)

طريق الكابل

ستحتاج إلى إضافة مسار websocket / cable إلى طرقك. rb حتى يتمكن عميلك من الاتصال بنقطة النهاية هذه للبث واستقبال الرسائل.

جبل ActionCable.server => '/ كابل'

وهذا هو الجانب الخلفي! دعنا نلقي نظرة على مكتبة ReactJS الأمامية.

مكتبة العميل

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

أولاً ، قم بتثبيت ActionCableJS عبر npm.

قم بإنشاء ملف ChatConnection.js كإحدى الخدمات في تطبيق ReactJs الخاص بك.

هنا هو الخطاف: في createRoomConnection ، سيحاول العميل الاتصال (بالاشتراك) مع RoomChannel التي أنشأناها في الواجهة الخلفية ، بمجرد اتصاله (مشترك) ، سيتم بثه من اسم الغرفة ChatRoom-id (انظر room_channel. rb أعلاه مرة أخرى) بمجرد اتصاله ، هناك طريقتان سيتم استدعاءهما بشكل متكرر ، هل يمكنك تخمين أي منهما؟

هم: تلقي والتحدث!

يتم استدعاء الأسلوب المستلم عندما يكون هناك رسالة تبث إلى العميل من الخادم ، على العكس ، يتم استدعاء الكلام عندما يبث العميل رسالة إلى الخادم.

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