Kesalahpahaman
Ada beberapa kesalahpahaman umum mengenai WebSocket dan Socket.IO:
Kesalahpahaman pertama adalah bahwa menggunakan Socket.IO secara signifikan lebih mudah daripada menggunakan WebSocket yang tampaknya tidak demikian. Lihat contoh di bawah ini.
Kesalahpahaman kedua adalah bahwa WebSocket tidak didukung secara luas di browser. Lihat di bawah untuk info lebih lanjut.
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:
- Halaman HTML itu sendiri
- 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:
- halaman HTML itu sendiri
- JavaScript Socket.IO (180 kilobyte)
- permintaan AJAX polling panjang pertama
- permintaan polling panjang kedua AJAX
- permintaan AJAX polling panjang ketiga
- peningkatan koneksi ke WebSocket
Tangkapan layar
Hasil WebSocket yang saya dapatkan di localhost:
Hasil Socket.IO yang saya dapatkan di localhost:
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:
Lihat http://caniuse.com/websockets untuk info terbaru.