Ngobrolin WebSocket - Ngobrolin WEB

3:38seperti chat

3:40gitu ya

3:40terus mungkin video

3:43atau yang lainnya itu

3:44kenapa butuh protokol baru

3:46nggak di HTTP aja

3:48karena kan HTTP itu kan dia sifatnya

3:51satu stateless

3:52request response

3:54jadi kalau

3:56kita tidak merequest apa-apa

3:58server nganggur

3:59dan ribet kan kita harus request

4:03kita ngirim header

4:04sama server diterima, dikonfirmasi

4:07server ngirim balik

4:09kita harus, apa klien

4:10browser mesti konfirmasi lagi

4:13nerima dulu

4:14terus minta data lagi, request lagi

4:16ribet kan

4:17terus apa lagi tadi?

4:20apa ya, jadi

4:21kalau misalkan

4:24kan sifatnya itu kalau misalkan ada request

4:26request ini baik itu get, post

4:28ngisi form dan lain-lain ya, kita ketik

4:31misalkan

4:32ngobrolinweb.com gitu kan

4:34Nah itu dia servernya baru bekerja terus dia kirimin balik habis itu udah

4:39selesai ya Jadi itu adalah satu proses lengkap sampai

4:45life cycle

4:47life cycle nya selesai sampai si user mendapatkan halaman web yang diinginkan nah sebelum kita ke web socket sempat dulu ada solusi kalau Ivan bilang akal montir jadi polling setiap berapa detik dipoling di refresh

5:06manual gitu atau pakai itu berarti istilahkan ya cuma istilah buat kita minta aja secara berkala

5:13gitu ya Iya ini ada update gak sih ini ada update gak sih gitu gitu ya itu tekniknya namanya hardbit

5:21dan sampai sekarang masih dipakai kok hardbit untuk sesuatu yang enggak butuh stream karena

5:28enggak semua enggak semua hosting itu bisa stream ya jadi perlu diketahui teman-teman enggak semua

5:35bisa stream apalagi Cloud front CDN lah ya semuanya di depan CDN by default tanpa perlu setting-setting

5:45nggak bisa stream belum bisa ya tapi kalau by nature apakah cuma pakai apa itu pakai http

5:55biasa kan ke request respon http biasa atau ada teknik apa khusus gitu oh biasa jadi kalau di

6:04TTP ada beberapa teknik jadi kita bahas dulu deh sedikit mengenai apa soket itu kenapa ada soket

6:13kalian ya sih bisa enggak nunggu saya enggak nemu ini sih enggak nemu webpagenya yang mungkin buka

6:20soket.io aja kali ya Mas Diza ada soket.io boleh boleh ya

6:24bidireksional low latency communication for every platform

6:36jadi ada interaction introduction kali ya itu di documentation

6:44di langsung pencet dokumentasi dokumentasi button good

6:50media jadi bidireksi soket itu biar by me or bidireksional bidireksional dan

7:03di mana koneksi yang terjadi itu tidak terputus.

7:14Jadi dia tetap secara low level, saya nggak bisa ngasih tahu bagaimana,

7:24saya juga nggak mengerti 100%, tetapi secara low level,

7:27koneksi yang terjadi di dalam network antara si klien dan si server itu selalu terbuka.

7:37Ada session-nya.

7:39Nah, ini tuh sulit dibayangin ya.

7:42Buat orang yang masih awam soal infra, soal HTTP,

7:48kalau yang mulai belajarnya beneran dari web, ngerti web doang,

7:51ini konsep ini agak, apa ya, gue dulu agak sudah pahamin terbuka terus.

7:56Karena kan mustahil belajarnya cuma HTTP

7:58Request response

8:00Kan biasanya kalau kita ngirim request

8:02Udah dibalikin dikasih response

8:03Baik itu oke ataupun error atau redirect

8:06Atau apapun yaudah selesaikan

8:08Nah ini tuh kayak

8:09Mental kayak perspective shift

8:12Bahwa bisa sekali kita initiate

8:14Koneksi terbuka

8:15Ini belum selesai walaupun mustahil kirim data

8:17Udah dapet datanya tapi koneksinya

8:20Masih terbuka jadi ini kayak

8:22Harus

8:22Biasain dengan

8:25apa mindset ini betul jadi bayangkan sekarang saya waktu kuliah di salah satu jurus mata

8:40kuliahnya kalau nggak salah jaringan itu salah satu tugasnya membuat aplikasi chat

8:46gimana socket kita menggunakan socket dan murni socket karena waktu itu pakainya

8:53jadi benar-benar socket

8:55dimana kita

8:57aplikasi

8:58Windows

9:00aplikasi Windows akan membuka

9:03port

9:07dan di server akan membuka

9:09port, jadi

9:10saya sambungin, oke IP-nya sekian

9:13yang dibuka port sekian

9:15nanti si server akan terima

9:17oke handshake

9:18dan terjadi koneksi

9:21Nah, lalu di klien yang lain juga melakukan hal yang sama.

9:29Dia ke server, IP server dan port yang sama.

9:36Terus kemudian setelah handshake dan terjadi koneksinya,

9:41setelah sudah confirm nanti bisa saya lihat di klien A di komputer 1 kelihatan tuh komputer 2 is online Nanti di komputer 2 komputer 1 is online gitu ya bisa dibikin

9:55Nah, lalu saya chat dong, saya chat,

9:59halo, nanti data itu dikirimkan ke server, nanti dikasih ke client 2.

10:06Atau bisa juga yang namanya broadcast.

10:09Jadi kalau misalnya ada 10 client yang terkoneksi secara bersama,

10:13dia kirim satu, nanti dia ke broadcast

10:16semua chat, ke semuanya

10:18klien

10:18bayangkan

10:21jaman MIRC

10:24group chat jaman dulu

10:25dan Yahoo Messenger yang

10:27one on one chat

10:29kayak gitulah konsepnya Socket

10:32aplikasi penggunaan Socket

10:35nggak cuma untuk

10:37chatting, banyak

10:41banyak karena dia low latency

10:43karena tidak melewati

10:46yang namanya HTTP

10:47TCP IP

10:49yang ada 6 layer

10:517 layer

10:52dan ada ACK

10:55dia tidak ada itu, pokoknya sudah handshake

10:57terjadi koneksi

10:59semuanya event based

11:01dia akan dengerin

11:03dan siap terima data

11:04dan kirim data

11:06dari sisi

11:09aplikasinya banyak

11:13salah satu tugas

11:15akhir dari mata kuliah itu

11:17saya disuruh bikin

11:19sejenis

11:21apa itu namanya

11:23Trojan

11:24jadi

11:25jadi kalau misalnya

11:28beneran dosennya suruh bikin

11:31Trojan, jadi

11:31aplikasinya bisa ditanam, di install

11:35di target

11:36target komputer, maka target komputer

11:38jadi soket server jadi kita dari dari jaringan yang sama bisa tahu Oh itu server yang sudah

11:48target sudah ada terinstall aplikasi kita jadi saya bisa kirim comment Oke open jadi yang dikirimkan

11:55datanya comment itu open notepad open ini nanti dieksekusi karena sudah aplikasi dari install

12:03eksekusi secara komen pro-com men-com mendi dari imang gilwing 32p aja jadi tinggal panggil buka

12:11aplikasi notepad buka ini itu itu bisa set down juga segala macam itu dari sih aplikasi dari

12:21kliennya kita banyak kalian kalau penggemar game ya penggemar game ya mau main warcraft

12:29Starcraft mau main apa sih game anak zaman sekarang mobah mabah itu semuanya koneksinya

12:38socket jadi itu dari sisi socket nah kembali ke web socket web socket itu protokol atau pattern

12:51apa pola toko eh arti ada protokolnya sendiri ya protokolnya sendiri ya dia ada protokol lalu kalau

13:02website bukan protokol http ya berarti ya bukan dewa enggak melewati HP layer tetapi handshakenya

13:10itu ada TP Oh ya ya ya ya nanti coba buka websocket di ini deh di Wikipedia

13:26kemasalah websocket di Wikipedia itu ada jelas ininya

13:29ada http response yang dikirimkan saat handshake handshake yes to handshake itu

13:39pakai http dulu sebelum terjadi koneksi terdalam soket websocket adalah implementasi soket di

13:49atas web atau browser dipakai juga pakai TCP tetapi enggak pakai http bukan http ya dan ini

