yanılgılar
WebSocket ve Socket.IO ile ilgili yaygın yanlış kavramlar vardır:
İlk yanlış anlama Socket.IO'nun kullanılmasının WebSocket'i kullanmaktan çok daha kolay olduğudur. Aşağıdaki örneklere bakın.
İkinci yanlış anlama, WebSocket'in tarayıcılarda yaygın olarak desteklenmemesidir. Daha fazla bilgi için aşağıya bakın.
Üçüncü yanlış anlama Socket.IO'nun bağlantıyı eski tarayıcılarda yedek olarak indirdiğidir. Aslında tarayıcının eski olduğunu ve bir trafik değiştikten sonra daha sonra WebSocket'i destekleyen tarayıcılarda yükseltilen bir AJAX bağlantısı başlattığını varsayar. Ayrıntılar için aşağıya bakın.
Deneyim
WebSocket ve Socket.IO arasındaki farkı göstermek için bir npm modülü yazdım:
Bu, sunucu tarafı ve istemci tarafı kodunun basit bir örneğidir - istemci, sunucuya WebSocket veya Socket.IO kullanarak bağlanır ve sunucu, istemci tarafından DOM'a eklenen 1s aralıklarla üç ileti gönderir.
Sunucu tarafı
Express.js uygulamasında aynısını yapmak için WebSocket ve Socket.IO kullanma sunucu tarafı örneğini karşılaştırın:
WebSocket Sunucusu
Express.js kullanan WebSocket sunucusu örneği:
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');
Kaynak: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
Socket.IO Sunucusu
Express.js kullanan Socket.IO sunucusu örneği:
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');
Kaynak: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
İstemci tarafı
Tarayıcıda aynısını yapmak için WebSocket ve Socket.IO kullanma istemci tarafı örneğini karşılaştırın:
WebSocket İstemcisi
Vanilya JavaScript kullanan WebSocket istemci örneği:
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); });
Kaynak: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
Socket.IO İstemcisi
Vanilya JavaScript kullanan Socket.IO istemci örneği:
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); });
Kaynak: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
Ağ trafiği
Ağ trafiğindeki farkı görmek için testimi çalıştırabilirsiniz . İşte aldığım sonuçlar:
WebSocket Sonuçları
2 istek, 1.50 KB, 0.05 s
Bu 2 talepten:
- HTML sayfasının kendisi
- WebSocket'e bağlantı yükseltme
(Bağlantı yükseltme isteği, 101 Anahtarlama Protokolü yanıtı olan geliştirici araçlarında görülebilir.)
Socket.IO Sonuçları
6 istek, 181.56 KB, 0.25 s
Bu 6 talepten:
- HTML sayfasının kendisi
- Socket.IO'nun JavaScript'i (180 kilobayt)
- ilk uzun oylama AJAX isteği
- ikinci uzun oylama AJAX isteği
- üçüncü uzun yoklama AJAX isteği
- WebSocket'e bağlantı yükseltme
Ekran görüntüleri
Localhost üzerinde aldığım WebSocket sonuçları:
Localhost üzerinde aldığım Socket.IO sonuçları:
Kendini test et
Hızlı başlangıç:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
Açık http: // localhost: 3001 / tarayıcınızda, Shift + Ctrl + I açık geliştirici araçları, Ağ sekmesini açın ve WebSocket versiyonu için ağ trafiğini görmek için Ctrl + R ile sayfayı yeniden yükleyin.
Açık http: // localhost: 3002 / tarayıcınızda, Shift + Ctrl + I açık geliştirici araçları, Ağ sekmesini açın ve Socket.IO versiyonu için ağ trafiğini görmek için Ctrl + R ile sayfayı yeniden yükleyin.
Kaldırmak için:
# Uninstall:
npm rm -g websocket-vs-socket.io
Tarayıcı Uyumluluğu
Haziran 2016 itibarıyla WebSocket, IE'nin 9'dan yüksek olduğu Opera Mini hariç her şey üzerinde çalışmaktadır.
Haziran 2016 itibarıyla Kullanabileceğim WebSocket tarayıcı uyumluluğu :
Güncel bilgiler için http://caniuse.com/websockets adresine bakın .