Web Socket adalah protokol yang menyediakan komunikasi full-duplex (multiway) yaitu memungkinkan komunikasi di kedua arah secara bersamaan. Ini adalah teknologi web modern di mana ada koneksi berkelanjutan antara browser pengguna (klien) dan server.
Bagi kebanyakan developer yang menggunakan nodejs sebagai bahasa pemrogramannya, saat mengkonfigurasi dan menjalankan websocket di localhost pasti tidak akan menemui kendala, karena ketika website dijalankan menggunakan command “npm start / yarn start” maka reactjs akan menjalankan juga module websocket.
Namun bagaimana jika metode yang digunakan adalah dengan command “npm run build / yarn build“?
“npm start / yarn start” dan “npm run build / yarn build” adalah command yang memiliki fungsinya masing2 sesuai kebutuhan developer.
Singkatnya “npm start / yarn start” sering digunakan untuk deploy reactweb yang belum memiliki webserver engine seperti apache, nginx, atau lightspeed jika diakses melalui browser, Anda perlu menuliskan link http://localhost:8001
Sedangkan “npm run build” biasanya digunakan untuk menghasilkan static file yang akan diluncurkan oleh webserver engine (apache, nginx, atau lightspeed) agar dapat tampil ketika dari browser mengakses websitenya, (file yang dihasilkan biasanya terdiri dari index.html, style.scss atau lain2 nya). Penjelasan mengenai cara deploy nodejs dengan npm run build atau yarn build bisa cek https://blog.alvianaufan.my.id/cara-build-website-reactjs-dengan-yarn-dan-apache/.
Dalam artikel kali ini saya ingin sharing bagaimana cara mengatasi error “WebSocket connection to wss://domain-anda.com/ws failed”
Error tersebut biasanya disebabkan karena dari website react tidak bisa menghubungi websocket url endpoint dengan protokol ws atau wss. Jadi hal yang perlu dilakukan adalah dengan menambahkan settingan rewrite pada apache host domain-anda.com (domain aplikasi yang menjalankan wss).
Berikut adalah langkah2 untuk konfigurasi rewrite websocket pada virtualhost apache domain enpoint nya.
- Jika website client nya menggunakan https maka disarankan untuk install https juga di domain-anda.com agar komunikasi menggunakan protokol wss dapat dilakukan. Namun jika hanya http (tanpa ssl, maka bisa secara langsung berkomunikasi dengan ws ataupun wss di website domain-anda.com).
- Masuk ke folder virtual host dan edit pada file domain-anda.com
<VirtualHost :80> ServerName domain-anda.com ServerAlias www.domain-anda.com #existing configration ..... #tambahkan line dibawah ini pada file .conf domain-anda.com RewriteEngine On RewriteCond %{HTTP:Upgrade} =websocket [NC] RewriteRule ^/ws/(.) ws://127.0.0.1:8001/ws/$1 [P,L] </VirtualHost> <VirtualHost :443> ServerName domain-anda.com ServerAlias www.domain-anda.com #existing configration ..... SSLProxyEngine on #masukkan file cert, key ssl domain-anda.com SSLEngine on SSLCertificateFile /etc/letsencrypt/live/domain-anda.com/fullchain.pem SSLCertificateKeyFile /etc/letsencrypt/live/domain-anda.com/privkey.pem Include /etc/letsencrypt/options-ssl-apache.conf #tambahkan line dibawah ini pada file .conf domain-anda.com RewriteEngine On RewriteCond %{HTTP:Upgrade} =websocket [NC] RewriteRule ^/ws/(.) ws://127.0.0.1:8001/ws/$1 [P,L] </VirtualHost>– pastikan port websocket yang dimasukkan sudah sesuai dengan yang sudah Anda konfigurasikan di server. Dalam hal ini contohnya menggunakan port 8001.
- Setelah itu jalankan perintah berikut ini:
a2enmod proxy a2enmod proxy_http a2enmod proxy_wstunnel /etc/init.d/apache2 restart
- Lalu silahkan coba akses kembali dari website react untuk menghubungi websocket pada url ws://domain-anda.com atau wss://domain-anda.com.
Sampai sini, seharusnya anda sudah dapat menggunakan websocket tanpa ada error. Jika masih menampilkan error, silahkan untuk mengecek kembali pada bagian url websocket nya atau port yang digunakan mungkin perlu di open terlebih dahulu melalui firewall network.
Demikian cara mengatasi error “WebSocket connection to wss://domain-anda.com/ws failed” atau Cara konmfigurasi Proxy WSS dan WS di Apache Server. Tulis di kolom komentar jika Anda memiliki pertanyaan atau menemui kendala terkait artikel ini 🙂
