SocketCluster ERROR: WebSocketException: Connection to ‘http://…’ was not upgraded to websocket

Pernah ga, ngoding kena masalah yang susah sekali cari solusinya di Google bahkan Stack Overflow? Bahkan dicoba2 dengan beberapa platform dan library2 lain sampai seharian, tapi ga nemu2 solusinya? Ini kisahku..

Jadi begini ceritanya bosque.. Aku lagi bikin aplikasi mobile chatting memanfaatkan WebSocket dengan Flutter. Ada kepikiran pakai library Socket.io, karena setelah dibaca2 dan dilihat star-nya di Github cukup tinggi. Akan tetapi lumayan juga kalau harus develop dari awal. Jadinya cari yang siap jadi dulu buat cepet2an. Googling2 nemu Pusher, lumayan juga tinggal pake, ada versi free dan berbayar. Eh namun ternyata, driver buat Flutter ga jalan bos. Cobain sample-nya langsung error, diutek2 tetep aja. Googling2 lagi deh, dan akhirnya nemu SocketCluster, server app untuk pub/sub pakai WebSocket berbasis Node js. Konsepnya cukup bagus, terutama untuk scaling-nya, siap dipakai di Docker & Kubernetes. Meski star di Github cuma 5k, dan list perusahaan yang pakai juga ga begitu banyak, tapi oke lah boleh dicoba.

Uji coba dilakukan di browser dengan client driver bawaannya, berjalan dengan lancar. Dibandingkan dengan Socket.io, lebih sederhana SocketCluster, terutama kalau untuk bikin app chatting. Kalau Socket.io masih ‘mentah’, harus bikin sendiri dari awal. Uji coba selanjutnya, pakai client driver versi Flutter/Dart. Dan ternyata.. error boss!! Sudah berharap2 bisa, eh ternyata gagal. Error-nya gini:

ERROR: WebSocketException: Connection to ‘http://localhost:8000' was not upgraded to websocket

Apa yang salah ya? Padahal pakai client driver bawaan versi browser JavaScript aman sentosa. Ada dua kemungkinan: server-nya yang salah, atau memang client driver versi Flutter/Dart yang ga jalan, karena masih versi nol koma. Oke, perjalanan mencari solusi dimulai.

Pertama, apakah servernya yang bermasalah? Tapi kok kayaknya enggak ya. Pakai client driver bawaan versi JavaScript browser bisa jalan, bahkan coba versi Node js juga jalan lancar. Akhirnya dicoba lagi dengan library2 lainnya yang lebih ‘mentah’ dari npm, misalkan package ‘websocket’ dan ‘ws’. Tapi tetep nggak jalan juga. Apakah dia pakai protocol sendiri seperti si Socket.io?

Baiklah. Kedua, apakah client driver Flutter/Dart yang bermasalah? Kalau dibedah, di dalamnya dia pakai library WebSocket bawaan Dart. Coba dikonekkin ke echo.websocket.org, bisa! Coba2 bikin skrip server WebSocket lokalan sederhana buat nangkep request-nya, jalan juga! Kok aneh?

Jadi masalahnya ada di mana? SocketCluster server bisa diakses dengan client driver versi JavaScript, tapi tidak dengan client driver versi Flutter/Dart. Sepertinya, masalahnya ada di library WebSocket bawaan Dart. Tapi.. kok bisa nyambung ke server WebSocket biasa, yang dibikin dengan Node js? Tapi.. kok dia ga bisa nyambung ke server SocketCluster? Padahal itu bawaannya, aneh sekali..

Akhirnya, coba ublek2 jeroan server SocketCluster, ternyata dia pakai package Node js ‘ws’, dan bisa ganti ke ‘sc-uws’. Untuk pakai package ‘sc-uws’ harus downgrade Node js ke versi 8 dulu. Setelah coba ganti, eh.. tetep aja ga bisa konek dari Dart, dengan error yang sama.

Karena SocketCluster dalamannya pakai package ‘ws’, mungkin bisa kali ya kalau dipakai dari library yang sama, ‘ws’, tapi dipakai sebagai client. Setelah dicoba dan di-log, ketemu error seperti ini:

Error: Unexpected server response: 400

Loh.. Errornya beda dengan sebelumnya! Googling2 lagi deh, baca banyak sekali referensi yang nyerempet2 dengan masalah itu, tapi ya nggak ketemu2 solusi2nya. Ada yang bilang masalah karena proxy, ada juga firewall, ada juga tentang header yang case sensitive, dan lain2 banyak sekali! Sampai akhirnya nemu orang yang diagnosa penyakit WebSocket pakai package ‘wscat’. Ah iya! Kenapa aku ga pake itu ya? Itu kan tool buat ngecek server WebSocket. Pernah pake, tapi kok lupa ya.

Setelah dicoba ternyata sama aja hasilnya. Lihat2 di Github ada yang mengalami hal yang sama error-nya. Katanya harus ditambahkan ‘/socketcluster’ di url-nya. Pakai client driver Flutter/Dart juga sudah ditambahin ‘/socketcluster’ di belakangnya, tetep ga jalan. Url-nya dari ‘ws://localhost:8000’ menjadi ‘ws://localhost:8000/socketcluster’. Coba konek pakai ‘wscat’, node ‘ws’, dan library WebSocket Dart, tetep ga bisa jalan juga.

Hmm.. sepertinya ada yang keliru ini. Baik, mari kita list keanehannya:

1. SocketCluster + client driver JavaScript web/Node js = JALAN
2. SocketCluster + client driver Flutter/Dart = GA JALAN
3. SocketCluster + library WebSocket Dart = GA JALAN
4. SocketCluster + library WebSocket Node = GA JALAN
5. SocketCluster + wscat = GA JALAN
6. Websocket server Node js +library WebSocket Dart = JALAN
7. Websocket server Node js + library WebSocket Node js = JALAN

Begitulah kurang lebih uji coba-nya, bahkan sempat pakai Socket.io juga buat cobain, tapi jelas ga jalan dong karena dia punya protocol sendiri.

Setelah bertubi2 dihajar uji coba dengan server berbeda, config, port, firewall, library2 WebSocket berbeda, bahkan sampai harus bikin script WebSocket server buat ngetes. Ditambah bertubi2 mencari2 solusi, baik di stack overflow maupun di issue2nya repo2 Github, akhirnya.. solusinya ketemu juga! Tahu apa? Tambahkan ‘/’ di akhir url!!!! Huahahahaa.. gokil!!! :D Solusi yang sangat kompleks sekali sodara2!!! Dari ‘ws://localhost:8000/socketcluster’ menjadi ‘ws://localhost:8000/socketcluster/’

Begitulah perjalanan menemukan slash! :D, yang jadi banyak sekali terpaksa belajar WebSocket, baik konsep atau pun library2-nya, termasuk masalah2 yang dihadapi. Meskipun ternyata sumber utama masalahnya sangatlah ‘kompleks’ ya :D bukan server, bukan pula client driver, atau pun library-nya. Tapi, masalahnya adalah ‘SLASH’ brrooo!!! Maklum baru belajaran websocket. Hehe.. :D