Cara Deploy Aplikasi WebSocket di VPS Plasawebhost: Studi Kasus Chat Room Sederhana dengan Node.js

Pengantar

Aplikasi real-time semakin banyak digunakan untuk berbagai kebutuhan, mulai dari aplikasi percakapan (chat), sistem notifikasi, dashboard monitoring, hingga platform kolaborasi daring. Berbeda dengan aplikasi web konvensional yang menggunakan mekanisme request-response, aplikasi real-time memungkinkan pertukaran data secara langsung sehingga informasi dapat diterima pengguna tanpa perlu memuat ulang halaman.

Salah satu teknologi yang banyak digunakan untuk membangun aplikasi real-time adalah WebSocket. Teknologi ini memungkinkan komunikasi dua arah (bidirectional communication) antara client dan server dalam satu koneksi yang tetap aktif. Dengan demikian, data dapat dikirim dan diterima secara instan, sehingga sangat cocok digunakan untuk aplikasi yang membutuhkan pembaruan informasi secara langsung.

Pada panduan ini, Anda akan mempelajari cara melakukan deploy aplikasi WebSocket di VPS Plasawebhost menggunakan Node.js, Express, package ws, dan MariaDB. Sebagai studi kasus, digunakan aplikasi Chat Room sederhana yang mendukung komunikasi real-time antar pengguna sekaligus menyimpan riwayat percakapan ke dalam database.

Selain proses instalasi dan konfigurasi aplikasi, panduan ini juga membahas cara menjalankan aplikasi menggunakan PM2, menghubungkannya dengan MariaDB, serta mengamankan koneksi menggunakan HTTPS dan WSS melalui Nginx Reverse Proxy agar aplikasi siap digunakan pada lingkungan produksi.

Mengenal Cara Kerja Aplikasi Chat WebSocket

Sebelum memulai proses deployment, penting untuk memahami cara kerja aplikasi chat yang akan digunakan pada panduan ini.

Ketika seorang pengguna mengirimkan pesan, browser akan mengirimkan data ke server melalui koneksi WebSocket. Server yang berjalan menggunakan Node.js dan Express kemudian memproses pesan tersebut, menyimpannya ke database MariaDB, lalu meneruskannya kepada seluruh pengguna yang sedang terhubung ke ruang chat yang sama secara real-time.

Secara sederhana, alur komunikasi aplikasi dapat digambarkan sebagai berikut:

Browser User
WebSocket (WS/WSS)
Node.js + Express
MariaDB
Broadcast ke seluruh client

Karena seluruh pesan disimpan ke dalam database MariaDB, riwayat percakapan akan tetap tersedia meskipun pengguna merefresh halaman, menutup browser, atau server mengalami restart. Dengan demikian, aplikasi tidak hanya mendukung komunikasi real-time, tetapi juga memiliki kemampuan penyimpanan riwayat chat secara permanen.

Persiapan

Sebelum memulai instalasi, pastikan VPS telah memenuhi kebutuhan berikut:

Sistem operasi Ubuntu Server 24.04
Minimal 1 vCPU
Minimal 1 GB RAM
Domain yang sudah mengarah ke IP VPS
Akses root atau sudo

Install Node.js di Ubuntu 24.04

Menginstal Node.js
Node.js digunakan untuk menjalankan backend aplikasi WebSocket yang akan menangani komunikasi real-time antara client dan server.
Tambahkan repository Node.js:
```
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
```
Selanjutnya instal Node.js menggunakan perintah berikut:
```
sudo apt install nodejs -y
```
Keterangan:
Repository NodeSource digunakan untuk memperoleh versi Node.js yang lebih baru dibandingkan paket bawaan repository Ubuntu.
Memverifikasi Instalasi Node.js
Setelah proses instalasi selesai, pastikan Node.js dan NPM telah terpasang dengan benar.
Jalankan perintah berikut:
```
node -v
npm -v
```
Keterangan:
Apabila instalasi berhasil, sistem akan menampilkan informasi versi Node.js dan NPM yang terpasang pada server.

Install MariaDB

