Pacaran sama WebSocket HTML5

Arif Budiman
Tek Analogi
Published in
3 min readNov 10, 2020

cmiiw lah, belajar WebSocket secara ngawur…

si Client master of love

Oke, langsung masuk aja. Apa itu websocket, kalo dari bahasa gua websocket itu koneksi dua arah secara realtime. Analogi gampangnya kalo kalian itu lagi nelpon. Kalo lagi telpon itu pasti ada dua orang yang satu namanya Client si penelpon dan yang satu namanya Server si penerima telpon.

Udah jelas kan? Link mantap

Kalo belom jelas gini deh, jadi kan ceritanya si Client itu lagi pedekate sama Server. Buat ilangin kangen, si Client bakal nelpon si Server. Tapi bisa aja tuh si Server lagi ditoilet atau lagi marah sama Client, jadi ditolak tuh telepon-nya (handshake). Kalo si Client tetep kekeh ya telepon lagi aja (cuma gitu doang caranya 😩 Hufft….). Link mantap seger

Nah kalo si Server udah angkat teleponnya, Client bakal pickup line dari pedekate (http) ke pacaran (ws). Ini statusnya ada yang backstreet (pake s biar secure) belakangnya, ada yang terang-terangan (gapake s). Kalo Client udah backstreet biasanya bakal tetep backstreet pacarannya. Tapi tergantung Server juga sih mau backstreet apa engga. Link mantap mantap

ping pong handler

Selama Client sama Server pacaran, biasanya Client bakal nanyain P (ping) terus Server biasa jaman now lah. Nah Server bakal nyaut Iya apa P mulu… (pong). Biasanya kalo Server gak jawab atau kelamaan Client mutusin teleponnya (Server juga bisa gini). Tapi biasanya yang hubungin duluan itu selalu si Client sih. Link tarik sis

Namanya juga berhubungan ada aja masalahnya.

ketika si Server ngambek

Mulai dari ambekan, tiap kali ambekan si Server pasti ngomel2, abis itu langsung ditutup hubungan-nya pake kode2 gitu. Si Client mau gak mau harus tau kodenya apa dari Server. Kadang harus pake kesepakatan gitu buat nanganin masalahnya.

diintipin tetangga

Kemudian juga kadang dikepoin sama orang lain. Nah, kalo masalah ini sebenernya tinggal kasih masking aja sih. Kan cara ngomongnya bisa pake cara normal (pake text), sama bahasa robot. Yang bahasa robot itu ada 2 pake Blob sama ArrayBuffer.

Si Client lagi gak jelas

Masalahnya engga cuma dari si Server, kadang kalo status Client engga jelas (dc tapi belom dc di server). Server itu bakal nyimpen semua yang mau dia omongin, tiba2 banyak aja yang masuk omongannya sampe bingung mau gimana. Soalnya si WebSocket itu Servernya maunya kirim sampe berhasil (TCP) beda sama WebRTC yang kalo ngobrol satu arah juga gapapa (UDP).

Udah deh segitu aja curhatnya. Nih ada bonus link mantap terbaru:

  • Array Buffer bisa pake protobuf lumayan biar gak gampang tembus kalo pake text aja.
  • Kalo beda bahasa pastiin bentuk JSONnya camel case, biar standar.
  • Belajar handle event juga dijavascript soalnya WebSocket pake event base pattern.

--

--