4 min readWritten in Arabic
HTTP vs WebSocket: what I learned adding live order tracking
شغال علي مشروع واحتاجت اضيف فيه فيتشر tracking لـ orders ف بدأت اتعلم اذاي استخدم الـ WebSocket في البروجيكت
The demo from the post: a Node.js + Express WebSocket server pushing new posts to a React feed.
01 Why
شغال علي مشروع واحتاجت اضيف فيه فيتشر tracking لـ orders ف بدأت اتعلم اذاي استخدم الـ WebSocket في البروجيكت لكن حسيت إني بحفظ كود من غير ما أفهم فعلاً هو بيشتغل إزاي.
فقررت أبدأ من الأول بعيداً عن الكود خالص واحاول وأفهم الفرق بين بروتوكول HTTP اللي متعود عليه، وبروتوكول WebSocket، وحابب أشارك معاكم اللي اتعلمته:
02 HTTP
في بروتوكول HTTP، الاتصال بيكون unidirectional، يعني الـ Client هو اللي بيبدأ ويبعت Request للسيرفر، والسيرفر بيرد عليه بـ Response، وبعدها الـ connection دا بيتقطع وبتنتهي السايكل.
03 The problem
امتى بقى تظهر المشكلة؟ المشكلة بتبدأ لما نحتاج نجيب داتا بشكل real-time من السيرفر، زي مثلًا لو عندي blog بيتنشر فيه posts بشكل مستمر، وعايز أول ما ينزل بوست جديد يوصل لكل الأجهزة اللي فاتحة الموقع في نفس اللحظة (device 1, device 2, device 3) من غير ما كل جهاز يبعت طلب للسيرفر.. او حتي احدد ال devices اللي هيوصلها الداتا ذي في حالة شات مثلا مش هبعت لكل ال devices.. بس الفكرة يعني اني عايز اوصل الداتا بشكل لحظي من غير ما اللي هيستقبل الداتا يبعت ريكوست.
04 Polling
لو استخدمت HTTP هنا، هضطر اعمل Polling، يعني أبعت Request كل فترة ذي اني اعمل setTimeout خمس ثواني مثلا وأسأل السيرفر لو فيه بوستات جديدة.
دا حل اه بس هيسبب مشاكل.. مشاكل ذي انه بيزود الحمل على السيرفر بسبب عدد الريكوستات الكتير غير انه ممكن في أغلب الأحيان ميبقاش فيه بيانات جديدة، وساعتها الريكوستات دي تبقى هدر للموارد بلا هدف.
05 Long polling
او اني اعمل Long Polling بمعني، ان الكلاينت بيبعت ريكوست للسيرفر، والسيرفر بيحتفظ بالـ connection مفتوح لحد ما يحصل update بعدها يرد، أو لحد ما يحصل Timeout. بمجرد ما الكلاينت يستقبل الـ response، بيبعت request جديد تاني. دي تعتبر تحسين على الـ Polling العادي لأنها بتوفر عدد الريكوستس اللي مفيهاش داتا، لكنها لسه بتعتمد على فكرة الـ req, res في الاساس ف بالتالي لسا فيه عبء علي السيرفر و ريكوستس متكررة مستمرة و الـ http مش هيكون الخيار الاحسن لو عايز اعمل real time connection ومحتاج بديل احسن.
06 WebSocket
هنا بقا ييجي الـ WebSocket.
بروتوكول مختلف شوية.. بيعمل connection دائم بين الـ client و الـ server، والاتصال ده بيكون bidirectional، يعني الطرفين يقدروا يبعتوا بيانات لبعض في أي وقت، من غير ما نبدأ request جديد كل مرة لحد ما طرف منهم يعمل close للـ connection.
الفكرة ببساطة انه أول ما بيتم establish connection من الكلاينت مع السيرفر.. السيرفر يقدر يبعت messages للـ client كل ما يحصل event معين (زي ما يتنشر بوست جديد)، والـ client بيكون عنده logic يتعامل مع كل message حسب نوعها.
مثلا: السيرفر يبعت message من نوع newPost الكلاينت يعرض البوست فورًا. أو message من نوع notification ف الكلاينت يظهر toaster او popup.
07 Where it's used
الويب سوكيت تقنية مشهورة جدا ومفيش غني عنها لاي ديفلوبر وموجودة ف كل حاجة بتستخدمها: notifications, chat applications, social media platforms, online games, collaboration tools.
08 Demo
دا مثال بسيط، كود بسيط جدا node js + express + react طبقته علي فكرة البوستس وبستعرضه في الفيديو.
بس كدا. لو حد عنده تجربة أو resources عن WebSocket وعن ال best practices لاستخدامه جوا ريأكت ونيكست ياريت يشاركني بيها ❤️