14:02standar web ya Yes web-web socketnya yang standar web jadi socket socket kan itu umum infrastruktur

14:12umum tapi web socketnya itu standar web yang memungkinkan dari web ngebuka koneksi gitu kan

14:19membuat koneksi melakukan koneksi socket turun-turun sedikit ada ininya anda enak

14:30Kalau ini kan WebSocket API pakai WS tuh yang nggak secure itu WS itu protokolnya Protokol kan WS kalau misalnya kita web biasa kan http kalau yang web socket yang secure

14:50jadi https-wss oke

14:55nah ini menarik juga nih historinya ya jadi cerita 2008

15:08terus sudah lama riset in the first version of protokol non-es websocket before websocket

15:18nah mantap using comment channel however comment implementasi channel tuh apa coba

15:29web application model ya teknologi lama yang udah punah ya sepertinya kalau dari dasar long

15:51atau tps request artinya tipelahnya sampai dibikin 60 second 120 sekarang terakhir jadi karena karena

16:02the web socket dan server send events maka kometnya jadi obsolete Alex Russell lagi

16:08slightly slightly late Oh dia bikin dibukanya yang bikin komitmennya tapi bikin apa istilahnya

16:19istilah kata-kata komet dia bikin isi apa ya dia itu ya spesialis copywriter spesialis teknologi

16:29sama-sama istrinya Oh comment itu sebenarnya ajak spus reverse ajak

16:40berarti kayak event-event gitu juga konsepnya sebenarnya ada kita bahas

16:56turun sedikit nanti ada http response nya turun-turun sedikit

17:09server example

17:11ini contohnya apa nih?

17:15pakai python

17:16python

17:17python

17:18nanti itu format

17:24response-nya

17:24pertama dia kirimkan http

17:28request-nya http

17:29terus kemudian di upgrade

17:31ini sebenarnya websocket

17:33websocket connection loh

17:35baru lagi buka

17:36ya ya baru ada hidupnya buat connection upgrade betul baru sih browser menjawab Oke kita kita

17:45konek ya di saya buka port nih menuju portnya lu gitu inilah salah satu eh apa tuh yang dibikin

17:55sama dnh untuk story bukan deh yang bisa bebel bukan saya table html-tml terbuka wayar hotwire

18:08pakai-pakai pakai websocket makanya tetap websocket bagus untuk eh low latency bidireksional tetapi

18:22Karena dia butuh koneksi yang selalu dibuka sehingga scalingnya menuju banyak channel.

18:32Misalnya yang scaling online itu bisa anggap aja webnya diakses 1 juta user

18:41saat yang bersamaan. Maka ada 1 juta koneksi yang di open ke server.

18:45Dan itu satu channel, satu session. Makanya scalingnya susah. Beda dengan yang hanya pakai request-response.

18:57Ya di CDN kan hanya static, udah. Nggak usah pusing.

19:00Iya. Kalau Ruby on Rails itu awalnya mereka punya namanya, sebentar, namanya itu Action Cable.

19:11Itu adalah wrapper untuk pakai web socket di Ruby on Rails.

19:16Mempermudahkan antara servernya sama kliennya.

19:19Kemudian muncul lagi yang namanya Hotwire.

19:21Hotwire itu HTML over the wire.

19:26Jadi HTML page-nya dikirim lewat web socket.

19:30Oh oke lumayan overkill ya Iya kalau dulu kan request-response memang request-response HTML

19:40HTML, CSS, JavaScript dikirimkan lewat HTTP kan?

19:44Terus abis itu muncul yang SPA.

19:49SPA itu datanya doang yang dikirim dari server kan?

19:54Ya kayak event websocket sini juga datanya kan?

19:57Iya, dirender di sisi klien.

20:01Kemudian muncul di tengah-tengah

20:04yang ada hotwire, ada liveview, ada di Laravel itu ada namanya livewire itu mereka rendernya di server

20:15karena kan ngerender di server kan cepat kan

20:18ini nya idenya ide dasarnya

20:20ngerender di server itu proses yang cepat dibandingkan ngerender di klien kan

20:24jadi ngerendernya cepat habis itu hasilnya mungkin divnya aja perbedaan antara halaman satu dengan halaman satu versi satu

20:33karena udah ada update misalkan update harga gitu ya, nah itu divnya dikirimin lewat web socket gitu.

20:41Jadi nggak semua HTML-nya dikirim, nggak seluruhnya, hanya bagian yang berubah saja yang dikirimkan.

20:50− Jadi sebenarnya ini tuh kayak hydration, tapi maksudnya hydration-nya di server semua ya?

20:55− Di server, betul. − Jadi kayak dikirim lewat protokol socket ini.

21:02Iya, yang jadi masalah di Ruby on Rails adalah memang problem yang si Ruby-nya, Ruby-nya scaling-nya kan rumit ya.

21:13Karena mereka bukan functional programming, kalau mau pakai banyak CPU dan lain-lain, paralel programming itu sulit.

21:24Makanya kena dia di situ scaling-nya.

21:27Tapi kalau bahasa-bahasa yang sudah cukup kuat seperti Go atau Elixir yang konkurrensinya bagus,

21:35menggunakan WebSocket itu harusnya tidak separah yang digunakan oleh Ruby on Rails.

21:43Oke.

21:45Ini lagi drama ya di Twitter ya.

21:49Drama apa lagi?

21:51Hey Calendar. Hey Calendar itu dibuat pakai Hotwire.

21:55Oh, itu ya. Terus jadi berat. Terus banyak yang paham kalau itu berat.

22:00Habis itu si DHA-nya komen pas lihat videonya,

22:04nah lu itu networknya di-throttle ke 3G, dia nggak mau, slow 3G nggak mau.

22:10Harus yang itu dong, harus full.

22:12Karena kalau Google Calendar dibuka di slow 3G juga jelek katanya gitu.

22:18Jadi dia merasa diserang lah ya, kan itu produknya dia kan.

22:22Mungkin agak-agak emosi juga.

22:25Iya sulit. Itu risiko bikin produk yang dipakai orang banyak.

22:30Iya. Udah gitu dia, udah produknya punya dia, frameworknya juga punya dia.

22:35Jadi dua-duanya diserang. Diserangnya gitu, bilang,

22:38Ruby On Rage deserve better katanya gitu.

22:41Maksudnya harusnya dipakai dengan cara yang benar gitu.

22:44Kan diserang dua-duanya, udah produknya diserang, frameworknya diserang, gimana nggak marah kan?

22:52ya begitulah nah ini cuma yang lain mungkin sambil para Indonesia Indonesia Filipina udah

23:04soker-sokernya boleh ya oke websocket ya update ya nggak bisa nonton kalau arah

23:12pakai Laravel River River River Iya digugung aja Oh river bukan itu ya live live wire ya

23:25bukan ibu gede ini khas khas banget Laravel ya produknya Laravel first party web socket

23:33for Laravel application bikin-bikin repot-repot seperti socket PHP dari website eh rachet.php

23:49ini seperti socket.io sebenarnya socket.io kan library

23:58nah cuma ini buat orang yang baru belajar websocket kalau ya sebenarnya mungkin agak

24:08mirip ya kalau misalnya belum nguasain fundamental apalah HTML JavaScript terus

24:13langsung pakai next.js itu jadi kayak bingung gak nguasain mana yang sintaks dan fiturnya

24:20next.js mana yang fundamental web nah gua dulu pertama kali juga nyobainya socket.io

24:28karena sekitar 3 tahun lalu yang yang demonya paling lengkap yang contoh bagus banyak tutorialnya itu kan socket Oke lah ngerti paham dikit Tapi bahkan saat itu nggak terlalu ngah bahwa itu WebSocket cara kerjanya gimana teknologinya apa

24:46Terus udah sampai lama abis itu nggak paham-paham WebSocket tuh.

24:51Jadi maksudnya ada resikonya juga sih.

24:54Salah satu keunggulan WebSocket itu kan dia event-based ya.

24:58event-based, dimana data yang dikirimkan itu ada headernya dan ada payloadnya.

25:06Jadi sebagai pengganti, ya maksudnya satu kapsul biasanya kalau dikirimkan,

25:14headernya dan payload.

25:15Nah di dalam headernya itu isinya ini komennya apa?

25:19Kalau tadi kan ada event subscribe, ada event apapun lah itu ya.

25:24yang di antara klien dan server harus mengerti komen itu jadi dari header itu ngapain event-event

