ChatApp with WebSocket, NodeJS, and MySQL: Building a Real-Time Chat Application
Pendahuluan
Aplikasi chat adalah salah satu contoh paling umum dari penerapan komunikasi real-time di dunia web modern. Ketika seseorang mengirim pesan, pengguna lain dapat langsung melihatnya tanpa harus memuat ulang halaman. Hal ini dimungkinkan berkat teknologi WebSocket, sebuah protokol komunikasi yang memungkinkan koneksi dua arah antara client dan server.
Dalam artikel ini, kita akan membahas bagaimana membangun ChatApp sederhana menggunakan WebSocket, NodeJS, dan MySQL. Ketiga komponen ini akan bekerja sama untuk membuat sistem chat yang cepat, efisien, dan dapat diandalkan.
Apa Itu WebSocket?
WebSocket adalah protokol komunikasi yang memungkinkan interaksi dua arah (full-duplex) antara client dan server melalui satu koneksi TCP. Tidak seperti HTTP yang bersifat request–response, WebSocket memungkinkan server mengirim data ke client kapan pun diperlukan.
Artinya, ketika pengguna mengirim pesan, server bisa langsung meneruskan pesan tersebut ke semua pengguna lain yang sedang terkoneksi tanpa perlu menunggu permintaan baru dari client.
Mengapa Menggunakan NodeJS dan MySQL?
-
NodeJS sangat cocok untuk aplikasi real-time karena sifatnya yang asynchronous dan event-driven.
-
MySQL digunakan sebagai database untuk menyimpan data pengguna dan riwayat chat.
Kombinasi keduanya memungkinkan kita membuat server yang ringan, cepat, dan mudah dikembangkan.
Struktur Proyek
Berikut struktur folder sederhana untuk ChatApp:
chatapp/ | |-- server.js |-- package.json |-- public/ | |-- index.html | |-- script.js |-- db/ |-- database.sql
Diagram
.png)
.png)
1. Setup Database MySQL
Buat database bernama chatapp dan tabel untuk menyimpan pesan:
CREATE DATABASE chatapp;
USE chatapp;
CREATE TABLE messages ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50), message TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );
2. Membuat Server NodeJS
Instal modul berikut:
npm init -y npm install express ws mysql
Kemudian buat file server.js:
const express = require('express');
const WebSocket = require('ws');
const mysql = require('mysql');
const http = require('http');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
// Koneksi ke database
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'chatapp'
});
db.connect();
// Menyajikan file statis
app.use(express.static('public'));
wss.on('connection', (ws) => {
console.log('User connected');
ws.on('message', (data) => {
const msg = JSON.parse(data);
db.query('INSERT INTO messages (username, message) VALUES (?, ?)', [msg.username, msg.message]);
// Kirim ke semua client
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(msg));
}
});
});
});
server.listen(3000, () => console.log('Server berjalan di http://localhost:3000'));
3. File Client HTML dan JavaScript
public/index.html:
<!DOCTYPE html>
<html>
<head>
<title>ChatApp</title>
<style>
body { font-family: Arial; }
#chatbox { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }
</style>
</head>
<body>
<h1>ChatApp Real-Time</h1>
<div id="chatbox"></div>
<input type="text" id="username" placeholder="Nama...">
<input type="text" id="message" placeholder="Tulis pesan...">
<button onclick="sendMessage()">Kirim</button>
<script src="script.js"></script>
</body>
</html>
public/script.js:
const ws = new WebSocket('ws://localhost:3000');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
const chatbox = document.getElementById('chatbox');
chatbox.innerHTML += `<p><b>${data.username}:</b> ${data.message}</p>`;
};
function sendMessage() {
const username = document.getElementById('username').value;
const message = document.getElementById('message').value;
ws.send(JSON.stringify({ username, message }));
document.getElementById('message').value = '';
}
4. Uji Coba Aplikasi
Jalankan server:
node server.js
Buka beberapa tab browser di http://localhost:3000, lalu coba kirim pesan dari satu tab ke tab lain. Anda akan melihat pesan muncul secara real-time.
Kesimpulan
Dengan WebSocket, NodeJS, dan MySQL, kita dapat membangun sistem chat yang real-time, ringan, dan mudah diimplementasikan. Artikel ini hanya dasar dari ChatApp sederhana. Anda dapat mengembangkannya lebih lanjut, seperti menambahkan autentikasi pengguna, room chat, atau integrasi dengan REST API.
