47

خادوم دردشة محلية كتبته بـNode.js/Express/Socket.IO/React/Redux/Webpack

  • forabi

في الفترة الماضية كنت أعمل على تطبيق يجمع ما تعلمته طيلة الشهور الفائتة (React + Redux + Webpack، ثلاث مكونات أخذت تتصاعد شعبيّتها مؤخّرًا)، فقمت بكتابة خادوم وعميل دردشة بشكل مشابه لـWhatsApp Web وبواجهة مصممة وفق Material Design، يعمل ضمن المتصفحات على الشبكة المحلية، حيث يمكن لأي جهاز على الشبكة إنشاء الخادوم ثم يمكن للأجهزة الأخرى الانضمام إليه وبدء الدردشة سويّة عبر WebSockets. يتم اكتشاف الخواديم تلقائيًّا باستخدام بروتوكول Zeroconf/Bonjour، وتستخدم Socket.IO لنقل رسائل الدردشة.

بالإضافة إلى ما سبق، استخدمت:

  • Babel طبعًا

  • Reselect لـRedux

  • Promsie middleware لـRedux

  • CSS Modules

  • ESLint

  • VSCode

فيديو يستعرض المشروع:

الخطوات القادمة:

  • تشفير الرسائل باستخدام asymmetric key encryption باستخدام واجهة التشفير WebCrypto API في المتصفحات الحديثة، يتم تطبيق التشفير بشكل شفاف (transparent) عن طريق middleware لـRedux يشفر الرسائل الصادرة ويفك تشفير الرسائل الواردة ويمررها لـلـstore.

  • تحسين المظهر (المشروع ليس إلا proof of concept)

المصدر متوفر على GitHub:


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

الرسائل حاليًّا تخزن في الذاكرة فقط، لكنني بدأت العمل على تخزينها ضمن IndexedDB باستخدام redux middleware أكتبه بنفسي (حاليًّا يتم تخزين الرسائل، ولكن لا يتم عرضها عند تحديث الصفحة)، المشكلة هي أن تخزين الرسائل يعني ربط كل رسالة بالخادوم الذي تولى نقلها، ليتم عرضها فقط عند الاتصال بنفس الخادوم مجدّدًا، وهذا يعني أن كل خادوم يجب أن يحتفظ بمعرفه الخاص، ويعني عمل authentication لكل client، وعندها سينتقل الموضوع إلى استخدام قاعدة بيانات، ويزداد تعقيدًا... لكنني أعمل على ذلك، ليس فقط من أجل هذا، بل أيضًا من أجل تخزين الرسائل لإيصالها إلى الأطراف غير المتصلة عند اتصالها مجدّدًا.

يمكنك بسهولة نقله إلى خادوم غير محلي، وهذا ما كنت أفكر بفعله، قم بحذف كل ما يتعلق بـBounjour.

يمكنك تجريب استخدام DDP للتواصل

شاهدت مؤخرا تطبيق شات مشابه مبني بmeteor و DDP

هممم، لم أطلع على هذا. عمومًا أنا أحب الابتعاد عن كل شيء متعلق بـMeteor. لا أحب أطر العمل التي تسيطر على كل شيء في مشروعك، خصوصًا إن كانت تعمل بطريقة سحرية.