Menginstal MariaDB
MariaDB digunakan sebagai database untuk menyimpan seluruh riwayat pesan yang dikirimkan melalui aplikasi chat.
Instal MariaDB menggunakan perintah berikut:
```
sudo apt install mariadb-server -y
```
Keterangan:
MariaDB akan digunakan untuk menyimpan data pesan sehingga riwayat chat tetap tersedia meskipun aplikasi atau server direstart.
Mengaktifkan Layanan MariaDB
Setelah proses instalasi selesai, aktifkan layanan MariaDB agar berjalan secara otomatis saat server dinyalakan ulang.
```
sudo systemctl enable mariadb
sudo systemctl start mariadb
```
Pastikan layanan berjalan dengan normal:
```
sudo systemctl status mariadb
```
Status yang diharapkan:
```
active (running)
```
Keterangan:
Status active (running) menunjukkan bahwa MariaDB telah aktif dan siap digunakan oleh aplikasi.
Mengamankan Instalasi MariaDB
Lakukan konfigurasi keamanan dasar untuk meningkatkan keamanan database server.
Jalankan perintah berikut:
```
sudo mysql_secure_installation
```
Keterangan:
Konfigurasi ini digunakan untuk menghapus pengguna anonim, menonaktifkan akses root dari jaringan luar, serta menerapkan pengaturan keamanan yang direkomendasikan.
Login ke MariaDB
Setelah konfigurasi keamanan selesai, masuk ke konsol MariaDB menggunakan akun administrator.
```
sudo mysql
```
Keterangan:
Perintah ini akan membuka konsol MariaDB sehingga Anda dapat membuat database dan pengguna yang akan digunakan oleh aplikasi WebSocket.

Membuat Database Chat

Login ke MariaDB
Masuk ke konsol MariaDB menggunakan akun administrator.
```
mysql -u root -p
```
Keterangan:
Masukkan kata sandi pengguna root MariaDB ketika diminta.
Membuat Database Aplikasi Chat
Buat database yang akan digunakan untuk menyimpan seluruh data percakapan.
```
CREATE DATABASE websocket_chat;
```
Keterangan:
Database websocket_chat akan digunakan oleh aplikasi WebSocket untuk menyimpan riwayat pesan secara permanen.
Memilih Database
Pilih database yang telah dibuat sebelum membuat tabel.
```
USE websocket_chat;
```
Keterangan:
Perintah ini memastikan seluruh tabel berikutnya dibuat di dalam database websocket_chat.
Membuat Tabel Pesan
Buat tabel yang digunakan untuk menyimpan data percakapan pengguna.
```
CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100) NOT NULL,
    message TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```
Keterangan:
Tabel messages akan menyimpan nama pengguna, isi pesan, serta waktu pengiriman pesan secara otomatis.
Membuat User Database
Untuk alasan keamanan, disarankan menggunakan user database khusus dan tidak menggunakan akun root secara langsung pada aplikasi.
```
CREATE USER 'chatuser'@'localhost'
IDENTIFIED BY 'Chat123!';
```
Keterangan:
Ganti kata sandi Chat123! dengan kata sandi yang lebih kuat sesuai kebutuhan.
Memberikan Hak Akses Database
Berikan hak akses penuh kepada user yang telah dibuat untuk database aplikasi.
```
GRANT ALL PRIVILEGES
ON websocket_chat.*
TO 'chatuser'@'localhost';
```
Keterangan:
Hak akses ini memungkinkan aplikasi membaca, menambah, mengubah, dan menghapus data pada database websocket_chat.
Menerapkan Perubahan Hak Akses
Muat ulang informasi hak akses agar perubahan dapat langsung digunakan.
```
FLUSH PRIVILEGES;
```
Keterangan:
Perintah ini memastikan seluruh perubahan hak akses tersimpan dan diterapkan oleh MariaDB.
Keluar dari MariaDB
Setelah konfigurasi database selesai, keluar dari konsol MariaDB.
```
EXIT;
```
Keterangan:
Database, tabel, dan user aplikasi kini telah siap digunakan oleh backend WebSocket yang akan dibuat pada langkah berikutnya.

Membuat Project Node.js

Membuat Direktori Project
Buat direktori baru yang akan digunakan untuk menyimpan seluruh file aplikasi WebSocket.
```
mkdir websocket-chat
cd websocket-chat
```
Keterangan:
Seluruh file source code, konfigurasi, dan dependency aplikasi akan disimpan di dalam direktori websocket-chat.
Menginisialisasi Project Node.js
Buat file konfigurasi project Node.js menggunakan NPM.
```
npm init -y
```
Keterangan:
Perintah ini akan membuat file package.json secara otomatis yang digunakan untuk menyimpan informasi project dan daftar dependency aplikasi.
Menginstal Dependency Aplikasi
Instal package yang dibutuhkan untuk menjalankan aplikasi chat berbasis WebSocket.
```
npm install express ws mysql2
```
Fungsi masing-masing package:
- express digunakan untuk menjalankan web server.
- ws digunakan untuk membangun komunikasi WebSocket.
- mysql2 digunakan untuk menghubungkan aplikasi dengan database MariaDB.
Keterangan:
Setelah proses instalasi selesai, direktori node_modules akan dibuat secara otomatis dan seluruh dependency yang diperlukan aplikasi telah siap digunakan.

