Socket.io ve websockets arasındaki farklar


459

Node.js içindeki socket.io ve websockets arasındaki farklar nelerdir?
Her ikisi de sunucu push teknolojisi mi? Hissettiğim tek fark,

  1. socket.io, bir olay adı belirterek mesaj göndermeme / yaymama izin verdi.

  2. Socket.io durumunda, sunucudan bir mesaj tüm istemcilere ulaşacaktır, ancak websockets'te de aynı şekilde tüm bağlantıların bir dizisini tutmaya ve tüm istemcilere mesaj göndermek için döngüye girmeye zorlandım.

Ayrıca, web denetmenlerinin (Chrome / kundakçı / kemancı gibi) neden bu iletileri (socket.io/websocket'ten) sunucudan yakalayamadıklarını merak ediyorum?

Lütfen bunu netleştirin.


6
Web denetmenlerinin neden trafiği yakalamadığına ilişkin olarak: bkz. Firebug veya başka bir aracı kullanarak WS / WSS Websocket istek içeriğini nasıl görüntüleyebilirim?
treaz

1
@treaz Firebug'a ya da başka bir şeye ihtiyacınız yok. Chrome'un geliştiricileri, ağlar sekmesi altında WS bağlantılarını gösterir.

Bunu da kontrol edin (bunun son olup olmadığından emin değilim) - educba.com/websocket-vs-socket-io
Manohar Reddy Poreddy

Sanırım muhtemelen en son hackdoor.io/articles/6xQkgQo4/…
Qiulang

Yanıtlar:


326

Avantajları, # 2'de tarif ettiğiniz gibi WebSockets kullanımını basitleştirmesidir ve daha da önemlisi, WebSockets'in tarayıcıda veya sunucuda desteklenmemesi durumunda diğer protokollere başarısızlık sağlar. Çalışmadıkları ortamlara çok aşina değilseniz ve bu sınırlamalar üzerinde çalışabiliyorsanız WebSockets'i doğrudan kullanmaktan kaçınırım.

Bu hem WebSockets hem de Socket.IO üzerinde iyi bir okuma.

http://davidwalsh.name/websocket


63
Socket.IO, WebSockets üzerine kurulmaz, yalnızca bu teknolojiyi kullanılabilir olduğunda kullanır.
moka

24
Anlambilimsel fark ve cevabın geri kalanında bunu açıkladım, ama cevabı bunu yansıtacak şekilde güncelledim.
Timothy Strimple

1
@moka, kelimelerinizden aşağıdaki ifadenin yanlış olduğu sonucuna varabilir miyim? Socket.IO aslında WebSockets üzerinden bir katmandan daha fazlasıdır.
Pulak Kanti Bhattacharyya

3
@PulakKantiBhattacharyya tam olarak hangi ifadeye başvurduğunuzu belirtebilir misiniz? Socket.IO, WebSockets'in üstündeki bir katmandan çok daha fazlasıdır, farklı semantiğe sahiptir (iletileri isimle işaretler) ve farklı protokollere yük devretme yapar ve ayrıca kalp atma mekanizması vardır. Buna ek olarak kimlikler sunucu tarafındaki istemcilere eklenir ve daha fazlası. Yani sadece bir sarıcı değil, tam özellikli bir kütüphane. Aslında son yıllarda iyi desteklenmedi, bu yüzden Socket.IO'ya göre çok daha iyi ve daha bakımlı bir alternatif olan SockJS'yi kullanmanızı tavsiye ederim.
moka

4
@moka Bir ay önce seninle aynı fikirdeydim. Socket.io 1.0 çıktı ve güncellemeler alıyor.
Timothy Strimple

538

yanılgılar

WebSocket ve Socket.IO ile ilgili yaygın yanlış kavramlar vardır:

  1. İlk yanlış anlama Socket.IO'nun kullanılmasının WebSocket'i kullanmaktan çok daha kolay olduğudur. Aşağıdaki örneklere bakın.

  2. İkinci yanlış anlama, WebSocket'in tarayıcılarda yaygın olarak desteklenmemesidir. Daha fazla bilgi için aşağıya bakın.

  3. Üçü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:

  1. HTML sayfasının kendisi
  2. 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:

  1. HTML sayfasının kendisi
  2. Socket.IO'nun JavaScript'i (180 kilobayt)
  3. ilk uzun oylama AJAX isteği
  4. ikinci uzun oylama AJAX isteği
  5. üçüncü uzun yoklama AJAX isteği
  6. WebSocket'e bağlantı yükseltme

Ekran görüntüleri

Localhost üzerinde aldığım WebSocket sonuçları:

WebSocket sonuçları - websocket-vs-socket.io modülü

Localhost üzerinde aldığım Socket.IO sonuçları:

Socket.IO sonuçları - websocket-vs-socket.io modülü

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 :

resim açıklamasını buraya girin

Güncel bilgiler için http://caniuse.com/websockets adresine bakın .


23
Yani temelde söylediğiniz şey, websocket socket.io'dan daha mı iyi?
Jack Moscovi

42
@JackMoscovi WebSocket'in daha iyi olduğunu söyleyemem. Her şey gereksinimlere bağlıdır. WebSocket'in avantajları, bir Web standardı olması (ilk önce W3C altında ve whatwg, şimdi IETF altında, 5 yıl önce yayınlanan bir RFC ile), tarayıcılar tarafından yerel olarak desteklendiği için çok hafif, ancak iyi durumda tarayıcı desteği evrensel değil. Socket.IO daha fazla tarayıcıyı destekler ve daha fazla işlevselliğe sahiptir, ancak bazı ek yüklerle birlikte gelir. Bazen biri daha iyi, bazen diğeri daha iyidir. SorguSelectorAll ve jQuery arasında seçim yapmak gibi - cevap her zaman aynı değildir
rsp

20
Burada büyük cevap !! Bana öyle geliyor ki birçok durumda socket.io artık gerekli değil ... Bu harika makaleye de bakın! medium.com/@ivanderbyl/…
Alvaro

4
@rsp Bu örneklerin işlevsel olarak eşdeğer olduğunu düşünmüyorum? Socket-io, kesintiye uğradığında otomatik yeniden bağlanma gibi şeyleri işler (mobil cihazlarda olur) ve bence bu konuda sizin için ele alınan güvenlik endişeleri var mı? Düz WS örnekleriniz, işlevsel olarak eşdeğer olmakla birlikte, bu özelliklere sahip değildir.
mindplay.dk

28
Çok iyi bir karşılaştırma. Bununla birlikte, Socket.io'nun oda adı aralığı, tonlarca bağlantı detayı, birçok günlük detayı eklediğini ve Socket.IO için Angular, Vue, React ve diğerleriyle birlikte çok sayıda entegrasyon kütüphanesi olduğunu belirtmek gerekir. En önemlisi, Ajax uzun sorgulamasını devre dışı bırakabilir ve ham WebSocket bağlantısı gibi WebSocket aracılığıyla doğrudan bağlanabilirsiniz. Bu şekilde, 180 kb kütüphane dışında her şeyi eşit olarak alırsınız. WebSocket'i kullanmak, minimum değere ihtiyacınız olmadığı sürece doğrudan acı vericidir. Bırakılan odalar ve topluluk IP'sine erişim işletmeler için göz korkutucu.
Nick Steele

30

Im socket.io kullanarak karşı bir argüman sağlayacaktır.

Ben sadece fall.s olduğu için socket.io kullanarak düşünüyorum iyi bir fikir değil. IE8 RIP olsun.

Geçmişte, NodeJS'nin yeni sürümlerinin socket.io'yu bozduğu birçok durum vardı. Örnekler için bu listeleri kontrol edebilirsiniz ... https://github.com/socketio/socket.io/issues?q=install+error

Bir Android uygulaması veya mevcut uygulamanızla çalışması gereken bir şey geliştirmeye giderseniz, muhtemelen WS ile hemen çalışabilirsiniz, socket.io orada biraz sorun yaşayabilir ...

Ayrıca Node.JS için WS modülünün kullanımı inanılmaz derecede basittir.


android ve ios sohbet uygulamaları oluşturmak için mysql -> express.js / fastify.js veya node.js ile doğrudan etkileşim kurmak için ne kullanmanızı öneriyoruz?
DragonFire

25

Socket.IO kullanmak temelde jQuery kullanmaya benzer - eski tarayıcıları desteklemek istiyorsunuz, daha az kod yazmanız gerekiyor ve kütüphane yedekler sağlayacak. Socket.io varsa websockets teknolojisini kullanır ve yoksa en iyi iletişim türünü kontrol eder ve kullanır.


3

Modern tarayıcılar artık WebSockets'i desteklese bile, SocketIO'yu atmaya gerek olmadığını düşünüyorum ve günümüzde herhangi bir projede hala yeri var. Anlaması kolay ve kişisel olarak, SocketIO sayesinde WebSockets'in nasıl çalıştığını öğrendim.

Bu konuda belirtildiği gibi, Angular, React, vb. İçin birçok entegrasyon kütüphanesi ve TypeScript ve diğer programlama dilleri için tanım türleri vardır.

Socket.io ve WebSockets arasındaki farklılıklara ekleyeceğim bir diğer nokta ise Socket.io ile kümelemenin çok önemli olmaması. Socket.io, ölçeklenebilirliği artırmak için Redis ile bağlamak için kullanılabilecek Adaptörler sunar . You have ioredis ve socket.io-REDIS örneğin.

Evet biliyorum, SocketCluster var, ama konu dışı.


2

Socket.IO WebSocket'i kullanır ve WebSocket kullanılamadığında, gerçek zamanlı bağlantılar oluşturmak için yedek algo kullanır.


0

https://socket.io/docs/#What-Socket-IO-is-not ( vurguladığım şekilde )

Socket.IO nedir

Socket.IO bir WebSocket uygulaması DEĞİLDİR . Socket.IO gerçekten de WebSocket'i mümkün olduğunda aktarım olarak kullanıyor olsa da, her pakete bir miktar meta veri ekler: bir mesaj onayı gerektiğinde paket türü, ad alanı ve paket kimliği. Bir nedeni budur WebSocket istemci olacak değil başarıyla Socket.IO sunucusuna bağlanmak mümkün ve Socket.IO istemci olacak değil bir WebSocket sunucusuna bağlanmak mümkün ya. Protokol spesifikasyonumuza bakın burada .

// WARNING: the client will NOT be able to connect!
const client = io('ws://echo.websocket.org');
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.