Setup Project
Untuk membuat aplikasi chat real-time, backend dapat menggunakan Express dan Socket.IO, sementara frontend menggunakan React dan socket.io-client.
npm install express socket.io corsPada frontend, buat project React dengan Vite kemudian install Socket.IO Client.
Server Setup
Buat HTTP server menggunakan Express, lalu hubungkan Socket.IO dengan server tersebut. Konfigurasi CORS agar frontend dapat melakukan koneksi dari alamat yang diizinkan.
cors: {
origin: 'http://localhost:5173'
}Event Handling Dasar
Komunikasi antara client dan server dilakukan melalui event. Beberapa event yang umum digunakan dalam aplikasi chat antara lain:
-
connection– ketika user berhasil terhubung -
disconnect– ketika koneksi terputus -
join-room– ketika user masuk ke room -
send-message– ketika user mengirim pesan -
receive-message– ketika pesan diterima client
Dengan event tersebut, server dapat menangani komunikasi secara real-time tanpa perlu melakukan polling secara terus-menerus.
Rooms dan Namespaces
Socket.IO Rooms memungkinkan server mengelompokkan koneksi berdasarkan room tertentu. User dapat bergabung menggunakan:
socket.join('room-name')Pesan kemudian dapat dikirim hanya kepada anggota room menggunakan:
io.to('room-name').emit()Fitur ini cocok untuk chat pribadi, grup, maupun fitur kolaborasi.
Menyimpan Online Status
Status online dapat dikelola dengan menyimpan hubungan antara socket ID dan user ID menggunakan Map.
Ketika user terhubung, status dapat diubah menjadi online. Saat koneksi terputus, server dapat memperbarui status menjadi offline dan mengirim informasi tersebut kepada user lain yang relevan.
Scaling Socket.IO
Pada aplikasi dengan banyak pengguna, satu server mungkin tidak lagi cukup. Jika Socket.IO dijalankan pada beberapa server instance, gunakan Redis Adapter agar event dapat diteruskan antar-server.
Dengan pendekatan ini, pengguna yang terhubung ke server berbeda tetap dapat menerima pesan dan event secara real-time.
Kesimpulan
Socket.IO mempermudah pengembangan aplikasi real-time seperti chat, notifikasi, dan collaborative tools. Dengan rooms, event handling, online status, serta Redis Adapter, aplikasi dapat dikembangkan dari prototype sederhana hingga sistem yang lebih skalabel.