Membuat Konfigurasi Database

Membuat File Koneksi Database
Selanjutnya buat file db.js yang akan digunakan untuk menghubungkan aplikasi Node.js dengan database MariaDB.
Jalankan perintah berikut:
```
nano db.js
```
Masukkan konfigurasi berikut:
```
const mysql = require('mysql2/promise');

const pool = mysql.createPool({
    host: 'localhost',
    user: 'chatuser',
    password: 'Chat123!',
    database: 'websocket_chat',
    waitForConnections: true,
    connectionLimit: 10
});

module.exports = pool;
```
Keterangan:
File db.js berfungsi sebagai konfigurasi koneksi antara aplikasi Node.js dan database MariaDB. Penggunaan connection pool memungkinkan aplikasi mengelola banyak koneksi database secara lebih efisien, terutama ketika terdapat banyak pengguna yang terhubung secara bersamaan.

Membuat Server WebSocket

Membuat File Server WebSocket
Selanjutnya buat file server.js yang akan berfungsi sebagai backend utama aplikasi chat real-time.

Jalankan perintah berikut:

nano server.js

Masukkan kode berikut:

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const db = require('./db');

const app = express();

app.use(express.static(__dirname));

const server = http.createServer(app);

const wss = new WebSocket.Server({
    server
});

wss.on('connection', async (ws) => {

    try {

        const [history] =
            await db.execute(`
                SELECT *
                FROM messages
                ORDER BY id DESC
                LIMIT 50
            `);

        ws.send(JSON.stringify({
            type:'history',
            data:history.reverse()
        }));

    } catch(err){

        console.log(err);

    }

    ws.on('message', async(data) => {

        try{

            const chat =
                JSON.parse(
                    data.toString()
                );

            const [result] =
                await db.execute(
                    `
                    INSERT INTO messages
                    (username,message)
                    VALUES (?,?)
                    `,
                    [
                        chat.username,
                        chat.message
                    ]
                );

            const payload = {
                type:'message',
                id:result.insertId,
                username:chat.username,
                message:chat.message,
                created_at:new Date()
            };

            wss.clients.forEach(client => {

                if(
                    client.readyState ===
                    WebSocket.OPEN
                ){

                    client.send(
                        JSON.stringify(
                            payload
                        )
                    );

                }

            });

        }catch(err){

            console.log(err);

        }

    });

});

server.listen(3000, () => {

    console.log(
        'Server berjalan di port 3000'
    );

});

File server.js memiliki beberapa fungsi utama, yaitu:

Menjalankan web server menggunakan Express.
Membuat dan mengelola koneksi WebSocket.
Menerima dan mengirim pesan secara real-time.
Menyimpan pesan ke database MariaDB.
Menampilkan 50 riwayat chat terakhir saat pengguna terhubung.
Mengirim pesan baru ke seluruh pengguna yang sedang terhubung.

Keterangan:
Server WebSocket berjalan pada port 3000. Nantinya port ini akan diakses melalui Nginx Reverse Proxy sehingga pengguna dapat menggunakan koneksi HTTPS dan WSS dengan lebih aman.

Membuat Tampilan Chat

Membuat Tampilan Antarmuka Chat
Selanjutnya buat file index.html yang akan digunakan sebagai antarmuka pengguna untuk aplikasi chat real-time.

Jalankan perintah berikut:

nano index.html

Masukkan kode berikut:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PWH Chat Room</title>

<style>

/* CSS */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial,sans-serif;
    background:#f5f5f5;
}

.container{
    max-width:1000px;
    margin:auto;
    height:100vh;
    display:flex;
    flex-direction:column;
}

.header{
    background:#075e54;
    color:white;
    padding:15px;
}

.user-panel{
    background:white;
    padding:15px;
    border-bottom:1px solid #ddd;
}

#chat{
    flex:1;
    overflow-y:auto;
    padding:15px;
    background:#ece5dd;
}

.message{
    max-width:70%;
    padding:10px;
    border-radius:10px;
    margin-bottom:10px;
}

.mine{
    background:#dcf8c6;
    margin-left:auto;
}

.other{
    background:white;
}

.footer{
    background:white;
    padding:15px;
    display:flex;
    gap:10px;
}

.footer input{
    flex:1;
    padding:12px;
}

</style>

</head>

