Perbedaan antara socket.io dan soket web


459

Apa perbedaan antara socket.io dan websockets di node.js?
Apakah keduanya teknologi server push? Satu-satunya perbedaan yang saya rasakan adalah,

  1. socket.io memungkinkan saya untuk mengirim / memancarkan pesan dengan menentukan nama acara.

  2. Dalam kasus socket.io, pesan dari server akan menjangkau semua klien, tetapi untuk hal yang sama di websockets saya terpaksa menyimpan array semua koneksi dan memutarnya untuk mengirim pesan ke semua klien.

Juga, saya heran mengapa inspektur web (seperti Chrome / firebug / fiddler) tidak dapat menangkap pesan-pesan ini (dari socket.io/websocket) dari server?

Tolong jelaskan ini.


6
Mengenai mengapa inspektur web tidak menangkap traffic: lihat Bagaimana cara melihat konten permintaan WS / WSS Websocket menggunakan Firebug atau lainnya?
treaz

1
@taz Anda tidak perlu Firebug atau apa pun. Devtools Chrome menunjukkan koneksi WS di bawah tab jaringan.

Periksa ini juga (tidak yakin apakah ini terbaru) - educba.com/websocket-vs-socket-io
Manohar Reddy Poreddy

Jawaban:


326

Keuntungannya adalah ia menyederhanakan penggunaan WebSockets seperti yang Anda jelaskan di # 2, dan mungkin yang lebih penting itu memberikan kegagalan-protokol lain jika WebSockets tidak didukung di browser atau server. Saya akan menghindari penggunaan WebSockets secara langsung kecuali jika Anda sangat terbiasa dengan lingkungan apa yang tidak berfungsi dan Anda mampu mengatasi keterbatasan itu.

Ini adalah bacaan yang bagus di WebSockets dan Socket.IO.

http://davidwalsh.name/websocket


63
Socket.IO tidak dibangun di atas WebSockets, ia hanya menggunakan teknologi ini ketika tersedia.
moka

24
Perbedaan semantik dan saya menjelaskannya di sisa jawaban, tetapi saya telah memperbarui jawaban untuk mencerminkan hal ini.
Timothy Strimple

1
@moka, dari kata-kata Anda, bisakah saya menyimpulkan bahwa pernyataan berikut ini salah? Socket.IO sebenarnya lebih dari sekadar lapisan di atas WebSockets.
Pulak Kanti Bhattacharyya

3
@PulakKantiBhattacharyya, bisakah Anda menentukan pernyataan mana yang Anda maksud? Socket.IO jauh lebih dari sekadar lapisan di atas WebSockets, ia memiliki semantik yang berbeda (menandai pesan dengan nama), dan melakukan failover ke protokol yang berbeda, serta memiliki mekanisme yang mengharukan. Lebih dari itu menempelkan ID ke klien di sisi server, dan banyak lagi. Jadi bukan hanya pembungkus, ini adalah perpustakaan berfitur lengkap. Sebenarnya itu belum didukung dengan baik dalam beberapa tahun terakhir, jadi saya akan merekomendasikan untuk menggunakan SockJS yang merupakan alternatif yang lebih baik dan lebih terpelihara untuk Socket.IO.
moka

4
@ moka Sebulan yang lalu saya akan setuju dengan Anda. Socket.io 1.0 keluar sekarang dan mendapatkan pembaruan.
Timothy Strimple

538

Kesalahpahaman

Ada beberapa kesalahpahaman umum mengenai WebSocket dan Socket.IO:

  1. Kesalahpahaman pertama adalah bahwa menggunakan Socket.IO secara signifikan lebih mudah daripada menggunakan WebSocket yang tampaknya tidak demikian. Lihat contoh di bawah ini.

  2. Kesalahpahaman kedua adalah bahwa WebSocket tidak didukung secara luas di browser. Lihat di bawah untuk info lebih lanjut.

  3. Kesalahpahaman ketiga adalah bahwa Socket.IO menurunkan versi koneksi sebagai mundur pada browser yang lebih lama. Ini sebenarnya mengasumsikan bahwa browser sudah tua dan mulai koneksi AJAX ke server, yang kemudian ditingkatkan pada browser yang mendukung WebSocket, setelah beberapa lalu lintas dipertukarkan. Lihat di bawah untuk detailnya.

Eksperimen saya

Saya menulis modul npm untuk menunjukkan perbedaan antara WebSocket dan Socket.IO:

