Pendahuluan
WebSocket adalah protokol komunikasi yang memungkinkan interaksi realtime antara klien dan server. Berbeda dengan HTTP, yang berbasis permintaan-respons, WebSocket menyediakan saluran komunikasi dua arah yang terus terbuka, memungkinkan data dikirim dan diterima secara langsung tanpa harus menunggu permintaan baru. Artikel ini akan membahas cara membangun aplikasi realtime menggunakan WebSocket di backend.
Apa Itu WebSocket?
1. Definisi WebSocket
WebSocket adalah protokol yang menyediakan saluran komunikasi full-duplex (dua arah) antara klien dan server. Protokol ini memulai komunikasi melalui HTTP, kemudian beralih ke saluran WebSocket yang lebih efisien untuk komunikasi realtime.
2. Keuntungan WebSocket
- Komunikasi Realtime: Data dapat dikirim dan diterima secara langsung tanpa latensi.
- Efisiensi: Mengurangi overhead komunikasi dibandingkan dengan HTTP yang harus membuka koneksi baru untuk setiap permintaan.
- Interaksi Dua Arah: Memungkinkan klien dan server untuk mengirim pesan kapan saja.
Bagaimana WebSocket Bekerja
- Handshake: Klien mengirimkan permintaan handshake WebSocket ke server menggunakan HTTP. Jika server mendukung WebSocket, ia akan merespons dengan kode status yang sesuai untuk menyetujui koneksi.
- Koneksi Terbuka: Setelah handshake, koneksi WebSocket terbuka dan siap untuk komunikasi dua arah.
- Pengiriman Data: Data dapat dikirim antara klien dan server melalui saluran WebSocket yang terbuka.
- Penutupan: Salah satu pihak dapat menutup koneksi WebSocket kapan saja dengan mengirimkan pesan penutupan.
Membangun Aplikasi Realtime dengan WebSocket di Backend
1. Menyiapkan Server WebSocket
Untuk membangun server WebSocket, kita akan menggunakan library seperti ws di Node.js. Berikut adalah contoh dasar server WebSocket dengan ws:
Instalasi
npm install ws
Kode Server
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('Client connected');
// Menerima pesan dari klien
socket.on('message', (message) => {
console.log('Received:', message);
// Mengirim pesan kembali ke klien
socket.send(`Server received: ${message}`);
});
// Menangani penutupan koneksi
socket.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server berjalan di ws://localhost:8080');
2. Membuat Klien WebSocket
Klien WebSocket dapat diimplementasikan di frontend menggunakan API WebSocket yang tersedia di browser.
Kode Klien (HTML/JavaScript)
<html>
<head>
<title>WebSocket Client</title>
</head>
<body>
<h1>WebSocket Client</h1>
<input type="text" id="messageInput" placeholder="Type a message" />
<button id="sendButton">Send</button>
<div id="messages"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', () => {
console.log('Connected to WebSocket server');
});
socket.addEventListener('message', (event) => {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML += `<p>${event.data}</p>`;
});
document.getElementById('sendButton').addEventListener('click', () => {
const messageInput = document.getElementById('messageInput');
socket.send(messageInput.value);
messageInput.value = '';
});
</script>
</body>
</html>
3. Menangani Pesan Realtime
Dengan koneksi WebSocket yang terbuka, Anda dapat mengirim dan menerima pesan secara realtime. Misalnya, dalam aplikasi chat, setiap kali pengguna mengirimkan pesan, server akan mendistribusikan pesan tersebut ke semua klien yang terhubung.
Contoh Penanganan Pesan di Server
server.on('connection', (socket) => {
console.log('Client connected');
// Menerima pesan dari klien
socket.on('message', (message) => {
console.log('Received:', message);
// Mengirim pesan ke semua klien
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
socket.on('close', () => {
console.log('Client disconnected');
});
});
4. Keamanan dan Pengelolaan Koneksi
- Autentikasi: Pastikan hanya pengguna yang terautentikasi yang dapat terhubung ke server WebSocket.
- Penanganan Kesalahan: Tangani kesalahan koneksi dan pesan dengan benar untuk meningkatkan pengalaman pengguna.
- Scalability: Pertimbangkan menggunakan load balancer dan mekanisme penyimpanan pesan seperti Redis untuk aplikasi skala besar.
Kesimpulan
WebSocket adalah protokol yang kuat untuk membangun aplikasi realtime dengan komunikasi dua arah yang efisien. Dengan menggunakan WebSocket, Anda dapat membuat aplikasi seperti chat, live notifications, atau dashboard realtime yang responsif. Membangun aplikasi realtime melibatkan menyiapkan server WebSocket, membuat klien yang terhubung, menangani pesan secara langsung, dan memastikan keamanan serta pengelolaan koneksi yang baik. Dengan pendekatan yang tepat, WebSocket memungkinkan Anda menciptakan pengalaman pengguna yang interaktif dan dinamis.
