ما الفرق بين socket.io و websockets في node.js

websockets  هي طريقة اتصال غير متزامن (asynchronous communication) من Client إلى Server , يتم الاتصال عبر منفذ TCP واحد عبر برتوكول WS يتم استخدامه من قبل Client و Server حيث يمكن  Client و Server إرسال الرسائل إلى بعضهما في نفس الوقت. 

في هذا لمثال توضح طريقة الاتصال بين Client و Server

// Create a socket instance
var socket = new WebSocket('ws://localhost:8080');

// Open the socket
socket.onopen = function(event) {
	
	// Send an initial message
	socket.send('I am the client and I\'m listening!');
	
	// Listen for messages
	socket.onmessage = function(event) {
		console.log('Client received a message',event);
	};
	
	// Listen for socket closes
	socket.onclose = function(event) {
		console.log('Client notified socket has closed',event);
	};
	
	// To close the socket....
	//socket.close()
	
};

socket.io هي واجهة برمجة تطبيقات websockets ، تستخدم لتحديد إذا كان سيتم إنشاء اتصال باستخدام websockets ، أيضا يمكنه إنشاء واجهة برمجة التطبيقات Node.js 

في المثال يوضح  كيف يتم إنشاء socket

// Create SocketIO instance, connect
var socket = new io.Socket('localhost',{
	port: 8080
});
socket.connect(); 

// Add a connect listener
socket.on('connect',function() {
	console.log('Client has connected to the server!');
});
// Add a connect listener
socket.on('message',function(data) {
	console.log('Received a message from the server!',data);
});
// Add a disconnect listener
socket.on('disconnect',function() {
	console.log('The client has disconnected!');
});

// Sends a message to the server via sockets
function sendMessageToServer(message) {
	socket.send(message);
}

من مزايا استخدام  socket.io

1. لديه اتصال تلقائي (autoconnect) 
2. لديه بروتوكول اتصال مصمم مسبقًا
3. يتكامل مع خدمات مثل redis 

حتى تفهم الفرق بينهما يجب أن نتكلم عن المشاكل التي يقومان بحلها, قبل وجود الwebsockets كان للحصول على بيانات يقوم العميل بإرسال طلب ويقوم الخادم بإرسال رد, ومن ثم ينغلق الإتصال بينهما , حسناً في حالة إن أردنا الحصول على بيانات حية (real time data) لم يكن ذلك سهلاً, فكان يجب عليك أن تقوم بإرسال طلب كل فترة زمنية قصيرة للحصول على أحدث البيانات

setInterval(function(){
	fetch(url)
      .then(res=>data=res.data)
},1000)

كالمثال في الأعلى, يقوم العميل بإرسال طلب كل ثانية بغرض التأكد من أن البيانات التي لديه هي أحدث بيانات لدى السيرفر,

ولكن تلك الطريقة لم تكن جيدة بشكل كبير حيث أن تكلفة إرسال ومعالجة الطلب والرد كل ثانية مجهد بالنسبة لكلاً من الخادم والعميل

وهنا تم إنشاء الwebsocket وهى بإختصار عبارة عن طبقة من الإتصال مبنية فوق بروتوكول http2 فكرتها أن يقوم العميل بإرسال طلب الإتصال حتى يتم فتح إتصال بينه وبين الخادم ومن ثم يكون كلاً من الخادم والعميل قادرين على إرسال وإستقبال الرسائل في اي وقت دون الحاجة لإنشاء طلب جديد كل مرةٍ .

إذا ما هى الsocket.io? هي مكتبة يتم إستخدامها للتعامل مع البيانات الحية , تم بناؤها فوق الwebsocket ولها مميزات عديدة عن إستخدامك الwebsocket ,فمثﻻً بعض المتصفحات القديمة لا تدعم إستخدام الwebsocket في هذه الحالة تقوم الsocket.io بإستخدام الطريقة التقليدية للتعامل مع البيانات الحية , أيضا تقوم بإعادة الإتصال في حالة إنقطاعه بشكل تلقائى, على عكس الwebsocket لم تكن تقوم بإعادته تلقائياً بل كان يجب عليك أن تقوم بتلك المهمة بنفسك

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

وتعتبر socketIo مكتبة تم بناؤها على ال Websockets ويمكنك ملاحظة الفروقات بينهما في المقارنة التالية

socketIo

• لديه اتصال ذاتي  auto connection
• لديه غرف rooms
• لديه بروتوكول اتصال مصمم مسبقا

• لديه دعم جيد لتسجيل الدخول

• لديه دعم للمتصفحات القديمة في حالة لا تدعم Websockets

• لديها مجتمع كبير لأنها مكتبة (لا يمكن أن يكون لديك مجتمع لـ HTTP أو Webockets هي مجرد بروتوكولات)

