WebSocket adalah protokol komunikasi yang memungkinkan komunikasi dua arah yang lebih efisien antara klien dan server dalam aplikasi web.
Berbeda dengan protokol HTTP tradisional, WebSocket memungkinkan koneksi yang tetap terbuka, sehingga klien dan server dapat saling mengirimkan data secara real-time tanpa perlu membuka koneksi baru setiap kali ada data yang dikirim.
Artikel ini akan membahas cara menggunakan WebSocket untuk komunikasi real-time di aplikasi web Anda.
Apa Itu WebSocket?
WebSocket adalah protokol komunikasi yang memungkinkan pertukaran data secara penuh-dua arah (full-duplex) antara klien dan server melalui satu koneksi.
Hal ini memungkinkan data dikirimkan dalam waktu nyata tanpa perlu melakukan HTTP request berulang kali.
WebSocket sangat berguna untuk aplikasi yang memerlukan interaksi terus-menerus dan real-time, seperti aplikasi chat, game online, atau platform yang menampilkan data secara langsung.
Keunggulan utama WebSocket adalah koneksinya yang tetap terbuka setelah diinisialisasi, berbeda dengan HTTP yang memerlukan koneksi baru untuk setiap request.
Baca Juga: Sertifikasi Web Developer
Langkah-langkah Menggunakan WebSocket
1. Membuat Server WebSocket
Langkah pertama adalah membuat server WebSocket yang akan menerima dan mengirimkan data ke klien. Anda bisa menggunakan berbagai bahasa pemrograman untuk ini, tetapi dalam tutorial ini, kita akan menggunakan Node.js dan pustaka ws untuk membuat server WebSocket.
Untuk memulai, pastikan Anda memiliki Node.js terinstal di sistem Anda. Kemudian, buat direktori baru untuk proyek Anda dan jalankan perintah berikut untuk menginstal pustaka ws:
bashSalinnpm init -y
npm install ws
Setelah itu, buat file server.js dan tambahkan kode berikut untuk membuat server WebSocket:
javascriptSalinconst WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('A client connected');
ws.on('message', (message) => {
console.log(`Received message: ${message}`);
ws.send(`Hello from server: ${message}`);
});
});
Kode di atas akan membuat server WebSocket yang mendengarkan koneksi pada port 8080. Ketika klien mengirimkan pesan, server akan menerima pesan tersebut dan mengirimkan balasan.
2. Membuat Klien WebSocket di Browser
Setelah server siap, langkah berikutnya adalah membuat klien yang akan terhubung ke server WebSocket. Anda dapat menggunakan JavaScript di sisi klien untuk membuat koneksi ke server WebSocket.
Buat file index.html dan tambahkan kode berikut:
htmlSalin<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Client</title>
</head>
<body>
<h1>WebSocket Client</h1>
<button id="sendMessage">Send Message</button>
<p id="response"></p>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => {
console.log('Connected to the WebSocket server');
};
socket.onmessage = (event) => {
document.getElementById('response').textContent = 'Server says: ' + event.data;
};
document.getElementById('sendMessage').addEventListener('click', () => {
socket.send('Hello from client!');
});
</script>
</body>
</html>
Kode ini akan membuat klien WebSocket yang terhubung ke server yang dijalankan di ws://localhost:8080. Ketika tombol “Send Message” diklik, klien akan mengirimkan pesan ke server, dan server akan mengirimkan balasan yang ditampilkan pada halaman web.
3. Menjalankan Server dan Klien
Untuk menjalankan aplikasi ini, pertama, jalankan server WebSocket di terminal:
bashSalinnode server.js
Kemudian, buka file index.html di browser Anda. Setelah itu, klik tombol “Send Message” dan lihat bagaimana server merespons dengan pesan yang dikirimkan.
Akhir Kata
WebSocket adalah alat yang sangat berguna untuk aplikasi yang membutuhkan komunikasi real-time antara klien dan server.
Dalam tutorial ini, Anda telah mempelajari cara membuat server WebSocket menggunakan Node.js dan pustaka ws, serta cara menghubungkan klien menggunakan JavaScript di browser.
Dengan menggunakan WebSocket, Anda dapat membangun aplikasi yang lebih interaktif dan responsif, seperti aplikasi chat, notifikasi langsung, atau pembaruan data secara real-time.
Dengan pemahaman dasar tentang WebSocket, Anda bisa mulai mengembangkan aplikasi lebih lanjut yang membutuhkan komunikasi dua arah yang efisien dan cepat.
Leave a Comment