25:34nya apaan maksudnya baru ada payloadnya isinya ya data datanya saat event mungkin chat ping

25:44payloadnya ping, sorry, headernya ping, payloadnya nama kliennya.

25:52Jadi waktu diping nanti bisa kelihatan di klien yang diservo atau di klien satu lagi,

25:57oh si X ini nge-ping gitu.

26:01Jadi bisa ada cara kerjanya begitu.

26:05Nah, selama koneksi kebuka dia kan ibaratnya nge-listen ya,

26:12ngelistening apa yang terjadi

26:14dan

26:16yang di listen itu yaitu

26:18on error, on data, on

26:20apa lagi banyak lah itu

26:21on client kan yang listen

26:24event handler nya

26:26yang bagusnya dari koneksi atau protokol

26:28web socket ini kalau misalnya terjadi

26:30koneksi putus dia akan

26:32berusaha connect lagi

26:34sendiri

26:36dengan sendirinya

26:37dia akan berusaha

26:40menyangkutnya

26:41enak ya Iya nah kembali sedikit kita diwine sedikit dengan tadi si comet yang bahasanya

26:49si Alex Lasal yang komen itu di implementasi implementasi semuanya selain websocket tuh

26:57ada juga loh banyak kok yang menggunakan ajax seperti ajax push atau berusaha atau

27:03streaming, HTTP server push

27:05atau yang saya sebutkan tadi namanya

27:07heartbeat. Jadi

27:08bukan pooling tetapi

27:11si aplikasi kita, si

27:13client kita

27:13misalnya anggap

27:16bayangkan aplikasi kita sedang

27:21upload

27:24database dan berusaha

27:27mengekstrak database di server

27:29tetapi

27:31untuk mengetahui progress bar

27:33progres apa yang terjadi di server kita bisa pulih sudah sampai mana sudah berapa persen

27:43sampai mana sudah sampai kita manual bikin request kan maksudnya Yes manual ya si si

27:52simpelnya ya aplikasi client JavaScript kita menaupi aja set timeout setiap look itu set

28:01setiap 2 detik nanya, setiap 2 detik nanya, sudah sampai mana progress restore database-nya.

28:09Jadi kalau teman-teman lihat banyak yang kayak progress bar saat copy data atau segala macam antar itu,

28:17ya bisa jadi nggak perlu web socket, tapi bisa juga pakai yang namanya, apa tadi namanya,

28:25bisa jadi yang namanya hal itu bukan pulih pulih beda lagi hanya request terus tanya-tanya tanya-tanya

28:35tanya-tanya apa yang terjadi setiap itu kalau pulih itu berbeda Jadi kalau pulih itu coba

28:42buka server state event SSI itu teknik namanya puling di server event server event event ya ini

28:59bagi teman-teman yang misalnya servernya nggak bisa websocket ini adalah klik yang

29:08yang diatas linknya, yang introductionnya, ya klik

29:14jadi teman yang servernya nggak bisa websocket maybe karena di belakang CDN ya bisa pakai yang namanya server send event tapi cuma bisa server ya yang kirim event nggak bidireksional kan Bisa bidireksional Nanti ada event source namanya event source

29:40Nah dari sisi cara kerjanya itu dia pakai API yang namanya server-side event namanya API event source.

29:50event source itu ada using server-side event aja langsung ke using-nya itu di guide ya ya

30:02event source nah ini udah ada API-nya jadi misalnya kita buka koneksi HTTP ya ini ya ke

30:11satu endpoint namanya sse demo atau API sse demo dimana sse demo ini akan membuka koneksi selama max timeoutnya php

30:26jadi si server tidak akan memutus sampai dia timeout

30:34kebayangin ya kita nge-request tapi requestnya kita tuh nggak ada response end of life end of EOFnya dari server

30:45jadi dia akan menunggu terus seperti while through ujung-ujungnya while through coba lihat ada ini nya

30:55ada server implementationnya ini masih nah ini dia selama while true

31:07dan headernya itu yang dikirimkan text event stream ya dan no cache

31:12dan selama while true tentu kan si server akan membuka koneksi ini kan

31:18Nggak sampai dia time out.

31:21Nah, yang dia selama while crew ini, yang dia listen tuh, ya data-data ini.

31:26Apa yang dikirimkan oleh si user, nanti dia balas pakai stream, event stream.

31:40Dan setiap streamnya selesai, dia kirimkan, dia flush.

31:45nanti begitu itu artinya flash itu dia akan kirimkan

31:48dia akan kirimkan jadi cang data aja yang dikirimkan

31:51text

31:52seperti itulah dan itu namanya pooling

31:57ini ada pertanyaan yang relevan sekali

32:01kalau user matiin appnya

32:04tanpa lockout apakah koneksinya tetap open atau

32:07pas dibuka lagi aplikasinya bisa reconnect lagi

32:11nggak ya

32:12karena dia akan tetap putus dia akan berbeda session

32:16oh kalau clientnya itu DTI out?

32:22lock out nya bukan lock out seperti login dan lock out

32:30yang menentukan lock out itu kan si cookie

32:33gak ada hubungannya sama event source

32:35jadi gak terjadi tapi progress yang terjadi terputus

32:41Misalnya data yang kalian terima itu data yang copy data ya rusak datanya.

32:54Misalnya menunggu data corrupted datanya.

32:58Tetapi kalau sekedar live score, saya pernah bikin aplikasi pakai SSI untuk live score.

33:03karena server yang server yang dipakai tidak mendukung websocket jadi saya pakainya SSI

33:12pakai live score ini Hoki yang Hoki NFL ya itu kan tadi N apa nah itu kan tadi udah buka koneksi

33:26Terus kalau browsernya ditutup, close tap gitu, tanpa manggil event close, itu masih terbuka dong?

33:34Servernya nggak tahu kan?

33:36Nanti, kan ada mekanisme dari si web server kan, kalau misalnya mengetahui kalau browser itu terputus

33:51atau internet terputus deh, ada mekanisme dari server kan untuk mengatakan, oh itu sudah terputus.

33:57Dan at the end kan ada time out selalu, pasti ada, web server itu ada time out.

34:05Berarti kalau klien ilang begitu saja yaudah bakal kena time out.

34:09Bisa jadi dari PHP-nya atau dari si web server seperti Nginx ada time out.

34:17Nah kerennya si event source ini kalau misalnya sudah time out terputus dia akan create ulang otomatis Jadi kita nggak perlu buat lagi

34:31Ada demo-nya kan? Coba aja demo-nya.

34:33Ada di atas.

34:36Di atas itu ada demo-nya deh.

34:41Dia nggak kasih ya? Ada?

34:45Itu kali yang main page-nya, server send event.

34:48Oh sudah berjalan ya udah ya harus ya harus punya server teknologi server

35:05saya iya anyway begitulah cara kerjanya SSI nah ini http long cooling sebagai

35:13itu langsungnya kalau temen-temen pakai soket Ayo misalkan websocket nya tidak jalan di baik

35:21di klien atau di server dia fallback nya ke http long polling artinya secara bertalah dan lain-lain

35:29ya tapi kalau browser itu udah hampir 97% katanya disini sudah mendukung websocket hampir semua sih

35:38paling tiga persennya tuh Ie sama orang ini kecil hingganya saya ini udah puluhan tahun

35:45kan teknologi ini sehingga ada puluhan tahun udah semenjak Chrome Chrome versi 4 sudah support website

35:51itu opram ini doang yang nggak support nah terus ini tadi socket.io kan belum selesai ya kita

35:58bahasnya ini kan sebenarnya library ya Oh ya kayak satu abstraction on top of semua teknologi socket

36:06jadi makanya dia bisa ya kelebihannya adalah itu kan dia bisa incorporate tiga hal itu yang di situ

36:14long polling, web socket, web transport, mana yang paling optimal dan tersedia di client-side

36:23to will automatically pick the best available option, oke ya, seke

36:28ini kalau pakai library kalau kita mau pakai websocketnya langsung itu juga bisa artinya ya

36:35cuman websocket doang kalau gagal ya kita harus fallback ya kita bikin sendiri kalau ini ya kita

36:41bikin semua itu sesuai kebutuhan kita yes nah ngomong-ngomongin soal websocket manual atau

36:49ternyata sudah di-merge di node.js

36:53oh iya

36:55baru

36:56pake flag

36:59masa sih

37:00ya ini kan September

37:02kali tahun ini udah

37:05udah ya

37:07karena gue udah pernah

