Selamat siang teman!Soket Web dan Socket.IO mungkin adalah dua alat komunikasi waktu-nyata yang paling umum (selanjutnya disebut komunikasi langsung). Tetapi bagaimana mereka berbeda?Saat membuat aplikasi untuk komunikasi langsung, ada saatnya Anda harus memilih alat untuk bertukar data antara klien dan server. Soket Web dan Socket.IO adalah sarana komunikasi langsung paling populer di web modern. Yang mana yang harus dipilih? Apa perbedaan antara teknologi ini? Ayo cari tahu.Soket web
Berbicara tentang soket web, maksud kami protokol komunikasi web, yang mewakili saluran komunikasi dupleks penuh melalui koneksi TCP sederhana. Sederhananya, teknologi ini memungkinkan Anda untuk membangun komunikasi antara klien dan server dengan biaya minimal, memungkinkan Anda untuk membuat aplikasi yang menggunakan semua keunggulan komunikasi langsung.Misalnya, bayangkan Anda membuat obrolan: Anda harus menerima dan mengirim data secepat mungkin, bukan? Soket web baik-baik saja dengan ini! Anda dapat membuka koneksi TCP dan tetap membukanya selama diperlukan.Soket web muncul pada 2010 di Google Chrome 4, RFC pertama ( 6455 ) diterbitkan pada 2011.Soket web digunakan dalam kasus berikut:- Obrolan
- Game multi pemain
- Pengeditan kolaboratif
- Umpan sosial (berita)
- Aplikasi Berbasis Lokasi
dll.Socket.io
Socket.IO adalah pustaka JavaScript berbasis (ditulis di atas) pada soket web ... dan teknologi lainnya. Ini menggunakan soket web saat tersedia, atau teknologi seperti Flash Socket, AJAX Long Polling, AJAX Multipart Stream, ketika soket web tidak tersedia. Analogi yang mudah adalah perbandingan Fetch API dan Axios.Perbedaan Antara Soket Web dan Socket.IO
Keuntungan utama Socket.IO adalah sebagai berikut:- -, Socket.IO . , . . -, .
- - . Socket.IO .
- , Socket.IO () .
- Socket.IO .
- Socket.IO .
Tampaknya Socket.IO adalah alat terbaik untuk komunikasi langsung. Namun, ada beberapa situasi di mana lebih baik menggunakan soket web.Pertama, soket web didukung oleh semua browser modern. Karena itu, Anda jarang memerlukan dukungan teknologi lain yang disediakan oleh Socket.IO.Jika kita berbicara tentang lalu lintas jaringan, maka soket web hanya mengirim dua permintaan:- DAPATKAN untuk mendapatkan halaman HTML
- UPGRADE untuk menghubungkan ke soket web
Ini memungkinkan Anda untuk terhubung ke server. Bagaimana dengan Socket.IO?- DAPATKAN untuk mendapatkan halaman HTML
- Perpustakaan Klien Socket.IO ( 207kb )
- Tiga permintaan polling panjang Ajax
- UPGRADE untuk menghubungkan ke soket web
Di dunia JS, 207kb banyak. Benar-benar penggunaan lalu lintas jaringan yang tidak rasional!Dalam npm ada paket "websocket-vs-socket.io" yang memungkinkan Anda untuk membandingkan lalu lintas jaringan dari teknologi ini:Lalu Lintas Jaringan Socket Web:
Lalu Lintas Jaringan Socket.IO:
Perbedaannya jelas!Menulis kode
Server soket web sederhana
Dalam program kami di Node.js, kami akan membuat server berjalan pada port 3001. Setiap kali klien terhubung, kami akan memberikannya ID unik. Saat mengirim pesan ke klien, kami akan memberi tahu dia tentang keberhasilannya: [<client-id>]: <message>const WebSocket = require('ws')
const UUID = require('uuid')
const wss = new WebSocket.Server({ port: 3001 })
wss.on('connection', ws => {
ws.id = UUID()
ws.on('message', message => {
ws.send(`[${ws.id}]: ${message}`)
})
})
Baik! Tetapi bagaimana jika kita ingin mengirim pesan ke setiap klien yang terhubung? Soket web tidak mendukung pengiriman surat secara default. Ini dapat diimplementasikan sebagai berikut:const WebSocket = require("ws")
const UUID = require("uuid")
const wss = new WebSocket.Server({ port: 3001 })
function broadcast(clientId, message) {
wss.clients.forEach(client => {
if(client.readyState === WebSocket.OPEN) {
client.send(`[${clientId}]: ${message}`)
}
})
}
wss.on('conection', ws => {
ws.id = UUID()
ws.on('message', message => broadcast(ws.id, message))
})
Sederhana dan mudah! Seperti yang Anda lihat, WebSocket.Server menyimpan catatan setiap klien yang terhubung, sehingga kami dapat mengulang dan mengirim pesan ke semua orang. Anda dapat menguji kode di komputer (MacOS) atau di browser (Chrome) .Server sederhana pada Socket.IO
Itu tidak sulit. Dapatkah Socket.IO membuatnya lebih mudah? Bagaimana kita menulis server yang sama pada Socket.IO?const io = require('socket.io')
const server = io.listen(3002)
server.on('connection', socket => {
socket.on('message', message => {
socket.emit(`[${socket.id}]: ${message}`)
socket.broadcast.emit(`[${socket.id}]: ${message}`)
})
})
Kode hampir setengah lebih pendek! Seperti yang Anda lihat, metode siaran tidak mengirim pemberitahuan ke pengirim, jadi kami terpaksa melakukan ini secara manual.Ada masalah: kode tidak dapat diuji pada klien soket web biasa. Hal ini disebabkan oleh fakta bahwa, seperti disebutkan sebelumnya, Socket.IO tidak menggunakan soket web murni, tetapi banyak teknologi untuk mendukung semua klien yang mungkin. Jadi bagaimana kita menguji kinerjanya?
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2.3.0/dist/socket.io.slim.js"></script>
<script>
ioClient = io.connect('http://localhost:3002')
ioClient.on('connect', socket => {
ioClient.send('hello world')
ioClient.on('message', msg => console.log(msg))
})
</script>
Anda harus menggunakan klien khusus. Dalam contoh di atas, kami memuatnya dari CDN. Klien ini memungkinkan kami untuk melakukan tes cepat (kotor) di browser.Seperti yang Anda lihat, contoh-contoh kami tidak jauh berbeda. Namun, jika kita berbicara tentang kompatibilitas, harus diingat bahwa Socket.IO bekerja dengan perpustakaannya sendiri dan tidak dapat digunakan untuk tujuan yang tidak terkait dengan pengembangan web. Pada saat yang sama, soket web dapat digunakan untuk menyelesaikan berbagai tugas, seperti komunikasi P2P, pertukaran data waktu-nyata antar server, dll.Pada catatan
Penskalaan horisontal. Katakanlah obrolan Anda semakin populer dan Anda perlu menambahkan server lain dan memuat penyeimbang untuk memproses permintaan. Nah, jika Anda membuka koneksi ke "server 1", maka penyeimbang mengalihkan Anda ke "server 2", Anda akan mendapatkan kesalahan: "Kesalahan saat jabat tangan WebSocket: Kode respons tak terduga: 400". Socket.IO memecahkan masalah ini dengan menggunakan cookie (atau dengan merutekan koneksi berdasarkan alamat sumber), dan soket web tidak memiliki mekanisme seperti itu.Performa. Seperti disebutkan sebelumnya, Socket.IO menyediakan beberapa lapisan abstrak di atas lapisan transport soket web. Juga, mengemas data ke dalam format JSON digunakan di sini, sehingga tidak ada kemungkinan untuk mengirim data biner ke server (dan sebaliknya). Jika Anda memerlukan fungsionalitas seperti itu, Anda harus "menyihir" kode perpustakaan untuk memastikan perilaku yang diinginkan. Dengan soket web masalah seperti itu tidak muncul.Jadi apa yang harus dipilih?
Kamu putuskan.Socket.IO membuat hidup lebih mudah, Anda tidak perlu khawatir tentang masalah yang terkait dengan penyeimbangan muatan, pemutusan atau mengirim pesan ... tetapi apakah Anda memerlukan fungsi seperti itu? Pustaka klien Socket.IO berbobot lebih dari gabungan paket React, Redux, dan React-Redux. Apakah Anda yakin tidak dapat membatasi diri pada soket web?Satu hal penting yang perlu diingat adalah bahwa ketika menggunakan Socket.IO di sisi server, sebagian besar kode akan ditulis pada abstraksi yang disediakan oleh perpustakaan ini. Jika Anda perlu menulis ulang Node.js microservices di Go, Elixir, Java atau bahasa pemrograman lain, Anda harus menulis ulang hampir semua logika. Misalnya, untuk mengirim pesan ke Socket.IO, metode "broadcast" digunakan (yang diterapkan secara manual pada soket web), jadi ketika refactoring Anda harus memahami cara kerja metode ini. Soket web harus lebih disukai dalam hal ini, karena lebih mudah untuk diadaptasi.Terima kasih atas perhatian Anda.