गलत धारणाएं
WebSocket और Socket.IO के बारे में कुछ सामान्य गलत धारणाएँ हैं:
पहली ग़लतफ़हमी यह है कि सॉकेट.आईओ का उपयोग करना वेबसोकेट का उपयोग करने की तुलना में काफी आसान है जो ऐसा प्रतीत नहीं होता है। नीचे दिए गए उदाहरण देखें।
दूसरी गलत धारणा यह है कि ब्राउज़र में WebSocket को व्यापक रूप से समर्थित नहीं किया गया है। अधिक जानकारी के लिए नीचे देखें।
तीसरी गलतफहमी यह है कि सॉकेट.आईओ पुराने ब्राउज़र पर कमबैक के रूप में कनेक्शन को डाउनग्रेड करता है। यह वास्तव में मानता है कि ब्राउज़र पुराना है और सर्वर के लिए एक AJAX कनेक्शन शुरू करता है, जो बाद में कुछ ट्रैफ़िक का आदान-प्रदान होने के बाद WebSocket का समर्थन करने वाले ब्राउज़र पर अपग्रेड हो जाता है। जानकारी के लिए नीचे देखें।
मेरा प्रयोग
मैंने WebSocket और Socket.IO के बीच अंतर प्रदर्शित करने के लिए एक npm मॉड्यूल लिखा:
यह सर्वर-साइड और क्लाइंट-साइड कोड का एक सरल उदाहरण है - क्लाइंट वेबस्केट या सॉकेट.आईओ का उपयोग करके सर्वर से कनेक्ट होता है और सर्वर 1s अंतराल में तीन संदेश भेजता है, जो क्लाइंट द्वारा डोम में जोड़े जाते हैं।
सर्वर साइड
Express.js ऐप में भी ऐसा करने के लिए WebSocket और Socket.IO का उपयोग करने के सर्वर-साइड उदाहरण की तुलना करें:
WebSocket सर्वर
Express.js का उपयोग करके WebSocket सर्वर उदाहरण:
var path = require('path');
var app = require('express')();
var ws = require('express-ws')(app);
app.get('/', (req, res) => {
console.error('express connection');
res.sendFile(path.join(__dirname, 'ws.html'));
});
app.ws('/', (s, req) => {
console.error('websocket connection');
for (var t = 0; t < 3; t++)
setTimeout(() => s.send('message from server', ()=>{}), 1000*t);
});
app.listen(3001, () => console.error('listening on http://localhost:3001/'));
console.error('websocket example');
स्रोत: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
सॉकेट.आईओ सर्वर
Express.js का उपयोग करके सॉकेट.IO सर्वर उदाहरण:
var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
console.error('express connection');
res.sendFile(path.join(__dirname, 'si.html'));
});
io.on('connection', s => {
console.error('socket.io connection');
for (var t = 0; t < 3; t++)
setTimeout(() => s.emit('message', 'message from server'), 1000*t);
});
http.listen(3002, () => console.error('listening on http://localhost:3002/'));
console.error('socket.io example');
स्रोत: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
ग्राहक की ओर
ब्राउज़र में ऐसा करने के लिए WebSocket और Socket.IO का उपयोग करने वाले क्लाइंट-साइड उदाहरण की तुलना करें:
WebSocket क्लाइंट
वेनिला जावास्क्रिप्ट का उपयोग करते हुए WebSocket क्लाइंट उदाहरण:
var l = document.getElementById('l');
var log = function (m) {
var i = document.createElement('li');
i.innerText = new Date().toISOString()+' '+m;
l.appendChild(i);
}
log('opening websocket connection');
var s = new WebSocket('ws://'+window.location.host+'/');
s.addEventListener('error', function (m) { log("error"); });
s.addEventListener('open', function (m) { log("websocket connection open"); });
s.addEventListener('message', function (m) { log(m.data); });
स्रोत: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
सॉकेट.आईओ क्लाइंट
वेनिला जावास्क्रिप्ट का उपयोग कर सॉकेट.आईओ ग्राहक उदाहरण:
var l = document.getElementById('l');
var log = function (m) {
var i = document.createElement('li');
i.innerText = new Date().toISOString()+' '+m;
l.appendChild(i);
}
log('opening socket.io connection');
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });
स्रोत: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
प्रसार यातायात
नेटवर्क ट्रैफ़िक में अंतर देखने के लिए आप मेरा परीक्षण चला सकते हैं । यहाँ परिणाम हैं जो मुझे मिले:
WebSocket परिणाम
2 अनुरोध, 1.50 केबी, 0.05 एस
उन 2 अनुरोधों में से:
- HTML पेज ही
- WebSocket में कनेक्शन अपग्रेड
(कनेक्शन अपग्रेड अनुरोध 101 स्विचिंग प्रोटोकॉल प्रतिक्रिया के साथ डेवलपर टूल पर दिखाई देता है।)
सॉकेट.आईओ परिणाम
6 अनुरोध, 181.56 केबी, 0.25 एस
उन 6 अनुरोधों में से:
- HTML पेज ही
- सॉकेट.आईओ का जावास्क्रिप्ट (180 किलोबाइट)
- AJAX के पहले लंबे मतदान का अनुरोध
- AJAX के दूसरे लंबे मतदान का अनुरोध
- तीसरे लंबे मतदान AJAX के अनुरोध
- WebSocket में कनेक्शन अपग्रेड
स्क्रीनशॉट
WebSocket परिणाम जो मुझे लोकलहोस्ट पर मिले:
सॉकेट.आईओ परिणाम जो मुझे लोकलहोस्ट पर मिले:
अपने आप का परीक्षण करें
जल्दी शुरू:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
Open http: // localhost: 3001 / अपने ब्राउज़र में, Shift + Ctrl + I के साथ डेवलपर टूल खोलें, नेटवर्क टैब खोलें और वेबसर्केट संस्करण के लिए नेटवर्क ट्रैफ़िक देखने के लिए पृष्ठ को Ctrl + R के साथ पुनः लोड करें।
Open http: // localhost: 3002 / आपके ब्राउज़र में, Shift + Ctrl + I के साथ डेवलपर टूल खोलें, नेटवर्क टैब खोलें और Socket.IO संस्करण के लिए नेटवर्क ट्रैफ़िक देखने के लिए Ctrl + R के साथ पृष्ठ को फिर से लोड करें।
स्थापना रद्द करने के लिए:
# Uninstall:
npm rm -g websocket-vs-socket.io
ब्राउज़र संगतता
जून 2016 तक ओपेरा मिनी को छोड़कर सभी चीजों पर काम करता है।
यह जून 2016 के अनुसार CanS I का उपयोग करने पर WebSocket की ब्राउज़र संगतता है :
अप-टू-डेट जानकारी के लिए http://caniuse.com/websockets देखें ।