37:09udah pernah lihat oh pake node.js

37:11udah bisa langsung pake websocket gitu

37:13pernah baca dimana juga

37:14ada contohnya gak ya

37:16contoh untuk apa

37:18Kita lihat ya dokumentasinya.

37:21Sudah masuk belum ya?

37:24Di Node.js-nya.

37:26Jadi biasanya kalau kita, eh kok download.

37:28Kalau kita pakai server Node.js gitu ya,

37:32itu biasanya paling umum kita pakai socket.io ya, paling umum ya.

37:38Ada kan NPM Node.js-nya ada?

37:42Ada, ada.

37:42Websocket.

37:44Belum ada di sini.

37:45Ini versi berapa?

37:46dua-dua belum ada

37:51npm itu yang selalu pakai Oh yang ini

38:03the turtle kalau dia tiba-tiba nge-upload tiba-tiba ngamuk dan delete banyak yang rusak

38:21ya selesai risikonya pakai software open source ya mending kalau cuma mending kalau cuma ngamuk

38:30terus ngedelete kalau yang dulu siapa itu yang apa dikasih Malaysia Scott lebih serem lagi sih

38:37ini soalnya ini kan langsung berhubungan sama data ya janganlah ya selalu dikunci versinya ya

38:49in case leo tiba-tiba ngambek atau apa ya udah kita mitigasi risiko kok no DS webnya berubah

38:58dokumentasinya nggak bisa di-search lagi dulu ada tombol searchnya sekarang

39:03search bar jangan karena ke zoom in zoom in zoom out oh iya mungkin juga nggak ada

39:09nggak ada ya apa di net dia itu web socket ini dimana web crypto web

39:20Eh ini malah adanya di bukan dox-nya juga sih tapi di-release announcementnya

39:32websocket client coba deh buka blogpost Oh salah yang ini websocket WS ini

39:43nah zoom in coba

39:45ya dia cuma itu

39:47we are excited to announce

39:49release node.js 22

39:50highlights include

39:52require es module

39:53web socket client

39:55web socket client

39:59bukan web socket

40:00client

40:03justru client

40:04jadi mungkin

40:06apa ya

40:07si node.js nya itu

40:10buka koneksi ke

40:12ya suatu server lain

40:15server lain

40:17jadi proxy

40:19iya

40:22kayaknya

40:24coba aja buka

40:29websocket

40:30websocket default

40:32server enable websocket by default

40:35oh udah ada nih

40:36kan tadi sebelumnya experimental tuh

40:39yang September 2023

40:40ketiga nah yang Januari 2004 ini enable by default berarti udah nggak usah pakai flag cuma apa itu

40:47sebagai apa dan gimana pakainya masih masih misterius belum ya masih misterius masih

40:53websocketnya soket ini ini belom socket by default ada lagi nggak websocket lain

41:02enggak ada Oh ini loh dia lagi Oh ini total semuanya ya major commit another ini yang ini

41:16Hai mau ini kodenya ada dokternya CLI OSI buat ini ya experimental itu tadi ya yang ini

41:23global Oh

41:31ini nih coba deh

41:36coba buka doksnya tuh history ya betul buka historinya deh kan cocok tuh sebelumnya edit

41:51versi 21 terus di 22 udah stabil udah mau saya nggak hidden by hidden itu cuma enggak ada linknya

41:59kalau yang atas-atasnya kan ada linknya tuh ada link ke Docs nah ini belum ditulis jadi mungkin

42:05temen-temen yang pengen pengen avatar GitHub nya masuk ke apa dokumentasi note.js coba bikin pull

42:11request bikin dokumentasi cara pemakaiannya ya harus bikin harus dibikin dulu kan masih belum

42:20Biasanya sih begini ya, saya salah tadi bukan yang NPMJS itu bukan itu saya pakai, saya pakai yang WS ini.

42:27WS, iya.

42:28Iya, ini yang betul. Nah, cara pakainya ya menurut saya kalau seadanya ada sih bakal begini juga ya.

42:40Kurang lebih ya, iya sih.

42:43Ini servernya.

42:44Nah ini.

42:45Tuh, tuh, tuh.

42:47WSS portnya.

42:50kalau ini kan web socket bukan apa ya web socket yang kalau socket ayo salah satunya ini doang kan

43:04kalau soket air itu ya salah satu lehernya terlalu rapor dia hampir kayak Framework sih

43:12Masai kalau mindset frontend ya hampir bisa dibilang kayak Framework itu dia bikin apa

43:18keputusan arsitektur dan termasuk konfigur fallback fallback nya dan sintaksnya juga dipermudah lah

43:24ini kan apa buat ini si servernya aja konflik objeknya ribet kalau socket.io cuma masukin

43:31portnya doang oke nah pertanyaan selanjutnya adalah kan http2 itu sudah bisa push data kan

43:43ya apakah dengan http2 websocket jadi akan punah atau bahkan http3

43:52Hai

43:54STT do to is family focus on optimizing delivery of web content input improving

44:07performance of web application Hai cerlap multiplexing header compression prioritization help reduce latensi and speed up page rendering terus kalau websocket apa serve different purpose and as distinct advantages

44:26they are not necessarily better or worse than each other jadi peruntukannya beda kalau http

44:32ngirimin ngirimin static file ya peruntukannya untuk ngirimin static file kan yang disini ya

44:40ini yang pernyataan ini kan ya mana dia delivering web content ya nggak harus static tapi punya sekali

44:49enter ya udah emang kayak kita terima paket aja paket Twitter li di dunia nyata kan ya udah kita

44:55minta sesuatu kita memesan suatu barang itu datang ya udah itu cukup buat kebutuhan kita ya udah itu

45:01kan berarti analoginya ecctp2 kayak gitu sementara kalau websocket itu kan ya itu tadi harus

45:07bidirektional dua arah harus terbuka terus-menerus harus kita tinggal bikin semacam event handler

45:17atau listener nah tapi GRPC itu pakai ttp2 buat komunikasi bidirektionalnya

45:26Oh baru tahu dia ngirimin binary formatnya format binary g-rpc gimana secara kerjanya

45:37pernah tapi nggak pernah ngedalami nggak ngedalami itu kan itu kan remote procedure call ya kalau

45:47JARPC gue tau tuh caranya, bedanya dengan G nya itu apa sih?

45:51G nya itu adalah Google punya

45:54Ohhhh

45:56Forking

45:59Ya dari internal Google, kaya Kubernetes lah, Kubernetes lahirnya dari tim Google kan

46:04Kita lihat JARPC ya, sebenarnya remote procedure core

46:13yang bisa dijalankan

46:16zoom in

46:19bisa jalan dimana aja

46:24itu bisa

46:25equivalent sama web socket juga

46:28kita harus bikin servernya

46:30kemudian bisa berbagai

46:32client baik itu

46:34mobile ataupun browser

46:36itu bisa connect ke servernya

46:38gRPC

46:39nah tapi bedanya

46:42kalau web socket itu yang

46:44data yang dikirim itu

46:46umumnya kan string ya

46:48benar gak?

46:49text

46:50string, kalaupun kita mau ngirim json

46:53kita stringify dulu kan

46:54nah kalau

46:57gRPC itu kirimnya binary

46:59binary data

47:01yang

47:02konon kabarnya

47:04membuat si gRPC ini

47:07performanya lebih bagus

47:08tapi cara kirimnya ribet karena harus pakai protobuf sintaksnya protobuf

47:20protobufnya Google punya protobuf itu kayak apa ya kayak sintaks GraphQL lah

47:31kayak sintaks grafik

47:33iya ngiriminnya pakai ini

47:36coba lihat contohnya deh

47:39jajan mereka bikin ini buat youtube ya?

47:44enggak? atau buat apa sih?

47:47enggak tahu

47:47bisa kan kalau yang bikin kayak google

47:49meta ya buat in house product mereka kan

47:52kalender?

47:54ini contohnya

47:58kalau kita mau ngirimin apa kita harus

48:00bikin objeknya dulu

48:01struktur datanya seperti apa

48:04nanti di client-nya juga

48:06punya file proto

48:07yang sama bisa nge-mapping

48:10si

48:11binary yang dikirimin

48:15oleh server ke client begitu juga

48:16sebaliknya

48:17tapi ini tuh apa sih

48:20library, protocol

48:22kayak teknologi

48:24proprietary-nya mereka

48:26ini

48:27library ya, framework

48:30framework, RPC framework

