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!

Link Referensi

• dokumentasi ws
• aplikasi polling