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:


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

الرسائل حاليًا تخزن في الذاكرة، وتكرر نسخة منها وتحفظ في IndexedDB باستخدام redux middleware، لكنها لا تعرض مجدّدًا عند تحديث الصفحة، انظر ردي على @assassinateur

أونلاين يعني أن socket متصلة فقط، عند انقطاعها يبث الخادم حدثًا لكل الأطراف المتصلة بأن الطرف الفلاني قد أصبح offline، لتنعكس هذه التغييرات في الواجهة.

socket وحيدة لكل عميل تتولى الدردشة مع كل الأطراف، وsocket أخرى تتولى البحث عن الخواديم المحلية باستخدام bonjour وإيصالها للمتصفح.