48:32protokolnya mereka menggunakan

48:34HTTP 2 dan soon akan menggunakan

48:36HTTP 3

48:37sebetulnya kayak

48:40kayak misalnya tadi socket.io

48:42kan dia bikin produk

48:44bikin library, abstraksi

48:46di bawahnya ada macam-macam

48:48ada web socket, ada

48:49nah kalau ini dia bikin

48:52di dalamnya itu HTTP 2

48:54biasa ya

48:55mungkin ya, mungkin ya

48:58Mereka mungkin menemukan masalah di web socket sehingga mereka tidak menggunakan web socket

49:03Jadi akhirnya mereka bikin di atas HTTP 2 Ya mungkin for optimum compatibility kali ya Betul Mungkin tadinya HTTP 2 hanya dioptimize untuk delivery content

49:15atau static file, akhirnya mereka bikin untuk binary.

49:22Websocket perjuangan lah gitu ya.

49:25Websocket perjuangan. Komet perjuangan.

49:29Komet, ini berarti penerusnya komet ya?

49:32beda sih dengan kursus dengan ini bisa di web ya bisa bisa bisa bisa bisa

49:46work across languages and platforms nggak ada JavaScript bisa di PSP bisa di know ya

50:02Iya, server ke server kan?

50:03Server ke server, bukan ke browser.

50:05Maksudnya bukan ke browser.

50:08Iya, server to server.

50:11Server to server.

50:13Supported platform.

50:15Ini ada web.

50:17Coba.

50:19Quick start.

50:19PC web.

50:22Ya.

50:23Git clone.

50:25Docker compose.

50:27Antar service.

50:28Iya, ini sebenarnya benar-benar.

50:29saya baru ingat nih benar sekali jadi GRPC itu dipakai untuk web services komunikasi antar

50:37service di web services itu peruntukannya peruntukan utamanya bukan jadi bukan ke klien

50:44dan server bukan untuk klien dan server tapi antar service ya benar-benar terus berarti dari klien

50:50dari dari browser nge-request biasa juga ya tetap ujung-ujungnya biasa atau biasa ya kan

50:56bisa buka koneksi bisa jadi ada

51:01apa tadi yang kabarnya bakal ada yang web browser GRPC diakses dari browser library nya ya

51:13basic tutorial apa tuh enggak deh

51:18ada tadi coba diklik itu di kiri

51:24gpc web ada pasangannya itu ini

51:32configure Envoy proxy Oke fine itu bisa saya cuma pengen tahu di web itu gimana sih

51:41artinya itu tadi ada event handlernya ada callbacknya ini kan yang atas ini kan atas

51:47nah itu ada eh ini server server iya eco-server kita mulai dari si iya udah ada berarti oh oke

52:03hampir sama seperti websocket kan model bentukannya kan ya cuman bedanya kayak kayak

52:14ngebuat event source sendiri aja gitu Iya event source betul kayak bikin event source

52:20terus request HTTP kan jadi membuat event source yang lebih terstruktur karena data yang kita

52:30panggil terus data yang kita panggil remote code procedure ya data yang salah remote procedure call

52:39procedure yang kita panggil prosedurnya apa data struct-nya apa sudah kita kirimkan nanti kita

52:45telinga pada server seperti apa Iya jadi si file protobuf ini yang tadi ada bentuknya kayak gini

52:55Itu kan ini ada struktur datanya. Ada echo request, echo response.

53:02Ada message-nya isinya satu. Message-nya isinya satu.

53:06Terus di sini, ini adalah prosedurnya. Ini adalah fungsinya.

53:09Fungsi yang dibuka oleh server dan bisa dieksekusi oleh klien.

53:13Ini file .proto ini nanti di-compile seperti ini.

53:20terus bisa di output ke JS jadi kode yang diimpor tadi ini ya di server kemudian di compile pakai

53:31protocompiler jadilah file JS yang isinya sudah auto generated outputnya outputnya JS nah terus

53:38tadi tuh nah ini nih yang di require yang diimport itu itu tadi hasil outputnya dan

53:46kemudian echo requestnya bisa kita eksekusi di sini di sisi klien atau di sisi saya

53:52kayak web assembly kayak ngebungkus dengan web assembly

53:55ini kan prosedur call kan di sini kan sebenarnya kan iya itu prosedur callnya ini kan set message ini kan kita set message seolah di lokal padahal sebenarnya requestnya ini ada di server

54:10makanya gini aja lah

54:11jadi

54:12dan data yang dikirimkan via

54:15pakainya binary tadi kan

54:17tapi kirimkan via binary

54:20HTTP 2

54:21dia pakai HTTP 2

54:23makanya saya bilang seperti

54:25campur-campur antara

54:28web assembly

54:29dan event source

54:30kan as per sempit

54:32binary juga

54:35di client doang

54:36iya sih

54:38susah bener-bener RPC sendiri

54:41manggil prosedur yang dari server tapi dari client

54:45gitu ya

54:46iya betul

54:47itulah konsepnya seperti itu

54:50serasa

54:51serasa noding

54:53berarti ini khusus untuk orang server tapi

54:55dipaksa pengen bikin

54:57aplikasi yang di klien ya udahlah tetap seperti nulis seperti nulis logik yang di logik yang di

55:06server tetapi jalannya di klien tapi sebenarnya prosesnya jalan di server nggak sebenarnya awalnya

55:16ya peruntukannya awalnya adalah untuk berkomunikasi antar server awalnya tapi ternyata banyak yang

55:23kita eh yang web dibikin doang kita melalui client ke web gitu kan ya udah gitu awalnya buat antar server

55:31microservice itu nah berarti sebenarnya itu head to headnya head to headnya yang tadi masuk baru di

55:38node.js 22 kan mau dibikin kayak gitu juga kan web socketnya si apa node servernya itu sebagai

55:46klien makanya tadi kan website klien tapi pakai web instead of head-to-head nya oke oke Nah

56:02terakhir itu ada yang baru yang baru tentang web-socket web transport ada tuh yang dari Google

56:10developer Chrome ini masih ini ya masih masih ini bukan Iya limited apa itu kalau ininya baseline

56:25aku ini ability yaitu limit availability ada dosanya hari belum Safari belum support nah

56:32tapi apa ini saya enggak tahu kita baca sama-sama ya baca bareng aja nah mbn itu bukan resource yang

56:38bagus kalau kita belum tahu tapi bagus kalau kita udah tahu nah ini aja yang lebih user-friendly

56:44API offering low latency by directional client server nah apa kayak website tapi apa bedanya

56:55yang bertolong pakai HP protokol Oh dia ngeliat gitu ya kalian ngeliat di RPC kali ya berarti

57:05enggak pakai enggak pakai word socket protokol lagi Oh ini oke lanjut lanjut Nah kalau non-secure

57:18pakai datagram kalau secure pakai stream atau gimana enggak tahu and reliable itu maksudnya

57:23coba-coba enggak ada yang berhenti bebas di Instagram Oh don't need strong delivery

57:32guarantee kalau stream Oh urutannya harus sama ya kalau nggak masalah siapa yang sampai duluan

57:41pakai datagram kalau yang harus urut pakai stream Oh mungkin kalau datagram tuh kayak apa sih FTP

57:51file uploader kali ya kan maksudnya yang penting kaplot kan pasti ada hashtag atau apanya nanti

57:58diurus disambung sendiri digabungin sendiri di server tapi kalau misalnya kayak video atau chat

58:06kan harus urut jadi pakai stream API Oh kalau web socket itu di atas TCP kan kalau TCP itu

58:15sifatnya kita kirimin data terus kalau datanya udah nyampe apa belum kita tahu statusnya kan

58:23dikirimin balik ya Yes receive gitu kan ada ada pikanya kan kalau ini di atas UDP jadi kirimnya

58:31lebih cepet fire and for me kirim ya udah mau nyampe mau nggak terserah gitu kan dia pakai

58:38dan urutannya apa? dia pakai quick

58:40urutannya kayak gimana terserah tadi yang kalau datagram kalau stream

58:44harus apa bakal urutkan tuh one or more streams of ordered data

58:51ini kayaknya contekan banget sama GRPC karena GRPC juga menggunakan

59:00bakal menggunakan http3 menggunakan UDP dan pakai quick protocol juga mirip-mirip ya

59:09saling mencontek receiving media stream push receiving notification push

59:16menarik bisa bikin push notification nih Coba gimana secara pakainya current status Oh udah

