Tutorial Cara Menjalankan Aplikasi Real-Time dengan Apache dan WebSocket

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.

Mengapa WebSocket Penting?

WebSocket adalah protokol komunikasi yang memungkinkan komunikasi dua arah secara real-time antara klien (misalnya, browser web) dan server. Tidak seperti HTTP yang bersifat request-response, WebSocket membuka koneksi yang terus aktif dan memungkinkan data mengalir ke kedua arah secara bersamaan. Ini sangat penting untuk aplikasi yang membutuhkan pembaruan data secara langsung, seperti:

• Chat real-time: WebSocket memungkinkan pesan dikirim dan diterima secara instan dalam aplikasi chat.

• Pembaruan data langsung: Platform analisis, aplikasi keuangan, dan papan skor bisa menampilkan data yang berubah secara real-time.

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

Konfigurasi Apache untuk WebSocket

Misalnya, Anda memiliki aplikasi Next.JS yang berjalan di URL https://example.com, tetapi permintaan WebSocketnya terlihat seperti wss://example.com/_next/webpack-hmr. Untuk menangani permintaan WebSocket (wss://) menggunakan ProxyPass di Apache, pastikan server Apache dikonfigurasi dengan benar untuk memproksi koneksi WebSocket.

Langkah Konfigurasi:

1. Aktifkan Modul yang Dibutuhkan: Pastikan modul proxy, proxy_http, proxy_wstunnel, dan rewrite diaktifkan. Anda dapat mengaktifkan modul ini menggunakan perintah berikut:

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

2. Konfigurasi VirtualHost: 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 koneksi WebSocket (wss://) dengan meneruskan mereka ke server backend (misalnya, yang berjalan di port 3000).

   • ProxyPass/ProxyPassReverse: Menangani lalu lintas HTTP biasa.

3. Restart Apache: 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 example.com.

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

• RewriteCond %{HTTP:Upgrade} =websocket [NC] memeriksa apakah permintaan yang masuk memiliki header Upgrade yang nilainya sama dengan websocket. Ini berarti bahwa permintaan tersebut adalah permintaan WebSocket.

• RewriteRule /(.*) wss://localhost:3000/$1 [P,L] 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 wss://localhost:3000.

• ProxyPass / http://localhost:3000/ dan ProxyPassReverse / http://localhost:3000/ menangani permintaan HTTP biasa dengan meneruskan mereka ke server backend di http://localhost:3000.

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.