1. Pendahuluan
Dalam era digital saat ini, aplikasi yang membutuhkan komunikasi waktu nyata semakin banyak digunakan, seperti aplikasi chat, game online, dan notifikasi langsung. Berbeda dengan HTTP tradisional yang bersifat stateless dan satu arah, aplikasi real-time memerlukan komunikasi dua arah secara langsung antara klien dan server. WebSocket adalah protokol yang dirancang untuk memenuhi kebutuhan ini, memungkinkan koneksi penuh-dupleks yang terus-menerus terbuka antara klien dan server. Artikel ini menjelaskan eksperimen dalam membangun aplikasi chat real-time menggunakan WebSocket di Node.js, serta mengulas beberapa kelebihan teknologi ini dalam membangun aplikasi interaktif.
2. Konsep Dasar WebSocket
WebSocket adalah protokol komunikasi yang memungkinkan koneksi TCP yang terjaga antara klien dan server setelah proses awal pembukaan koneksi. Setelah koneksi terbentuk, WebSocket memungkinkan pertukaran data dua arah secara terus-menerus tanpa memerlukan pengiriman permintaan HTTP yang berulang. Hal ini berbeda dengan HTTP, di mana setiap interaksi membutuhkan pengiriman permintaan baru dari klien ke server.
Keunggulan utama WebSocket terletak pada kemampuannya untuk menyediakan komunikasi real-time, yang membuatnya ideal untuk aplikasi yang memerlukan pengiriman data secara instan, seperti aplikasi chat atau sistem notifikasi.
3. Alat dan Teknologi yang Digunakan
Eksperimen ini dilakukan dengan menggunakan alat dan teknologi berikut:
Node.js: Sebagai runtime environment untuk mengeksekusi kode JavaScript di server.
Express.js: Framework web minimalis untuk membangun aplikasi server dengan Node.js.
ws: Library WebSocket untuk Node.js, memungkinkan komunikasi dua arah antara server dan klien.
HTML, CSS, dan JavaScript: Digunakan untuk membuat antarmuka pengguna yang responsif dan interaktif.
4. Langkah-Langkah Eksperimen
1. Langkah pertama Sebelum memulai eksperimen, pastikan Anda telah menginstal Node.js dan npm. Anda bisa mengunduhnya di https://nodejs.org. Setelah itu, periksa apakah instalasi berhasil dengan menjalankan perintah berikut di terminal:
node -v
npm -v
2. Langkah selanjutnya adalah membuat folder proyek dan menginisialisasi proyek Node.js. Berikut adalah langkah-langkahnya:
Buat folder proyek:
mkdir websocket-chat
cd websocket-chat
3. Inisialisasi proyek Node.js:
Jalankan perintah berikut untuk membuat
package.json:
npm init -y
4. Instalasi dependensi:
Instal Express dan ws menggunakan npm:
npm install express ws
5. Kode Server (server.js)
File server.js akan bertindak sebagai server yang menangani koneksi WebSocket dan pengiriman pesan antar klien. Berikut adalah kode untuk server WebSocket:
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
app.use(express.static('public'));
wss.on('connection', (ws) => {
ws.on('message', (message) => {
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
6. Kode Antarmuka Pengguna (public/index.html)
File index.html digunakan untuk membuat antarmuka chat pengguna. Antarmuka ini memungkinkan pengguna untuk mengirim dan menerima pesan secara real-time. Berikut adalah kode HTML untuk antarmuka pengguna:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>WebSocket Chat</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.chat-container {
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-header {
background: #0077cc;
color: white;
padding: 15px;
text-align: center;
font-size: 1.2em;
}
.chat-messages {
flex: 1;
padding: 10px;
overflow-y: auto;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.chat-messages li {
list-style: none;
margin-bottom: 10px;
padding: 8px 12px;
background: #e6f0ff;
border-radius: 5px;
max-width: 80%;
}
.chat-input {
display: flex;
padding: 10px;
}
.chat-input input {
flex: 1;
padding: 10px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 5px;
}
.chat-input button {
padding: 10px 15px;
margin-left: 10px;
background: #0077cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.chat-input button:hover {
background: #005fa3;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header"> WebSocket Chat</div>
<ul class="chat-messages" id="chatBox"></ul>
<div class="chat-input">
<input type="text" id="msgInput" placeholder="Ketik pesan..." />
<button onclick="sendMessage()">Kirim</button>
</div>
</div>
<script>
const socket = new WebSocket("ws://localhost:3000");
socket.onmessage = (event) => {
const li = document.createElement("li");
li.textContent = event.data;
document.getElementById("chatBox").appendChild(li);
};
function sendMessage() {
const input = document.getElementById("msgInput");
if (input.value.trim() !== "") {
socket.send(input.value);
input.value = "";
}
}
</script>
</body>
</html>
7. Menjalankan Aplikasi
Setelah menulis kode server dan antarmuka, jalankan aplikasi dengan perintah:
node server.js
Kemudian buka dua tab browser di alamat http://localhost:3000. Cobalah untuk mengirim pesan dari satu tab dan lihat hasilnya muncul di tab lain secara real-time.
Analisis Hasil
Setelah menjalankan aplikasi, pesan yang dikirimkan dari satu klien akan langsung muncul di klien lainnya. Ini membuktikan bahwa WebSocket berhasil memberikan komunikasi real-time antar pengguna. Aplikasi ini juga menunjukkan bagaimana server mengelola beberapa koneksi sekaligus dan mengirimkan pesan ke semua klien yang terhubung.
Keunggulan WebSocket Dibanding HTTP
Koneksi Terbuka: WebSocket menjaga koneksi tetap terbuka, menghindari overhead dari permintaan HTTP berulang.
Efisiensi: WebSocket memungkinkan komunikasi real-time dengan latensi rendah, ideal untuk aplikasi chat.
Penghematan Sumber Daya: Dibandingkan dengan polling HTTP yang memerlukan permintaan berulang, WebSocket lebih hemat sumber daya karena hanya memerlukan satu koneksi yang terus aktif.
Kesimpulan
Eksperimen ini menunjukkan bagaimana teknologi WebSocket dapat digunakan untuk membangun aplikasi chat real-time yang efisien dan responsif menggunakan Node.js. Dengan WebSocket, komunikasi antar klien dapat dilakukan secara langsung dan tanpa delay, menjadikannya solusi yang sangat baik untuk aplikasi yang memerlukan interaksi waktu nyata.
Referensi
*Dokumentasi WebSocket MDN
*Dokumentasi resmi ws: https://github.com/websockets/wsÂ
Follow Instagram @kompasianacom juga Tiktok @kompasiana biar nggak ketinggalan event seru komunitas dan tips dapat cuan dari Kompasiana. Baca juga cerita inspiratif langsung dari smartphone kamu dengan bergabung di WhatsApp Channel Kompasiana di SINI