59:28berkompleks semua Wah ini masih proposal kan soalnya Oh udah sound tapi iya eh nggak tahu

59:37tapi tadi udah launch di Chrome sih Oh udah ada website ini webtransport.com

59:45connect

59:51kan community main tadi katanya ya kali servernya udah dimatiin

1:00:04ini localhost lokalhost memang bisa kan enggak ada jalan localhost harus bikin

1:00:11basic javascript client to try Oh kita harus bikin servernya

1:00:17Oh pantesan ke localhost maksudnya kita jalanin kita bikin dulu di lokal atau di mana

1:00:25habis itu kalau kita mau nyoba bisa kayaknya maksudnya gitu

1:00:29ini code sandbox nih ada code sandboxnya

1:00:33nah mending lihat kodenya

1:00:37mana ininya apa namanya logiknya dimana

1:00:51Hai us basulat Isso Hi PSJ

1:00:56Alright from India

1:00:59Hai

1:00:59jokini Sorry udah Nah input your tags

1:01:06X senda data 10 times

1:01:10ini

1:01:11corobo buka lock

1:01:15�

1:01:21ini setting connection network kalau network-network isinya apa

1:01:31server locknya ada enggak sih

1:01:35ada

1:01:38development server nya misalnya kalau terminalnya

1:01:46Hai coba pakai desainnya repotisnya enggak ada ada tuh ada-ada

1:01:52start-start nah npm relaster sudah itu udah jalan biasanya udah jalan Iya

1:02:02Oh iya bisa render kan udah jalan terminal kita lihat kemana sih dia perginya

1:02:08komponen log input

1:02:13white jadi kepo buka juga

1:02:20retable kiriminnya dimana kirimin send data kan

1:02:27website.com create p-directional stream isinya betul Oh di transport di metode apa metode

1:02:41transport kirim ini mana sebentar-sebentar saya jadi bingung ini ini kan input dan output inputnya

1:02:49ada button kan inputnya itu batangnya mana Oh di sini di bawah button on click send data send data

1:03:00ya bener di sini dia Iya itu tadi kan create by the original Oh nggak dari play

1:03:08maksudnya jasne reply lognya itu dia resmi kirim di di browser juga itu lognya

1:03:18demo-nya mana sini demonya dari sini itu ada trade out serverless radio

1:03:27Oh try it out open bidirectional stream

1:03:35mati mati

1:03:40ya anyway namanya coba-coba di sini udah ya habis ya Oh ini ya bukan

1:03:49itu itu cara kerjanya obati wetransfer itu sudah ada tuh itu kan cara pakainya terus itu url servernya kan ya maksudnya yang kita mau buka koneksi

1:04:04once ready fulfill the connection can be used

1:04:09transport ready turun-turun jelasin lagi sabar nah kita kan bisa milih tadi pakai datagram atau

1:04:20pakai stream kalau datagram caranya bingung juga pakai vector ya binary berarti ya dikirimin ya

1:04:28Hai pen Iya binary dan UDP itu data bisa dikirimkan dikit loh nggak bisa banyak kecil ya

1:04:41Hai kalau enggak salah sih berapa UDP itu maksimal datanya berapa sih ini contoh

1:04:47streamnya great in the National stream yudip itu maksimal 65 65 kilo by

1:04:54ya harus di untuk pecah-pecah atau satu jam dipecah-pecahkan makanya misalnya kalau apa

1:05:06sih video yang video yang di apa sih kayak front-end Masters atau pengkursus berbayar

1:05:12video berbayar kan pakainya kayak gini ya

1:05:14kayaknya, betul, betul

1:05:15gak tau sih exactly pake datagram atau

1:05:18apa bentuk lainnya

1:05:19selalu ngirim

1:05:21jadi ngirimnya bukan media, bukan file media

1:05:24tapi dipecah jadi cangkang

1:05:26kayak gitu, iya

1:05:27pengen download ya, pengen download ya

1:05:29iya, pengen

1:05:30pengen nyolong, pengen nyolong

1:05:33gak bisa dicolong

1:05:34dan bukan media file

1:05:36ketahuan, karena saya juga

1:05:41melakukannya jadi tahu

1:05:43maksudnya

1:05:46mau di download dulu kan

1:05:48sebelum ditonton gitu kan

1:05:49kalau nontonnya gitu kadang-kadang suka nge-like

1:05:52kan

1:05:52lihatlah, oh gak ada ternyata yang fullnya

1:05:56adanya yang kecil-kecil

1:05:57kecil-kecil pas dibuka di preview

1:06:00isinya kagak jelas bahasa alien

1:06:02iya berarti dia modelnya kayak gini

1:06:06polyfill

1:06:09udah ada polifilm

1:06:10chrome dev tools do not currently support

1:06:13web transport

1:06:14you can start this from

1:06:16malah disuruh nge start

1:06:19gak keliatan

1:06:22oke tadi gak keliatan

1:06:24ininya

1:06:25di networknya

1:06:28coba kita baca ini dulu

1:06:30tadi

1:06:31setahu kita

1:06:34ya berarti

1:06:35tapi udah didukung banyak

1:06:38beberapa tadi mana dia ijf postik lo tuh yang bikin ini ya posnya posnya Pak Jeff ini dimana

1:06:50sekarang loh udah nggak di Google ya kabarnya kepo dikit kan dulu Tim bikin workbox ya kalau

1:06:59Iya Iya dia yang ngejawabin semua Oh iya saya jadi gede ini Pak Jeff posnis dan dia tuh rajin

1:07:10banget dulu pas masih Google ya di stack overflow semua pertanyaan yang tagging workbox selalu

1:07:16dijawab dengan apa ke detail ada link nyawa itu banget Hai rajin banget ngejawabin ada

1:07:26yang menyatakan dia

1:07:28kerja di mana?

1:07:30pindah kemana gitu

1:07:31sekarang mungkin pindah

1:07:34ke ternak

1:07:35ayam petulen

1:07:37ternak lele dumbo

1:07:40ya jadi tadi

1:07:44ada apa aja, pertama

1:07:46tadi yang

1:07:47website

1:07:49tusigma.com

1:07:52e-commerce otosigma Saint is really financial financial service beda banget ya jauh-jauh

1:08:08kirain dia pindah ikut pindah ke Shopify atau semacamnya akhirnya teknologi

1:08:16iya ternyata Shopify lagi semua kayak Bondong Desa ke Shopify kalau enggak ke itu ke Edge

1:08:23Microsoft Edge ikutan Pak Alex Rasa oh iya iya iya oh jauh-jauh iya emang spesialisasinya di

1:08:39Browser Engineer yang asal Indonesia itu Kak Rakhina dia kan sempat ngomong Kalau Browser Engineer itu pindahnya itu nggak jauh muter aja Mozilla Safari Chrome karena skillnya niche ya karena ekspertisnya kemuse itu udah spesifik banget dan dia optimalnya kalau

1:09:06di antara empat perusahaan itu

1:09:08iya makanya

1:09:10jadi ya

1:09:11muter-muter aja itu

1:09:13by the way, Edge sekarang sudah resmi

1:09:16berdiri sendiri ya

1:09:17bukan Chromium based browser lagi

1:09:20oh iya ini

1:09:22engine-nya apa?

1:09:23maksudnya dalam major browser

1:09:26Edge itu bukan lagi

1:09:27Opera kan gak di bawah Chrome

1:09:30gak di bawah Chrome, Edge ya

1:09:31kalau sebelumnya kan jadi satu

1:09:33antara Chrome sama Edge

1:09:35Jadi dulu kan Chrome, Safari, Firefox, sekarang ada Edge.

1:09:41Contohnya kan nggak ada kan ada Brave, Opera, ARP.

1:09:48Ini kan semua di bawah Chrome.

1:09:50Sedangkan Edge sendiri-sendiri dia udah benar-benar kayak udah forking

1:09:53meskipun engine-nya mungkin masih tetap ada Chromium-nya,

1:09:58tapi dia udah punya banyak layer untuk yang membuat dia diferensiasi.

1:10:04sih betul memang tujuannya buat dioptimasi ke ke ke OS nya dia kan tapi maksudnya berarti dia

1:10:14nggak direct for nya chromium ya dia kayak semacam apalah dia the forking ke tempatnya sendiri tapi

1:10:22kalau dia ngubah itu dia enggak Merck ke upstream chromium berarti Iya bisa-bisa ngerti sesuka dia