Ini adalah contoh sederhana dari kode sisi-server dan sisi-klien - klien terhubung ke server menggunakan WebSocket atau Socket.IO dan server mengirimkan tiga pesan dalam interval 1 detik, yang ditambahkan ke DOM oleh klien.

Sisi server

Bandingkan contoh sisi server menggunakan WebSocket dan Socket.IO untuk melakukan hal yang sama di aplikasi Express.js:

Server WebSocket

Contoh server WebSocket menggunakan Express.js:

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');

Sumber: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js

Socket.IO Server

Contoh server Socket.IO menggunakan Express.js:

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');

Sumber: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js

Sisi klien

Bandingkan contoh sisi klien menggunakan WebSocket dan Socket.IO untuk melakukan hal yang sama di browser:

Klien WebSocket

Contoh klien WebSocket menggunakan vanilla JavaScript:

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); });

Sumber: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html

Klien Socket.IO

Contoh klien Socket.IO menggunakan JavaScript vanilla:

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); });

Sumber: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html

Lalu lintas jaringan

Untuk melihat perbedaan dalam lalu lintas jaringan Anda dapat menjalankan pengujian saya . Inilah hasil yang saya dapatkan:

Hasil WebSocket

2 permintaan, 1,50 KB, 0,05 s

Dari 2 permintaan itu:

  1. Halaman HTML itu sendiri
  2. peningkatan koneksi ke WebSocket

(Permintaan peningkatan koneksi terlihat pada alat pengembang dengan respons 101 Switching Protocols.)

Hasil Socket.IO

6 permintaan, 181,56 KB, 0,25 dtk

Dari 6 permintaan itu:

  1. halaman HTML itu sendiri
  2. JavaScript Socket.IO (180 kilobyte)
  3. permintaan AJAX polling panjang pertama
  4. permintaan polling panjang kedua AJAX
  5. permintaan AJAX polling panjang ketiga
  6. peningkatan koneksi ke WebSocket

Tangkapan layar

Hasil WebSocket yang saya dapatkan di localhost:

Hasil WebSocket - modul websocket-vs-socket.io

Hasil Socket.IO yang saya dapatkan di localhost:

Hasil Socket.IO - modul websocket-vs-socket.io

Uji dirimu

Mulai cepat:

# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io

Buka http: // localhost: 3001 / di browser Anda, buka alat pengembang dengan Shift + Ctrl + I, buka tab Network dan muat ulang halaman dengan Ctrl + R untuk melihat lalu lintas jaringan untuk versi WebSocket.

Buka http: // localhost: 3002 / di browser Anda, buka alat pengembang dengan Shift + Ctrl + I, buka tab Network dan muat ulang halaman dengan Ctrl + R untuk melihat lalu lintas jaringan untuk versi Socket.IO.

Untuk menghapus instalasi:

# Uninstall:
npm rm -g websocket-vs-socket.io

Kompatibilitas browser

Pada Juni 2016 WebSocket bekerja pada semuanya kecuali Opera Mini, termasuk IE lebih tinggi dari 9.

Ini adalah kompatibilitas browser WebSocket di Dapatkah Saya Menggunakan pada Juni 2016:

masukkan deskripsi gambar di sini

Lihat http://caniuse.com/websockets untuk info terbaru.


23
Jadi pada dasarnya apa yang Anda katakan adalah bahwa, websocket lebih baik daripada socket.io?
Jack Moscovi

42
@ JackMoscovi Saya tidak akan mengatakan bahwa WebSocket tentu lebih baik. Itu semua tergantung pada persyaratan. Keuntungan WebSocket adalah bahwa itu adalah standar Web (pertama di bawah W3C dan whatwg, sekarang di bawah IETF, dengan RFC yang diterbitkan 5 tahun yang lalu), ini sangat ringan karena secara asli didukung oleh browser, tetapi dukungan browser sementara yang baik adalah tidak universal. Socket.IO mendukung lebih banyak browser dan memiliki lebih banyak fungsi, tetapi juga dilengkapi dengan beberapa overhead. Terkadang yang satu lebih baik, terkadang yang lain. Ini seperti memilih antara querySelectorAll dan jQuery - jawabannya tidak selalu sama
rsp

20
Jawaban yang bagus di sini !! Sepertinya saya socket.io tidak lagi diperlukan dalam banyak kasus ... Lihat artikel ini juga! medium.com/@ivanderbyl/…
Alvaro