• وبالطبع لأنها مكتبة لا تحتاج لتصميم وتنفيذ جميع المهما بنفسك فبالتأكيد توفر لك هذه المهما الأساسية

أما بالنسبة ل Websockets

• لديك التحكم الكامل ، من خلال البناء من الصفر ، هذا يمكن أن يكون جيداً أو سيئاً.

• عليك تصميم البنية الخاصة بك

• ليس لديك اتصال ذاتي  auto connection ، يمكنك تنفيذها بنفسك إذا كنت تريد ذلك.

• ليس لديه دعم احتياطي fallback  للمتصفحات القديمة 

WebSocket هو بروتوكول الاتصال الذي يوفر اتصالاً ثنائي الاتجاه بين العميل والخادم عبر TCP. يظل WebSocket مفتوحاً طوال الوقت، لذا فهو يسمح بنقل البيانات في الوقت الفعلي (real time). عندما يقوم العملاء بإرسال الطلب إلى الخادم، فإنه لا يغلق الاتصال عند تلقي الاستجابة، بل يستمر وينتظر العميل أو الخادم لإنهاء الطلب.

ميزاته:

• يساعد WebSocket في الاتصال في الوقت الفعلي بين العميل وخادم الويب.
• يساعد هذا البروتوكول في التحول إلى cross-platform في عالم ال real-time بين الخادم والعميل.
• يتيح أيضاً للأعمال التجارية في جميع أنحاء العالم الحصول على تطبيق ويب في الوقت الفعلي لتعزيز وزيادة الجدوى.
• الميزة الرئيسية أنه يعتمد على اتصال HTTP حيث أنه يوفر اتصال مزدوج الاتجاه.

إليك مخطط له:

لماذا نحتاجه:

• يوفر اتصالًا ثنائي الاتجاه ، مما يساعد في استمرار الاتصال الذي تم إنشاؤه بين العميل وخادم الويب.
• كما أنه يفي بالمعايير ويوفر الدقة والكفاءة في أحداث التدفق (من وإلى) مع زمن انتقال ضئيل negligible latency.
• WebSocket يزيل الحمل ويقلل من التعقيد.
• يجعل الاتصال في الوقت الفعلي سهل وفعال.

Socket.IO هي مكتبة تتيح الاتصال في الوقت الفعلي مع نمط اتصال full-duplex  بين العميل وخوادم الويب. ويستخدم بروتوكول WebSocket لتوفير الواجهة. وكلاً من WebSocket vs Socket.io هما مكتبات تعتمد على الأحداث (مقادة بال event).

• من جانب العميل: هي المكتبة التي تعمل داخل المتصفح.
• من جانب الخادم: مكتبة Node.js.

ميزاته:

• يساعد في البث إلى مآخذ متعددة في وقت واحد ويتعامل مع الاتصال بشفافية.
• يعمل على جميع المنصات أو الخادم أو الجهاز ، مما يضمن المساواة والموثوقية والسرعة.
• يقوم تلقائياً بترقية المتطلبات إلى WebSocket إذا لزم الأمر.
• هو بروتوكول نقل مخصص في الوقت الفعلي. تنفيذه يكون فوق البروتوكولات الأخرى
• يتطلب استخدام كلا المكتبتين من جانب العميل بالإضافة إلى مكتبة من جانب الخادم.
• يعمل IO على الأحداث القائمة على العمل "work-based events". هناك بعض الأحداث المحجوزة التي يمكن الوصول إليها باستخدام Socket على جانب الخادم مثل Connect و message و Disconnect و Ping و Reconnect. هناك بعض الأحداث المحجوزة القائمة على العميل مثل الاتصال وخطأ الاتصال ومهلة الاتصال وإعادة الاتصال وما إلى ذلك.

لماذا نحتاجه:

• يتعامل مع مستوى الدعم المتنوع "various support level" والتناقضات "inconsistencies" من المتصفح.
• تتعامل مع التدهورات الناتجة من استخدام البدائل التقنية لتوفر اتصال  full-duplex في الوقت الفعلي.

بعض المقارنة بينهم:

• WebSocket هو البروتوكول الذي تم إنشاؤه عبر اتصال TCP. بينما Socket هي مكتبة تعمل مع WebSocket.
• WebSocket يوفر الاتصال عبر TCP ، بينما Socket.io هي مكتبة لتجريد اتصالات WebSocket.
• لا يحتوي WebSocket على خيارات fallback، بينما يدعمها Socket.io.
• WebSocket هي التقنية ، بينما Socket.io هي مكتبة لـ WebSocket.
• WebSocket  لايدعم ال broadcasting بينما Socket يدعمها.
• Proxy و load balancer غير مدعومين في WebSocket. بينما مدعومين في socket.
• Socket يوفر الاتصال القائم على الحدث بين المتصفح والخادم. بينما WebSocket يوفر اتصال مزدوج الاتجاه لاتصالات TCP.
•