1:10:30kan mau diapain ya terserah tapi enggak ya meresap stream mungkin dia akan meresap khusus spesifik

1:10:37untuk yang Windows doang untuk yang Linux mungkin dia enggak optimiskan Linux dan Microsoft mungkin

1:10:42dia tidak dioptimasi kesana mungkin enggak tahu kita ada lagi yang mau dibahas ya yang tadi aja

1:10:51web socket nih ada pertanyaan karena penasaran apa yang baru-baru ini terutama sih kayak tadi

1:10:59web socket server send event web transport pertimbangan performancenya gimana ya apa baik

1:11:07dari browser berarti kan ada event handler yang jalan terus tapi kalau event handler sih

1:11:13sebenarnya enggak terlalu masalah ya tapi servernya kan berarti harus ngebuka terus tuh itu kayak

1:11:20pertimbangan performance nya seberapa signifikan maksudnya seberapa banyak yang harus dipikir dan

1:11:27terutama kalau dikaitin sama ya resource dan cost misalnya berarti kegak bu hampir tanda kutip enggak

1:11:35boleh atau tabu kalau misalnya kita pakai cloud service gitu kan gila aja masa berarti tiap-tiap

1:11:43ada yang buka koneksi itu jalan terus gitu pertimbangannya kayak gimana ya itu gimana ya

1:11:51memang tapi kan web socket ini mungkin ya koreksi kalau salah web socket ini dia ngirimnya kan teks dalam jumlah kecil kan apalagi kalau kayak tadi web transport itu kan UDP UDP lebih kecil lagi kan

1:12:05jadi dia ngirimnya nggak bermega-mega kirimnya per kilowatt aja kecil tapi sering gitu

1:12:12tapi sekali konektif terbuka dia jalan terus kan

1:12:17ya sampai nanti bisa baca yang content-type event stream content-type event stream itu

1:12:23websocket itu kirim datanya content-type nya stream jadi content-type kan ada text HTML ada

1:12:31apa lagi saya lupa apa aja sih content type application json oh iya mp4 something something

1:12:43multi part ada multi part form data

1:12:47seperti itu kan

1:12:49nah kalau websocket itu event stream

1:12:52content type nya

1:12:54ya ya ya meskipun si websocket ini bilang ya kalau udah sekali terkoneksi abis itu nggak putus-putus ya tetap bisa diputus

1:13:03kalau on close ya server yang close atau client yang close bisa eh kita udahan ya putus deh gitu

1:13:10tapi kalau request-response kan begitu dikirimin udah otomatis putus gitu kan

1:13:17kalau ini selama belum ada pernyataan putus ya dia tetap nyambung terus

1:13:23nah iya berarti kalau pakai websocket bahaya juga kan

1:13:28no no no websocket itu ada

1:13:31iya gak bisa

1:13:33kalau websocket itu ada pingnya juga ada ping pong

1:13:38ada ping pong ya dia si server akan nge juga Dia nge kalau nggak dibalas dia tutup ping pong masalahnya firebase kan itu sama database

1:13:57kalau saya nggak mau pakai database firebase gimana?

1:14:01tetap mau real time

1:14:02tapi nggak mau pakai database firebase

1:14:03atau service firebase

1:14:06yang mungkin harganya mahal

1:14:07bisa, kayaknya FCM

1:14:09apa Firebase Cloud Messaging

1:14:11itu bisa dipakai buat

1:14:13diintegrasiin sama

1:14:15kode apapun

1:14:17tanpa harus pakai database-nya?

1:14:20Pernah pakai soalnya di kerjaan?

1:14:24Ya, kalau dulu kan

1:14:25semudah kita bikin table di Firebase

1:14:29habis itu semua klien connect ke Firebase

1:14:32ketika

1:14:32datanya berubah, semuanya ikut berubah kan.

1:14:35Itu magic-nya si Firebase kan.

1:14:37orang banyak yang suka gara-gara itu salah satunya kan

1:14:40ketika ada data berubah

1:14:41semua ke klien semua di broadcast

1:14:43jadi berubah gitu

1:14:45tapi ya masalahnya itu lagi

1:14:48kan Firebase itu kan satu tipe database

1:14:50kalau misalkan kita udah punya database

1:14:52atau kita gak mau pakai

1:14:54dokumen database seperti Firebase

1:14:56kita mau pakai yang

1:14:57yang lebih structure kayak

1:14:59relational database

1:15:01ya mungkin bisa pakai FCM dan lain-lain ya

1:15:04FCM itu mirip message broker

1:15:07belum pernah pakai message broker sayangnya

1:15:11kalau FCM itu Firebase cloud messaging

1:15:14ya itu messaging service sih

1:15:16itu spesifik banget

1:15:18kayak cuma buat ngirim push

1:15:21push notif

1:15:23push message

1:15:25itu optimisnya buat itu

1:15:28kalau mau dipakai buat hal lain ya bisa-bisa aja

1:15:31cuma emang dia optimisnya

1:15:34buat kirim push notif

1:15:36jadi inget ini ntar

1:15:40kalau nggak salah posglo bisa loh sebenarnya ada tau guys posglo bikin apa dibikin apa

1:15:52push data ke klien enggak tahu enggak tahu ya jadi kayak ada hooknya gitu kalau misalkan kita

1:16:04subscribe kita kasih tahu ke ke pos nih saya mau subscribe ke table ini ketika ada perubahan di

1:16:09table itu kalau ada row baru atau apapun itu kirim event dia manggil suatu webhook url atau apa gitu

1:16:18Iya, protokolnya sendiri url lewat event trigger ya.

1:16:24Event trigger, iya.

1:16:26Tapi itu kayaknya pembahasannya di luar konteks ya, agak jauh ya.

1:16:30Nah, kalau server send event, nemu satu artikel yang enak sih nih.

1:16:37Kayak bahasanya ringan banget.

1:16:38Oh, ini terkenal memang bagus dia bikin-bikin konten.

1:16:43Dia kalau bikin posting infografik atau semacamnya.

1:16:48bagus zoom in eh salah salah zoom nah streaming events from a server terus server send event itu

1:17:01ternyata spesifikasi tersendiri itu kalau linknya diklik masuk ke HTML speknya bukan HTML spek

1:17:09kalau pengen lihat kalau iseng pengen lihat spesifikasinya ya spesifikasinya

1:17:16nah terus itu penjelasannya kalau kita simpler alternative to web socket

1:17:23kalau cuma pengen servernya aja yang kirim event jadi sebenarnya ini ya single direction ya

1:17:31kayaknya

1:17:32maksudnya apa tujuan

1:17:35atau keunggulan utamanya

1:17:37streaming updates from

1:17:39server, tapi dia gak mau polling

1:17:41ceritanya, I didn't want

1:17:43to be doing polling

1:17:44mau stream updates

1:17:46bla bla bla

1:17:48nah terus

1:17:51itu ada contoh-contohnya

1:17:53ya itu contohnya semi pseudocode

1:17:55sih, cuma cukup ilustratif

1:17:57enak, maksudnya kalau belum paham

1:17:58baca itu jadi oh gitu

1:18:00Oke ya begini isinya betul itu tadi saya bilang eventnya headernya apa fellownya apa Oh ini ya

1:18:10ya terus connection-nya keep live ya Yopi long live sampai live connection Nah itu tuh yang

1:18:19Yang nomor 3 event stream, bener.

1:18:21Content type-nya event stream.

1:18:24Ini SSI ya.

1:18:34Nah terus udah lanjut scroll ke bawah.

1:18:36Nanti ada contoh yang buat client-side-nya.

1:18:40javascriptnya ya kayak gitu doang

1:18:41ini ya yang tadi ya

1:18:43open source

1:18:45event listener

1:18:46nama eventnya sesuai yang dikirim dari

1:18:49server tadi

1:18:50tapi

1:18:53client cannot send updates in the middle

1:18:56ada itunya unlike web sockets

1:18:57jadi kayak perbedaannya sama web sockets

1:18:59tuh yang tengah-tengah

1:19:00gak bisa back and forth di tengah-tengah

1:19:04itunya jadi pas

1:19:05dia lagi terima sepanjang

1:19:07keep alive itu koneksinya alive

1:19:09yang nggak bisa nggak bisa bolak-balik enggak enggak by apa by directional tidak bidireksional

1:19:18sebenarnya kan ya klien makes one request at the beginning habis itu servernya yang kirim