<body>

<div class="container">

<div class="header">
<h2>💬 WebSocket Chat Room</h2>
</div>

<div class="user-panel">

<input type="text"
id="username"
placeholder="Masukkan nama">

<button onclick="saveUsername()">
Simpan Nama
</button>

<div id="current-user"></div>

<div id="status">
🔴 Connecting...
</div>

</div>

<div id="chat"></div>

<div class="footer">

<input
type="text"
id="msg"
placeholder="Tulis pesan...">

<button onclick="sendMessage()">
Kirim
</button>

</div>

</div>

<script>

/* JavaScript */

const ws = new WebSocket(
(
location.protocol === 'https:'
? 'wss://'
: 'ws://'
) + location.host
);

/* kode JavaScript lainnya */

</script>

</body>
</html>

File index.html ini memiliki beberapa fitur utama, antara lain:

Input nama pengguna sebelum mulai mengirim pesan.
Penyimpanan nama pengguna menggunakan localStorage.
Tampilan bubble chat seperti aplikasi pesan modern.
Status koneksi WebSocket secara real-time.
Area chat yang otomatis bergulir ke bawah saat pesan baru diterima.
Tombol untuk mengirim pesan.
Dukungan tombol Enter untuk mengirim pesan dengan lebih cepat.
Menampilkan riwayat pesan yang dikirim sebelumnya.
Menampilkan waktu pengiriman setiap pesan.

Keterangan:
File index.html berfungsi sebagai antarmuka utama aplikasi chat. Seluruh komunikasi dilakukan menggunakan WebSocket sehingga pesan dapat dikirim dan diterima secara real-time tanpa perlu me-refresh halaman.

Menjalankan dengan PM2

Menginstal PM2
Agar aplikasi tetap berjalan meskipun sesi SSH ditutup atau server direstart, gunakan PM2 sebagai process manager untuk Node.js.
Instal PM2 menggunakan perintah berikut:
```
npm install -g pm2
```
Keterangan:
PM2 memungkinkan aplikasi Node.js berjalan di latar belakang dan memudahkan proses pemantauan serta pengelolaan aplikasi.
Menjalankan Aplikasi dengan PM2
Jalankan aplikasi WebSocket menggunakan PM2 dengan perintah berikut:
```
pm2 start server.js --name websocket-chat
```
Periksa status aplikasi:
```
pm2 status
```
Output :

Keterangan:
Apabila status aplikasi menunjukkan online, berarti server WebSocket telah berhasil dijalankan menggunakan PM2.
Mengaktifkan Startup Otomatis
Simpan konfigurasi PM2 dan aktifkan startup otomatis agar aplikasi berjalan kembali setelah VPS direstart.
```
pm2 save
pm2 startup
```
Keterangan:
Dengan PM2, aplikasi WebSocket akan tetap berjalan di latar belakang dan otomatis aktif kembali setiap kali server dinyalakan ulang.
Mengakses Aplikasi Chat
Buka browser, kemudian akses alamat berikut:
```
http://IP-VPS:3000
```
Ganti IP-VPS dengan alamat IP server yang digunakan.

Setelah halaman berhasil terbuka, masukkan nama pengguna, kemudian kirim pesan untuk mulai menggunakan aplikasi chat secara real-time.

Keterangan:
Setiap pesan yang dikirim akan disimpan ke database MariaDB dan secara otomatis diteruskan ke seluruh pengguna yang sedang terhubung melalui WebSocket.

Penutup

WebSocket merupakan salah satu teknologi yang sangat efektif untuk membangun aplikasi real-time, seperti chat room, sistem notifikasi, dashboard monitoring, hingga aplikasi Internet of Things (IoT). Dengan memanfaatkan Node.js, Express, package ws, dan MariaDB, Anda dapat membuat aplikasi chat sederhana yang mampu mengirim dan menerima pesan secara real-time sekaligus menyimpan seluruh riwayat percakapan ke dalam database.

Melalui panduan ini, Anda telah mempelajari cara menyiapkan VPS, menginstal Node.js dan MariaDB, membangun server WebSocket, membuat antarmuka chat berbasis web, menyimpan pesan ke database, serta menjalankan aplikasi menggunakan PM2 agar siap digunakan pada lingkungan produksi. Sebagai pengembangan lebih lanjut, Anda dapat menambahkan berbagai fitur tambahan, seperti daftar pengguna yang sedang online, notifikasi pengguna masuk dan keluar, penghapusan pesan, room chat, hingga sistem autentikasi pengguna agar aplikasi menjadi lebih lengkap dan profesional.