SocketIO selalu jadi pilihan kawula developer kalau mau implementasi WebSocket pada browser, dan yap SocketIO sebenernya cukup cukup aja untuk masalah ini.
Tapi masalahnya satu, SocketIO ini termasuk fosil teknologi. Banyak browser sudah support websocket dan tidak memerlukan teknik long-polling lagi. Library client SocketIO pada browser besar, dan banyak major product seperti Trello yag migrasi dari SocketIO ke native WebSocket dikarenakan performanya lebih baik.
Saya tidak akan menjelaskan satu persatu langkah pembuatannya jika tertarik untuk melihat code-nya bisa langsung cek disini
Membuat Koneksi Websocket Pada Server
Cukup mudah saya disini memakai fastify dan ws.
Kita hanya perlu memasukan instance object server pada aplikasi server HTTP kita (fastify)
const fastify = require('fastify')
const WebSocket = require('ws')
// inisiasi websocket server
const wss = new Websocket({ server: fastify.server }) // _server object_ dari fastify
wss.on('connection', (ws) => {
// ws berisikan _instance object_ tiap tiap client yang terkoneksi
})
// mulai server fastify
async function start() {
await fastify.listen(3000)
console.log('berjalan pada port 3000')
}
Jikalau anda menggunakan express bisa lihat contoh disini
Event Handling
Saat memakai ws banyak orang bingung soal implementasi event-nya bagaimana. Kalau di SocketIO sangat mudah karena kita bisa pakai emit dan on yang sudah disediakan oleh library.
Tenang Node.js punya modul namanya events, modul tersebut bisa kita gunakan untuk memperhatikan (watch) event yang kita buat pada websocket kita.
Contoh simple penggunaan events.
const EventEmitter = require('events');
// inisiasi event emmiter
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
console.log('an event occurred!');
});
myEmitter.emit('event'); // kirim message ke event
Oke jadi dengan teknik tsb kita bisa refaktor file di awal kita tadi menjadi seperti ini.
const WebSocket = require('ws')
const EventEmmiter = require('events')
class SocketConnection extends EventEmmiter {
constructor({ server }) {
super()
// inisiasi server websocket
this.wss = new WebSocket({ server })
this.wss.on('connection', (ws) => {
// menerima pesan yang dikirim user.
ws.on('message', () => {
// mengirimkan event
this.emit('voting', { voting: 'Jokawi' })
})
})
}
}
module.exports = SocketConnection
Untuk menerima pesan voting tsb kita bisa gunakan dalam index.js kita seperti ini:
const fastify = require('fastify')
const Socket = require('./socket') // namain aja file tadi socket
const room = new Socket({ server: fastify.server })
// kita bisa mendengarkan event dari sini
room.on('voting', () => {
// lakukan sesuatu saat voting
})
Implementasi bisa dilihat disini
Broadcast
WebSocket Merupakan komunikasi bidireksional (2 arah) dan hanya One to One antara server dan client saja. Jadi Untuk broadcast pesan kesemua orang / ke salah satu client yang terkoneksi kita harus menyimpan setiap koneksi yang ada.
contoh :
// this.sockets merupakan object yang kita simpan di server
// yang berisikan setiap user yang terkoneksi
broadcast(msg) {
for (const key in this.sockets) {
this.send(key, msg)
}
}
Scaling
Untuk scaling secara horizontal kita bisa menggunakan redis dan sticky session. Anda bisa baca di sini atau bisa juga lihat implementasi dengan docker di video ini.
Routing
Jika kita kepingin routing websocket kita bisa juga kita manfaatkan opsi routing pada ws.
const fastify = require('fastify')
const Websocket = require('ws')
const room1 = new WebSocket({ server: fastify.server, path: '/room1' })
const room2 = new WebSocket({ server: fastify.server, path: '/room2' })
dan nanti di client (browser) kita bisa koneksi seperti ini
// konek ke room1
new WebSocket('ws://localhost:3000/room1') // ws: kalau http kalau htpps pakai wss:
new WebSocket('ws://localhost:3000/room2') // konek ke room 2
Kesimpulan
Pakai yang kamu nyaman, SocketIO bagus digunakan kalau kamu bikin aplikasi yang tidak terlalu banyak user, masih menargetkan browser lama seperti IE9, dan mencari solusi cepat. Tapi jika ingin memaksimalkan peforma kita bisa memakai library lain seperti ws, uWebsocket.js, atau library lain. Ingat selalu melihat feedback saat ingin menggunkan library yang cukup krusial pada aplikasi kita.
Yuk mari berkarya!
Top comments (0)