{"id":83,"date":"2024-10-28T02:23:00","date_gmt":"2024-10-28T02:23:00","guid":{"rendered":"https:\/\/emka.web.id\/tutorial\/2024\/10\/28\/tutorial-cara-menjalankan-aplikasi-real-time-dengan-apache-dan-websocket\/"},"modified":"2024-10-28T02:23:00","modified_gmt":"2024-10-28T02:23:00","slug":"tutorial-cara-menjalankan-aplikasi-real-time-dengan-apache-dan-websocket","status":"publish","type":"post","link":"https:\/\/emka.web.id\/en\/2024\/10\/tutorial-cara-menjalankan-aplikasi-real-time-dengan-apache-dan-websocket.html","title":{"rendered":"Tutorial Cara Menjalankan Aplikasi Real-Time dengan Apache dan WebSocket"},"content":{"rendered":"<\/p>\n<div style=\"clear: both;text-align: center\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgSaUZ1hYJDPyzSMEeupD9FATxHJCnuim2UkUnDHjm5c2LS7FYwnGKifHPktKjrEkBeP7x9l7fZFGp7mQodNK4t54IPmQrsJCMLKqbYuICnYeDuZzOcPJslYHWmNqMtORfS_b7QEdGRL30GjD5YJ7ZPGPCPPP3etoTgvddslDguuFTytCkoownYR7ySVmg\/s560\/websocket.jpg\" style=\"margin-left: 1em;margin-right: 1em\"><img loading=\"lazy\" decoding=\"async\" border=\"0\" data-original-height=\"560\" data-original-width=\"560\" height=\"320\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgSaUZ1hYJDPyzSMEeupD9FATxHJCnuim2UkUnDHjm5c2LS7FYwnGKifHPktKjrEkBeP7x9l7fZFGp7mQodNK4t54IPmQrsJCMLKqbYuICnYeDuZzOcPJslYHWmNqMtORfS_b7QEdGRL30GjD5YJ7ZPGPCPPP3etoTgvddslDguuFTytCkoownYR7ySVmg\/s320\/websocket.jpg\" width=\"320\" \/><\/a><\/div>\n<p>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.<span><a name=\"more\"><\/a><\/span><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>Mengapa WebSocket Penting?<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>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:<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<ul>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<li><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>Chat real-time:<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> WebSocket memungkinkan pesan dikirim dan diterima secara instan dalam aplikasi chat.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/li>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<li>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Pembaruan data langsung:<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span> Platform analisis, aplikasi keuangan, dan papan skor bisa menampilkan data yang berubah secara real-time.<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/li>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<li><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>Game online:<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> WebSocket memungkinkan sinkronisasi permainan, seperti gerakan pemain dan pembaruan status.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/li>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/ul>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Konfigurasi Apache untuk WebSocket<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Misalnya, Anda memiliki aplikasi Next.JS yang berjalan di URL <\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<a href=\"https:\/\/www.google.com\/url?sa=E&amp;q=https%3A%2F%2Fexample.com\" target=\"_blank\">&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>https:\/\/example.com<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/a><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>, 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.<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<\/p>\n<div style=\"clear: both;text-align: center\"><a href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgDcjIybSAFFFJi-01tBz9s6BJ7Md_otGQnc4Pf5tCXWQsJXWzicID8IyEI_JzWf8Dz7He5Mi49LC8h1C6kAoiFoM7lBLEs9sisJv4d0J05ikXBjJs2shki8YwCqscl3BMgffFKtW8OGS3KNxg48nL0wVQvj2xYlTeNB9-XDq6G8mDKTDL1q5qsuRLbp14\/s600\/apache-server.webp\" style=\"margin-left: 1em;margin-right: 1em\"><img loading=\"lazy\" decoding=\"async\" border=\"0\" data-original-height=\"400\" data-original-width=\"600\" height=\"213\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgDcjIybSAFFFJi-01tBz9s6BJ7Md_otGQnc4Pf5tCXWQsJXWzicID8IyEI_JzWf8Dz7He5Mi49LC8h1C6kAoiFoM7lBLEs9sisJv4d0J05ikXBjJs2shki8YwCqscl3BMgffFKtW8OGS3KNxg48nL0wVQvj2xYlTeNB9-XDq6G8mDKTDL1q5qsuRLbp14\/s320\/apache-server.webp\" width=\"320\" \/><\/a><\/div>\n<p><span><br \/><\/span><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Langkah Konfigurasi:<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<ol><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<li>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Aktifkan Modul yang Dibutuhkan:<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span> Pastikan modul proxy, proxy_http, proxy_wstunnel, dan rewrite diaktifkan. Anda dapat mengaktifkan modul ini menggunakan perintah berikut:<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<div>\n<div>\n<pre><code>sudo a2enmod proxy\nsudo a2enmod proxy_http\nsudo a2enmod proxy_wstunnel\nsudo a2enmod rewrite<\/code>\n   <\/pre>\n<\/div>\n<\/div>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/li>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<li><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>Konfigurasi VirtualHost:<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> Tambahkan konfigurasi berikut ke file VirtualHost Apache Anda (biasanya ditemukan di \/etc\/apache2\/sites-available\/):<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<div>\n<div>\n<pre><code>&lt;VirtualHost *:80&gt;\n    ServerName example.com\n\n    <span># Konfigurasi lainnya (seperti DocumentRoot, dll.)<\/span>\n\n    <span># Proxy koneksi WebSocket<\/span>\n    RewriteEngine On\n    RewriteCond %{HTTP:Upgrade} =websocket [NC]\n    RewriteRule \/(.*) wss:\/\/localhost:3000\/<span>$1<\/span> [P,L]\n\n    <span># Proxy permintaan HTTP lainnya<\/span>\n    ProxyPass \/ http:\/\/localhost:3000\/\n    ProxyPassReverse \/ http:\/\/localhost:3000\/\n&lt;\/VirtualHost&gt;<\/code>\n    <\/pre>\n<\/div>\n<footer><\/footer>\n<\/div>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Dalam konfigurasi ini:<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<ul><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<li>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>RewriteRule:<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span> Menangani koneksi WebSocket (wss:\/\/) dengan meneruskan mereka ke server backend (misalnya, yang berjalan di port 3000).<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/li>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<li><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>ProxyPass\/ProxyPassReverse:<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> Menangani lalu lintas HTTP biasa.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/li>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/ul>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/li>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<li><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>Restart Apache:<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> Setelah melakukan perubahan, restart Apache untuk menerapkan konfigurasi:<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<div>\n<div>\n<pre>      <code>sudo systemctl restart apache2<\/code>\n    <\/pre>\n<\/div>\n<footer><\/footer>\n<\/div>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/li>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/ol>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Penjelasan Konfigurasi:<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Kode konfigurasi di atas mengatur bagaimana Apache menangani permintaan yang datang ke domain <\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>example.com<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<ul><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<li>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>RewriteEngine On<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> mengaktifkan modul rewrite Apache, memungkinkan aturan untuk memanipulasi URL yang masuk.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/li>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<li>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>RewriteCond %{HTTP:Upgrade} =websocket [NC]<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> memeriksa apakah permintaan yang masuk memiliki header <\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>Upgrade<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> yang nilainya sama dengan <\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>websocket<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>. Ini berarti bahwa permintaan tersebut adalah permintaan WebSocket.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/li>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<li>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>RewriteRule \/(.*) wss:\/\/localhost:3000\/$1 [P,L]<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> 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 <\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>wss:\/\/localhost:3000<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/li>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<li>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;-->\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>ProxyPass \/ http:\/\/localhost:3000\/<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> dan <\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>ProxyPassReverse \/ http:\/\/localhost:3000\/<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span> menangani permintaan HTTP biasa dengan meneruskan mereka ke server backend di <\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<span>http:\/\/localhost:3000<\/span>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/li>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/ul>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><strong><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>Kesimpulan:<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/strong>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n<p><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><span>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.<\/span><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;-->&lt;!&#8211;&gt;<\/p>\n<p>&#8211;&gt;<!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><!--&gt;--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-83","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/posts\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":0,"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"wp:attachment":[{"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emka.web.id\/en\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}