4
@ rsp Saya tidak berpikir contoh-contoh ini secara fungsional setara? Socket-io menangani hal-hal seperti penghubungan-ulang otomatis ketika terganggu (yang terjadi pada perangkat seluler) dan saya pikir ada masalah keamanan di sekitar hal-hal yang ditangani untuk Anda? Contoh WS biasa Anda, meskipun secara fungsional setara, tidak memiliki properti ini.
mindplay.dk

28
Perbandingan yang sangat bagus. Namun, perlu dicatat bahwa Socket.io menambahkan spasi nama kamar, banyak detail koneksi, banyak detail logging, dan ada banyak perpustakaan integrasi untuk Socket.IO dengan Angular, Vue, React, dan lainnya. Yang paling penting, Anda dapat menonaktifkan Ajax polling panjang dan langsung terhubung melalui WebSocket seperti koneksi WebSocket mentah. Dengan cara ini, Anda mendapatkan semuanya kecuali pustaka 180kb sama dengan. Menggunakan WebSocket secara langsung itu menyakitkan kecuali Anda hanya perlu minimum. Menjatuhkan kamar dan akses ke IP komunitas menakutkan bagi perusahaan.
Nick Steele

30

Saya akan memberikan argumen terhadap penggunaan socket.io.

Saya pikir menggunakan socket.io semata-mata karena memiliki fallback bukan ide yang baik. Biarkan IE8 RIP.

Di masa lalu ada banyak kasus di mana versi baru NodeJS telah merusak socket.io. Anda dapat memeriksa daftar ini untuk contoh ... https://github.com/socketio/socket.io/issues?q=install+error

Jika Anda pergi untuk mengembangkan aplikasi Android atau sesuatu yang perlu bekerja dengan aplikasi Anda yang ada, Anda mungkin akan segera bekerja dengan WS, socket.io mungkin memberi Anda beberapa masalah di sana ...

Ditambah modul WS untuk Node.JS sangat mudah digunakan.


apa yang Anda sarankan agar kita gunakan untuk berinteraksi dengan mysql -> express.js / fastify.js atau node.js secara langsung ... untuk membangun aplikasi obrolan android dan ios
DragonFire

25

Menggunakan Socket.IO pada dasarnya seperti menggunakan jQuery - Anda ingin mendukung browser yang lebih lama, Anda perlu menulis lebih sedikit kode dan pustaka akan memberikan fallback. Socket.io menggunakan teknologi soket web jika tersedia, dan jika tidak, periksa jenis komunikasi terbaik yang tersedia dan gunakan.


3

Bahkan jika browser modern mendukung WebSockets sekarang, saya pikir tidak perlu membuang SocketIO dan masih memiliki tempatnya di setiap proyek saat ini. Sangat mudah dimengerti, dan secara pribadi, saya belajar bagaimana WebSockets bekerja berkat SocketIO.

Seperti yang dikatakan dalam topik ini, ada banyak perpustakaan integrasi untuk Angular, React, dll. Dan tipe definisi untuk TypeScript dan bahasa pemrograman lainnya.

Poin lain yang akan saya tambahkan pada perbedaan antara Socket.io dan WebSockets adalah bahwa pengelompokan dengan Socket.io bukan masalah besar. Socket.io menawarkan Adapters yang dapat digunakan untuk menautkannya dengan Redis untuk meningkatkan skalabilitas. Anda memiliki ioredis dan socket.io-redis misalnya.

Ya saya tahu, SocketCluster ada, tapi itu di luar topik.


2

Socket.IO menggunakan WebSocket dan ketika WebSocket tidak tersedia, gunakan algo mundur untuk membuat koneksi waktu nyata.


0

https://socket.io/docs/#What-Socket-IO-is-not (dengan penekanan saya )

Apa yang Socket.IO tidak

Socket.IO BUKAN implementasi WebSocket. Meskipun Socket.IO memang menggunakan WebSocket sebagai transportasi bila memungkinkan, ia menambahkan beberapa metadata ke setiap paket: tipe paket, namespace, dan id paket saat diperlukan pesan pengakuan. Itulah sebabnya klien WebSocket tidak akan berhasil terhubung ke server Socket.IO , dan klien Socket.IO juga tidak akan dapat terhubung ke server WebSocket . Silakan lihat spesifikasi protokol di sini .

// WARNING: the client will NOT be able to connect!
const client = io('ws://echo.websocket.org');
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.