Tutorial Cara Menjalankan Aplikasi Real-Time dengan Apache dan WebSocket

Posted on October 28, 2024

Aplikasi modern seringkali memanfaatkan WebSocket untuk menghadirkan pengalaman real-time, seperti pembaruan langsung atau fitur chat. Jika aplikasi Anda dijalankan di server Apache, konfigurasi yang tepat diperlukan untuk menangani permintaan WebSocket (wss://). Panduan sederhana ini akan menunjukkan cara mengkonfigurasi Apache untuk menangani permintaan ini, mulai dari mengaktifkan modul yang tepat hingga menyesuaikan pengaturan VirtualHost.

  • WebSocket memungkinkan pesan dikirim dan diterima secara instan dalam aplikasi chat.

    Pembaruan data langsung:

  • WebSocket memungkinkan sinkronisasi permainan, seperti gerakan pemain dan pembaruan status.

    Konfigurasi Apache untuk WebSocket

    Misalnya, Anda memiliki aplikasi Next.JS yang berjalan di URL


    Langkah Konfigurasi:

      Aktifkan Modul yang Dibutuhkan:

      sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_wstunnel
sudo a2enmod rewrite

    1. Tambahkan konfigurasi berikut ke file VirtualHost Apache Anda (biasanya ditemukan di /etc/apache2/sites-available/):

      <VirtualHost *:80>
    ServerName example.com

    # Konfigurasi lainnya (seperti DocumentRoot, dll.)

    # Proxy koneksi WebSocket
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule /(.*) wss://localhost:3000/$1 [P,L]

    # Proxy permintaan HTTP lainnya
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>

      Dalam konfigurasi ini:

        RewriteRule:

      • Menangani lalu lintas HTTP biasa.

      • Setelah melakukan perubahan, restart Apache untuk menerapkan konfigurasi:

              sudo systemctl restart apache2

    Penjelasan Konfigurasi:

    Kode konfigurasi di atas mengatur bagaimana Apache menangani permintaan yang datang ke domain .

      mengaktifkan modul rewrite Apache, memungkinkan aturan untuk memanipulasi URL yang masuk.

      memeriksa apakah permintaan yang masuk memiliki header yang nilainya sama dengan . Ini berarti bahwa permintaan tersebut adalah permintaan WebSocket.

      mendefinisikan aturan untuk menangani permintaan WebSocket. Aturan ini mengambil semua permintaan yang sesuai dengan kondisi sebelumnya dan meneruskannya ke server yang menjalankan aplikasi WebSocket di .

      dan menangani permintaan HTTP biasa dengan meneruskan mereka ke server backend di .

      Kesimpulan:

      Dengan mengikuti langkah-langkah yang diuraikan dalam artikel ini, Anda dapat berhasil mengkonfigurasi Apache untuk menangani permintaan WebSocket (wss://), memastikan komunikasi yang lancar antara klien dan server backend. Dengan mengaktifkan modul yang diperlukan dan mengatur konfigurasi ProxyPass dan RewriteRule yang benar, Apache dapat secara efisien memproksi koneksi WebSocket serta mengelola lalu lintas HTTP biasa.