1:19:28respon dia kayak request-response tapi cipelan bener gak sih Iya bener ya kiri quest di awal

1:19:36disitu sepanjang koneksinya masih live ya server bisa kirim kapanpun dan berapapun data ini tadi

1:19:45yang udah kita bahas selanjutnya sih kalau connection-nya putus ya otomatis restart

1:19:51Oh ada bug dia ketemu bug

1:19:54Gak bisa di pause

1:19:56Bisa di fix dengan

1:20:05Settingan proxy

1:20:06Oh salah

1:20:19Dia salah pakai

1:20:20http1 harusnya tp2 ya mungkin atau itu settingan iteknya ya gitu itu masalah dia cuma tadi diatas

1:20:32yang diatas itu kayak simpel banget penjelasannya cuma langsung jadi kebayang of low-nya kayak gitu

1:20:38ya ini bagus artikel yang sangat bagus webshop care bisa digunakan untuk web artis ingat sih

1:20:46bisa aja tapi setahu saya ada protokol untuk nyirim datanya kan ya

1:20:51websocket itu client server kalau webRTC itu peer-to-peer beda

1:20:57oh iya bener beda peruntukannya

1:20:59peer dan bahkan gak perlu server optional kalau gak mau pakai server harus ada ininya apa bahasanya ice server turn turn and apa yang nge handshake mereka

1:21:21yang ngasih tahu oh si ini di IP ini si ini di IP sini ya udah kalian ketemu ya

1:21:27registernya gitu

1:21:29macomblangnya

1:21:31harus ada macomblangnya

1:21:35registernya aja sih

1:21:38sebenarnya

1:21:38buku tamu, harus ada buku tamu

1:21:41harus ada buku tamu

1:21:42buku absen

1:21:45sip, kalau gitu

1:21:47berarti sudah cukup

1:21:49jangan lupa

1:21:50saran-sarannya

1:21:53bola berapa

1:21:55hasilnya, coba

1:21:57hasil bola ya Edwin 0 cewek menang kita asyik menang jangan lupa ya teman-teman bisa kesana

1:22:06dotin slash ngobrolin web untuk nanya-nanya atau saran topik atau materi pemateri enggak

1:22:13narasumber eh jadi terus dimatiin dulu nah ya kita nanti mungkin kita akan ada episode

1:22:23khusus untuk bahas beberapa yang belum websocket adalah salah satu materi yang lumayan banyak

1:22:29lumayan tinggi udah lama nyangkut di discussion sih discussion sih ya PHP sekarang bisa websocket

1:22:37apa saya dong yang baru karena PHP socket udah lama sudah bisa lama-lama Laravel malah udah dikirimnya

1:22:45memudahkan

1:22:47tadi yang di post sama

1:22:51oh iya tadi ada pertanyaan

1:22:54apa hubungannya

1:22:55Laravel Echo dan Pusher

1:22:57kenapa API nya mirip

1:23:00teman-teman yang pengguna Laravel

1:23:02mungkin bisa

1:23:02kasih masukan mungkin

1:23:05Laravel Echo dan Pusher

1:23:07gak pake itu sih soalnya

1:23:09Laravel itu produknya

1:23:12banyak banget ya itu official

1:23:13apa integration ada terakhir pertanyaan untuk konkuransi website website atau proses

1:23:21kan dia event handler ya main oh oh kalau di server mah gak ngerti saya gak ngerti server kalau di client ya event handler harus di main thread kan Atau ditaruh web worker

1:23:38juga bisa sih.

1:23:40Kalau thread itu biasanya kalau

1:23:42seperti Java

1:23:45itu kan kalau kita

1:23:47mau konkuransi kan harus pakai thread.

1:23:50Kemudian kalau proses itu biasanya

1:23:52istilahnya

1:23:54mirip seperti thread

1:23:57Tapi lebih ringan

1:23:59Kalau di

1:24:00Erlang, Elixir

1:24:02Dan mungkin

1:24:04Go Channel ya

1:24:06Go Routine ya

1:24:09Itu

1:24:09Kan konsepnya supaya bisa multi trading

1:24:13Maksudnya biar bisa paralel

1:24:15Makanya namanya multi trading

1:24:17Kalau Java itu kan agak berat

1:24:19Makanya sekarang

1:24:19Bahasa-bahasa yang modern itu

1:24:22Sebutnya proses

1:24:24Itu lebih ringan

1:24:25katanya gitu cuman bagusnya websocket jalan di thread atau diproses ya tergantung bahasa

1:24:33pemrogramannya kalau di Java mungkin nggak bisa pakai proses kan harus bikin thread kan nggak

1:24:39tahu juga sih ya tahu belum pernah sampai sedalam itu sedalam itu kita hanya pengguna menggunakan

1:24:46Iya tadi cuma jadi kepikiran sih kalau kalau apa kalau di browser bisa juga ditaruh di service

1:24:56worker atau web worker atau semacamnya ya enak juga kan biar yang nungguin apa maksudnya ya

1:25:02ibaratnya ngurangin kerja lama selama selama apa namanya selama yang proses yang dilakukan

1:25:11nggak perlu ngubah DOM ya

1:25:13terserah. Jadi cuma kayak update

1:25:15index DB atau

1:25:17local storage ya bisa-bisa aja.

1:25:20Ya kan dari service worker

1:25:21bisa post message. Jadi maksudnya

1:25:23misalnya perlu ada yang di-update

1:25:25ya kirim post message. Ya itu tergantung

1:25:27apa yang dibikin sih. Cuma yang jelas

1:25:29kalau kebutuhannya adalah

1:25:31apa? Biar-biar

1:25:33nggak lambat, nggak lagging

1:25:36core web vitals

1:25:37apa itu?

1:25:39INP atau semacamnya.

1:25:41berarti kan itu is semua event handlernya bisa dipindahin ke service worker ya coba aja belum

1:25:49pernah coba sih kayaknya sih bisa belum pernah coba juga ini juga asal kalau kalau SSI nggak bisa di service worker Oh iya ya ya iya berarti problem utamanya di websocket adalah tidak semua

1:26:06server mendukung ya kalau teman-teman deploy server sendiri mungkin pakai PM install dan lain-lain itu mungkin bisa tapi kalau yang

1:26:18state yaitu harus dicek apakah web socketnya mendukung kalau nggak mendukung mungkin bisa

1:26:22fallback ke SSI server send event gitu ya kalau server send event itu lebih kompatibilitasnya

1:26:30lebih tinggi ya karena dia pakai http iya karena itu sebenarnya tapi lebih lambat ya tapi lebih

1:26:39Ya karena dia kayak polling kan

1:26:41Request response

1:26:44Tapi keep alive

1:26:45Berarti web transport

1:26:47Salah satunya

1:26:49Solusi untuk ini ya

1:26:50Karena mungkin ada server yang gak mendukung

1:26:53NGDX nya juga harus

1:26:55Ditwik supaya lebih kencang

1:26:57Dan lebih mendukung si web socket

1:26:59Akhirnya ada web transport yang

1:27:01Pakai HTTP

1:27:03Tapi mungkin kecepatannya

1:27:05Menyamai web socket

1:27:07Atau mungkin hampir menyamai

1:27:09kita coba aja

1:27:11nanti teman-teman bisa komen

1:27:13saya belum coba, baru belajar hari ini

1:27:16transport

1:27:16mungkin nanti beberapa bulan

1:27:20ke depan web transport muncul

1:27:21kita bisa coba, mungkin lebih bagus atau

1:27:23gimana reviewnya nanti kita lihat lagi

1:27:25shout out mas Yohan

1:27:27tadi yang nyaranin

1:27:30topik, maksudnya materi

1:27:31web transport, tadi kita cuma pengen

1:27:33bahas web socket doang, tapi disaranin

1:27:36coba deh, cek web transport

1:27:37transport sama tadi server event karena masih lagi main-main kesana kan web artis web socket

1:27:45buat chattingnya mungkin kan ya ada yang balapan liar sama web transport mungkin ya itu ya jadi

1:28:01ya ada hubungannya lah masih ada

1:28:03bikin aplikasi yang real time kan

1:28:05buat apa namanya

1:28:07video call

1:28:09ya video call

1:28:10oke untuk malam ini segitu aja

1:28:13terima kasih banyak buat semuanya yang hadir

1:28:15kita ketemu lagi

1:28:17minggu depan dengan topik yang berbeda

1:28:19selamat malam, selamat istirahat, bye bye