Ngobrolin WebSocket - Ngobrolin WEB

2:10Bahkan gak tau ditayangin dimana sih.

2:14Nah ini bisa disambungin ya kalo misalnya nonton bola.

2:16Kalo streaming itu.

2:18Kalo protocol apa ya?

2:20Nah kalo website nayangin hal-hal yang real kan gimana tuh caranya kan?

2:26Harus ada data yang masuk terus.

2:30Streaming.

2:32Atau apa pun itu.

2:34Event stream ya.

2:36Kalo protocol event stream itu kalo di web biasanya pake apa?

2:40Contohnya kayak kita pake apa nih?

2:42Pake stream nya.

2:44RTC.

2:46Atau temen-temen pada pake YouTube live chat.

2:48Ya ini web RTC.

2:50Ya live chat.

2:52Pernah kebayang gak bagaimana protocol nya si...

2:56Sapa lagi ya?

2:58Si Zoom.

3:00Youtube.

3:02Youtube.

3:04Terus kemudian Google Doc.

3:06Google Doc.

3:08Google Doc.

3:10Office 360.

3:12Office 360. Atau siapa yang kuliahnya pernah bikin chat application?

3:20Saya.

3:22Nah pake protocol apa tuh?

3:24Soccer.

3:26Yey.

3:28Kenapa ini kenapa?

3:30Kenapa ini kenapa?

3:32Kenapa yang sifatnya real time atau soft real time seperti chat gitu ya.

3:40Terus mungkin video atau yang lainnya itu.

3:44Kenapa butuh protocol baru gak di HTTP aja?

3:48Karena kan HTTP itu kan dia sifatnya satu stateless.

3:52Request response.

3:54Request response.

3:56Jadi kalo kita tidak merequest apa-apa server nganggur.

4:00Dan ribet kan kita harus request.

4:02Kita ngirim header.

4:04Sama server diterima dikonfirmasi.

4:06Server ngirim balik.

4:08Kita harus klien, maksudnya browser.

4:10Mesti konfirmasi lagi.

4:12Nerima dulu.

4:14Terus minta data lagi. Request lagi.

4:16Ribet kan?

4:18Terus apa lagi tadi?

4:20Apa ya?

4:22Jadi kalo misalkan.

4:24Kan sifatnya itu kalo misalkan ada request.

4:26Request ini baik itu get, post, ngisi form dan lain-lain ya.

4:30Kita ketik misalkan ngobrolinweb.com gitu kan.

4:34Nah itu dia servernya baru bekerja.

4:36Terus dia kirimin balik.

4:38Abis itu udah selesai.

4:40Jadi itu adalah satu proses lengkap.

4:42Sampai...

4:44Life cycle.

4:46Ya life cycle-nya selesai.

4:48Sampai si user mendapatkan halaman web yang dia inginkan.

4:52Nah, sebelum kita ke Websocket.

4:56Sempet dulu ada solusi.

4:58Kalo Ivan bilang akal-akal nontir.

5:02Dalam setiap beberapa detik di-polling, di-refresh manual.

5:06Polling itu berarti istilah kan ya.

5:10Cuma istilah buat kita minta aja secara berkala gitu ya.

5:14Ini ada update gak sih?

5:16Itu tekniknya namanya heartbeat.

5:20Dan sampe sekarang masih dipakai kok.

5:22Heartbeat untuk sesuatu yang gak butuh stream.

5:26Karena gak semua hosting itu bisa stream.

5:30Ya jadi perlu diketahui temen-temen gak semua hosting bisa stream.

5:34Apalagi CloudFront, CDN lah ya.

5:38Semuanya di depan CDN.

5:40By default tanpa perlu setting-setting, gak bisa stream.

5:46-Belum bisa. -Ya.

5:48-Tapi kalo... -By nature.

5:50Apakah cuma pake...

5:52Apa itu pake HTTP biasa kan?

5:54Request-response HTTP biasa.

5:56Atau ada teknik apa khusus gitu?

5:58-Oh biasa. -Yap.

6:00Jadi kalo di HTTP ada beberapa teknik.

6:05Jadi kita bahas dulu deh sedikit mengenai apa socket itu, kenapa ada socket kali ya.

6:12-Iya. -Asik.

6:13Tapi saya gak nemu ini sih, gak nemu web page-nya yang...

6:18Mungkin buka socket.io aja kali ya mas Tiza, ada socket.io.

6:21-Boleh, boleh. -Ya.

6:23Kita present entire screen di sebelah kan.

6:29Be directional, low latency communication for every platform.

6:35-Zoom in. -Ya, Sir.

6:37Jadi ada introduction kali ya, itu di documentation.

6:43Langsung pencet documentation itu loh.

6:47Documentation button gede.

6:49-Hmm, ini dia. -What is socket?

6:54Jadi socket itu by B or B directional.

7:01B directional dan event aja.

7:03-Dua arah ya. -B directional ya, jadi dua arah.

7:06Dimana koneksi yang terjadi itu tidak terputus.

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

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

7:28koneksi yang terjadi di dalam network antara si client dan si server itu

7:35selalu terbuka, ada session-nya.

7:39Nah, ini tuh sulit dibayangin ya, buat orang yang masih awam soal infra,

7:45soal HTTP, kalau yang mulai belajarnya beneran dari web, ngerti web doang,

7:50konsep ini nih agak, apa ya, gue dulu agak sudah pahamin terbuka terus,

7:55karena kan belajarnya cuma HTTP, request-response,

7:59kan biasanya kalau kita ngirim request, udah dibalikin dikasih response,

8:03baik itu oke ataupun error atau redirect atau apapun,

8:06ya udah selesai kan, nah ini tuh kayak mental, kayak perspective shift,

8:12bahwa bisa sekali kita initiate koneksi terbuka, ini belum selesai,

8:16walaupun maksudnya kirim data, udah dapet datanya,

8:18tapi koneksinya masih terbuka, jadi ini kayak harus biasain dengan mindset ini.

8:27Betul, jadi bayangkan sekarang saya waktu kuliah, di salah satu jurus,

8:38mata kuliahnya, kalau gak salah jarinan, itu salah satu tugasnya membuat aplikasi chat,

8:46dimana kita menggunakan socket dan murni socket, karena waktu itu pakainya C#,

8:53jadi benar-benar socket, dimana kita buka aplikasi Windows,

9:02akan membuka port, dan di server akan membuka port,

9:10jadi saya sambungin, oke IP-nya sekian, yang dibuka port sekian,

9:15nanti si server akan terima, oke handshake, dan terjadi koneksi.

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

9:29dia ke server, IP server, dan port yang sama, terus kemudian si,

9:38setelah handshake, dan terjadi koneksinya secara sudah confirm, nanti bisa saya lihat,

9:45di klien A, di komputer 1, kelihatan tuh komputer 2 is online,

9:50jadi komputer 2, komputer 1 is online, gitu ya, bisa dibikin.

9:55Nah, lalu saya chat dong, saya chat, hello, nanti data itu dikirimkan ke server,

10:03nanti dikasih ke klien 2, atau bisa juga yang namanya broadcast,

10:08jadi kalau misalnya ada 10 klien yang terkoneksi secara bersama,

10:13dia kirim satu, nanti dia ke broadcast semua, ke semuanya klien.

10:18Bayangkan jaman MIRC, group chat jaman dulu, dan Yahoo Messenger yang one-on-one chat,

10:29kayak gitu lah konsepnya socket.

10:32Aplikasi penggunaan socket nggak cuma untuk chatting,

10:40banyak ya, banyak, karena dia low latency, karena tidak melewati yang namanya

10:46HTTP TCP/IP yang ada 6 layer, 7 layer, ya TCP ada 7 layer, dan ada Acheca segala,

10:55dia nggak ada itu.

10:56Pokoknya sudah handshake, terjadi koneksi, semuanya event-based,

11:01dia akan dengerin, dan siap terima data, dan kirim data.

11:06Dari sisi aplikasinya, banyak, salah satu tugas akhir dari mata kuliah itu

11:16saya disuruh bikin sejenis, apa tuh namanya, Trojan.

11:24Jadi, iya Trojan, jadi kalau misalnya, beneran dosennya suruh bikin Trojan,

11:31jadi si aplikasinya bisa ditanam, diinstall di target komputer,

11:37maka target komputer, jadi socket server.

11:43Jadi kita dari jaringan yang sama, bisa tahu, oh itu server yang sudah target,

11:48sudah ada terinstall aplikasi kita, jadi saya bisa kirim komen,

11:52oke, open, jadi yang dikirimkan datanya, komen itu open notepad,

11:58open ini, nanti dikirim, karena sudah aplikasi sudah diinstall,

12:02dikirim secara komen dari menganggil Win32 API,

12:09jadi tinggal panggil, buka aplikasi notepad, buka ini, buka itu,

12:13itu bisa shutdown juga, segala macam, itu dari si aplikasi, dari kliennya kita.

12:22Banyak, kalian kalau penggemar game, penggemar game, mau main Warcraft,

12:29mau main Starcraft, mau main apa sih game anak jaman sekarang,

12:33MOBA, MABBA, itu semuanya koneksinya socket.

12:40Jadi, nah itu dari sisi socket. Nah, kembali ke Websocket.

12:47- Websocket. - Websocket itu berarti protokol atau pattern apa, pola...

12:52- Protokol. Dia ada protokolnya sendiri, dia ada protokolnya sendiri.

12:57Ya, dia ada protokol. Lalu, kalau Websocket...

13:02- Bukan protokol HTTP ya berarti ya? - Bukan, dia WS kan.

13:05- Nggak ngelewati HTTP layer sama sekali kan? - Tidak, dia nggak pakai HTTP.

13:08- Tetapi handshake-nya butuh HTTP. - Oh iya handshake.

13:12Oh iya buat buka...

13:17Nanti coba buka Websocket di ini deh, di Wikipedia kalau nggak salah,

13:26Websocket yang di Wikipedia itu ada jelas ini.

13:30Ada HTTP response yang dikirimkan saat handshake.

13:36- Iya handshake. - Yes, handshake-nya itu pakai HTTP dulu.

13:40Sebelum terjadi koneksi.

13:44Ternyata Websocket itu adalah implementasi socket di atas...

13:49- TCP juga. - Apa?

13:53- Di paket TCP tetapi nggak pakai HTTP. - Bukan HTTP, iya.

14:00- Dan ini standar web ya? - Yes.

14:05Websocketnya yang standar web. Jadi socket kan itu umum, infrastruktur umum,

14:12tapi Websocketnya itu standar web yang memungkinkan dari web ngebuka koneksi gitu kan?

14:19Membuat koneksi, melakukan koneksi socket.

14:22- Turun sedikit.

14:27Ada ininya kan Websocket API pakai WS tuh, yang nggak secure itu WS.

14:39Itu protokolnya. Protokol kan WS.

14:42Kalau misalnya kita web biasa kan HTTP.

14:46Kalau yang Websocket yang secure WSS.

14:50- Jadi HTTPS, WSS. - Oke, HTTPS, HTTPS, nice.

14:58Nah, ini menarik juga nih historinya ya.

15:04Jadi cerita dari 2008.

15:09Terus result in the first version of protocol known as Websocket.

15:17- Zoom in, zoom in. - Nah, mantap.

15:24- Comet channel itu apa? - Nggak tahu.

15:31Before Websocket, port 80 full duplex communication was attainable using Comet channel.

15:37- Di sini ada nih. Comet is web application model. - Web application model.

15:42Ya pokoknya teknologi lama yang udah punah ya.

15:47Ya sepertinya kalau dari dasar long held HTTPS dikurs, artinya

15:52keep alive-nya sampai dibikin 60 second, 120 second.

15:58Paragraf terakhir tuh.

16:00Jadi karena ada Websocket dan server send events, maka cometnya jadi obsolete.

16:06- Alex Russell lagi. - Alex Russell lagi.

16:09Slightly late.

16:13Oh dia bikin, bukan dia yang bikin cometnya, tapi bikin istilahnya.

16:19- Istilahnya. - Bikin kata-kata comet.

16:21Dia bikin istilah, dia itu ya spesialis copywriter teknologi.

16:29- KWA juga dia yang itu kan. - Iya, PWA dia.

16:33- Jadi dia sama istrinya. - Oh, comet itu sebenarnya ajak spus,

16:38reverse ajar, PWA web, HTTPS 3D, HTTPS 4D.

16:42- Jadi itu bukan satu, bukan satu label. - Berarti kayak PWA juga ya.

16:49Server send event, server send event gitu juga konsepnya sebenarnya.

16:55Nanti kita bahas akan event ya, SSA.

16:58Nah, turun sedikit, nanti ada HTTPS response-nya.

17:07Turun, turun sedikit.

17:09- Ya, server example. - Server example.

17:13- Ini contohnya apa nih? - Iya kan.

17:15- Pakai Python. - Itu apa sih JavaScript?

17:17- Python, Python, Python. - Ya, Python.

17:20Nanti itu format response-nya.

17:24Oke, pertama dia kirimkan HTTPS, requestnya HTTPS.

17:29Terus kemudian dia upgrade, "Hey, ini sebenarnya websocket, websocket connection loh."

17:34- Baru lagi buka. - Koneksi upgrade.

17:40Betul. Baru si browser menjawab, "Oke, kita connect ya.

17:47Saya buka port nih, menuju port-nya lu."

17:50Inilah salah satu apa tuh yang dibikin sama DNH untuk, sorry bukan DNH.

17:59Accent cable. Hotwire.

18:07- Hotwire. - Hotwire ya.

18:09Itu kan dia pakai websocket.

18:11Makanya websocket itu bagus untuk low latency bi-directional.

18:20Tetapi karena dia butuh koneksi yang selalu dibuka, sehingga scaling-nya menuju banyak channel.

18:31Scaling itu scaling.

18:33Misalnya yang scaling online itu bisa anggap aja webnya diakses 1 juta user saat yang bersamaan.

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

18:44Dan itu 1 channel, 1 session. Makanya scaling-nya susah.

18:52Beda dengan yang hanya pakai request-response, yaitu CDN-nya static, udah, ga usah pusing.

19:00- Iya. Kalau Ruby owners itu awalnya mereka punya namanya, sebentar, namanya itu accent cable.

19:10Itu adalah wrapper untuk pakai websocket di Ruby on Rails.

19:15Mempermudahkan antara server-nya sama klien-nya.

19:19Kemudian muncul lagi yang namanya hotwire. Hotwire itu HTML over the wire.

19:26Jadi HTML page-nya dikirim lewat websocket.

19:30- Oke. - Lumayan overkill ya.

19:35- Iya. Kalau dulu kan request-response. Memang response-nya HTML, CSS JavaScript dikirimkan lewat HTTP, kan?

19:43Terus abis itu muncul yang SPA. SPA itu datanya doang yang dikirim dari server, kan?

19:53- Ya, kayak even websocket ini juga datanya, kan?

19:57- Iya. Dirender di sisi klien, ya kan?

20:00Kemudian muncul di tengah-tengah yang ada hotwire, ada live view, ada di Laravel itu ada namanya live wire.

20:12Itu mereka render-nya di server. Karena kan ngerender di server kan cepat, kan?

20:18Ini ide-nya, ide dasarnya. Ngerender di server itu proses yang cepat dibandingkan ngerender di klien, kan?

20:24Jadi render-nya cepat, abis itu hasilnya mungkin div-nya aja perbedaan antara halaman 1 dengan halaman 1, versi 1,

20:33karena udah ada update, misalkan update harga, gitu ya. Nah itu div-nya dikirimin lewat websocket.

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

20:49- Jadi sebenarnya ini tuh kayak hydration, tapi mustahil hydration-nya di server semua ya?

20:54- Di server, betul. - Jadi kayak dikirim lewat protocol socket ini.

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

21:12Karena mereka bukan fungsional programming, kalau mau pakai banyak CPU dan lain-lain,

21:20parallel programming itu sulit, makanya kena dia di situ scaling-nya.

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

21:33menggunakan websocket itu harusnya tidak separah yang digunakan oleh Ruby on Rails.

21:41- Oke. - Ini lagi lama ya di Twitter ya.

21:49- Sudah mau apa lagi? - Hey Calendar, Hey Calendar itu dibuat pakai

21:53holding wire. - Oh holding wire. Terus jadi berat?

21:57- Terus banyak yang complain kalau itu berat. Habis itu si DHA-nya komen pas lihat videonya,

22:03"Nah, lu itu apa, network-nya di throttle ke 3G, dia nggak mau, slow 3G nggak mau.

22:09Harus yang itu dong, harus full." Karena kalau Google Calendar dibuka di slow 3G juga jelek katanya gitu.

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

22:21Mungkin agak-agak emosi juga. - Iya sulit. Itu risiko bikin produknya pakai orang banyak.

22:29- Iya. Udah produknya punya dia, framework-nya juga punya dia. Jadi dua-duanya diserang.

22:36Diserangnya gitu dia bilang, "Ruby on Rails deserve better," katanya gitu.

22:40Maksudnya harusnya dipakai dengan cara yang benar gitu. Kan diserang dua-duanya.

22:45Udah produknya diserang, framework-nya diserang, gimana nggak marah kan?

22:48Ya begitulah. - Nah.

22:55- Valeri. Cuma Valeri doang. Yang lain mungkin sambil parah.

23:01Yang lain nonton Indonesia Finlay Pin. Udah sepenuh cuy. - Udah sepenuh.

23:06- LiveScore-nya boleh ya. Pake WebSocket ya. Update ya. Kita nggak bisa nonton.

23:11Kalau Laravel, pakai Laravel Reverb. - Reverb.

23:15- Reverb. - Seru ini.

23:18- Iya di-Googling aja. Oh, Reverb. - Bukan LiveWire ya, bukan?

23:25- Beda. - Ih bagus sekali. Ini khas banget Laravel ya. Produknya Laravel.

23:31First party WebSocket server for Laravel application.

23:37- Dia bikin web printer. - Oh, dia bikin web printer.

23:41- Seperti socket. - Oh.

23:44- Ratchet PHP.

23:50- Oke.

23:53- Ini seperti socket I/O sebenarnya. Socket I/O kan library.

23:57- Oh iya, iya. Rapper, iya betul. - Iya.

24:01- Nah, cuma ini buat orang yang baru belajar WebSocket,

24:05kalau, ya sebenarnya mungkin agak mirip ya, kalau misalnya belum menguasain fundamental,

24:10apalah HTML, JavaScript, terus langsung pakai Next.js,

24:14itu jadi kayak bingung nggak menguasain mana yang sinteks dan fiturnya Next.js,

24:20mana yang fundamental web.

24:23Nah, gue dulu pertama kali juga nyobainya socket.io,

24:27karena iya sekitar 3-4 tahun lalu yang demo-nya paling lengkap,

24:32yang contoh-contohnya bagus, banyak tutorial-nya itu kan socket.io.

24:36Oke lah, ngerti, paham dikit, tapi bahkan saat itu nggak terlalu ngah

24:41bahwa itu WebSocket, cara kerjanya gimana, teknologinya apa,

24:45terus udah sampai lama abis itu nggak paham-paham WebSocket tuh.

24:50Jadi maksudnya ada asikunya juga sih.

24:53- Salah satu kegunggulan WebSocket itu kan dia event-based ya, event-based.

24:59Dimana data yang dikirimkan itu ada-ada header-nya dan ada payload-nya.

25:05Jadi sebagai pengganti, ya maksudnya satu-satu kapsul,

25:11biasanya kalau dikirimkan, header-nya dan payload.

25:15Nah, di dalam header-nya itu isinya ini komen-nya apa?

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

25:24yang antara client dan server harus mengerti komen itu.

25:31Jadi dari header itu ngapain? - Event-event-nya apa kan?

25:35- Iya, baru ada payload-nya isinya ya data, saat event mungkin chat ping,

25:44payload-nya ping, sorry, header-nya ping, payload-nya nama kliennya.

25:52Jadi waktu di ping nanti bisa dikelihatan di client yang di server atau di client satu lagi,

25:57"Oh, si X ini nge-ping." Jadi bisa ada cara kerjanya begitu.

26:05Selama koneksi kebuka, dia kan ibaratnya ngelisening apa yang terjadi.

26:15Dan yang dilisening itu on error, on data, on apa lagi, banyak lah itu.

26:22- Client kan yang listen event-handler-nya?

26:26- Bagusnya dari koneksi atau protokol WebSocket ini, kalau misalnya terjadi koneksi putus,

26:31dia akan berusaha connect lagi. - Dengan sendirinya?

26:37- Dengan sendirinya, dia akan berusaha menyangka. - Oh, nice. Enak ya?

26:42- Iya. Nah, kembali sedikit kita rewind sedikit dengan tadi si comment,

26:48bahasanya si Alex Lasal yang comment itu. Di implementasi-implementasi, maksudnya selain WebSocket itu

26:56ada juga loh banyak yang menggunakan Ajax, seperti Ajax Push, atau berusaha HTTP streaming,

27:03HTTP server push, atau yang saya sebutkan tadi namanya Heartbeat.

27:08Bukan pulling, tetapi si aplikasi kita, si client kita. Misalnya anggap, bayangkan aplikasi kita sedang

27:19upload database dan berusaha mengekstrak database di server.

27:29Tetapi untuk mengetahui progress bar, progress apa yang terjadi di server,

27:37kita bisa pulling. Sudah sampai mana, sudah berapa persen, sudah sampai mana, sudah sampai mana.

27:44- Itu kita manuali bikin request kan maksudnya? - Iya.

27:48- Manuali ngeloop request, entah gimana sekarangnya. - Ya, si simpelnya ya,

27:53aplikasi client JavaScript kita, looping aja set timeout, set timeout mungkin setiap 2 detik nanya,

28:04setiap 2 detik nanya, sudah sampai mana progress restoring database-nya.

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

28:17ya bisa jadi gak perlu WebSocket, tapi bisa juga pakai yang namanya, apa tadi namanya,

28:25bisa jadi yang namanya Heartbeat itu. Bukan pulling, pulling beda lagi.

28:30Hanya request terus, tanya, tanya, tanya, tanya apa yang terjadi setiap itu.

28:37Kalau pulling itu berbeda, jadi kalau pulling itu, coba buka server send event, SSE.

28:44Itu teknik namanya pulling.

28:48- S-S-server? - Send event. - S-S-E-S-E-N-T. Server send event. - Event, ya.

29:00Ini bagi teman-teman yang misalnya server-nya gak bisa WebSocket, ini adalah pull bed-nya.

29:09Yang introduction-nya, klik. - Jadi teman-teman yang server-nya gak bisa WebSocket,

29:21mungkin karena dibelakang CDN, ya bisa pakai yang namanya server send event.

29:28- Tapi cuma bisa server ya yang kirim event, gak bi-direksional kan?

29:34- Bisa bi-direksional, nanti ada event source namanya, event source.

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

29:51Event source itu ada server send event aja langsung, play using-nya. Itu di guide.

29:59Ya, serve event source. Nah, ini udah ada API-nya.

30:06Jadi misalnya kita buka koneksi HTTP ya ini ke satu endpoint namanya SSE demo atau API SSE demo.

30:17Dimana SSE demo ini akan membuka koneksi selama max timeout-nya PHP.

30:26Jadi si server tidak akan memutus sampai dia timeout.

30:34Ngebayangin ya, kita nge-request tapi request-nya kita tuh gak ada response end of life, end of AOF-nya dari server.

30:45Jadi dia akan menunggu terus seperti while true.

30:51Ujung-ujungnya while true, coba lihat ada server implementation-nya.

31:00Nah, ini dia. Selama while true dan header-nya itu yang dikirimkan text event stream dan no cache.

31:12Dan selama while true, tentu kan si server akan membuka koneksi ini kan, gak sampai dia timeout.

31:21Nah, selama while true ini yang dia listen to ya data-data ini apa yang dikirimkan oleh si user,

31:35nanti dia balas pakai stream, event stream. Dan setiap stream-nya selesai dia kirimkan, dia flush.

31:45Nanti itu artinya flush itu dia akan kirimkan, jadi chunk, chunk data aja yang dikirimkan, text.

31:54Seperti itulah dan itu namanya pooling.

31:58Ini ada pertanyaan yang relevan sekali, kalau user matiin app-nya tanpa lockout, apakah koneksinya tetap open atau

32:07pas dibuka lagi aplikasinya bisa reconnect lagi?

32:11Gak bisa reconnect karena dia akan tetap putus, dia akan berbeda session.

32:16Lockout-nya bukan lockout seperti login dan lockout, yang menentukan lockout itu kan si cookie.

32:32Gak ada hubungannya sama event source.

32:36Jadi gak terjadi, tapi progress yang terjadi terputus. Misalnya data yang kalian terima itu data yang boot copy data ya rusak datanya.

32:53Misalnya menunggu data, corrupted datanya.

32:58Tapi kalau sekedar life score, saya pernah bikin aplikasi pakai SSI untuk life score, karena server yang dipakai tidak mendukung web socket.

33:10Jadi saya pakenya SSI, pakai life score ini, Hockey.

33:16Itu kan tadi sudah buka koneksi, terus kalau browser-nya ditutup, close tap, tanpa manggil event close, itu masih terbuka dong server-nya gak tahu kan?

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

33:53Ada mekanisme dari server kan, untuk mengetahui oh itu udah terputus.

33:57Dan dia kan ada time out selalu, pasti ada, web server itu ada time out kan.

34:04Dari PHP-nya, bisa jadi dari PHP-nya, atau dari si web server seperti Nginx ada time out.

34:18Nah, kerennya si event source ini, kalau misalnya sudah time out terputus, dia akan create ulang otomatis, jadi kita gak perlu buat lagi.

34:31Ada demo-nya kan, coba aja demo-nya ada di atas.

34:35Di atas ada demo-nya deh, dia gak kasih ya, ada.

34:44Itu kali yang main page-nya, server send event, ada gak?

34:50Di atas, iya iya.

34:53Oh, sudah bisa jadi, ya udah. Harus punya server.

35:01Ya kan demo teknologi server, Sahit.

35:05Ya, anyway, begitulah cara kerjanya SSC. Nah, ini HTTP long pooling sebagai foldback-nya, itu langsungnya cara kerjanya.

35:15Kalau soket I/O ya, kalau teman-teman pakai soket I/O, misalkan web soketnya tidak jalan, baik di client atau di server, dia foldback-nya ke HTTP long pooling.

35:25Artinya, jadi refresh secara bertala dan lain-lain ya.

35:29Tapi kalau browser itu sudah hampir 97% katanya di sini sudah mendukung web soket.

35:36Hampir semua sih, paling 3%-nya itu IE sama Opera Mini kecuali kayaknya. Soalnya ini udah puluhan tahun kan teknologi ini.

35:46Semuanya Chrome versi 4 sudah support web soket.

35:51Itu Opera Mini doangnya gak support.

35:54Nah, terus ini tadi soket I/O kan belum selesai ya, kita bahasnya.

35:58Ini kan sebenarnya library ya, kayak satu abstraction on top of semua teknologi soket tadi.

36:06Makanya dia bisa, kelebihannya adalah itu kan dia bisa incorporate 3 hal itu yang di situ.

36:14Bisa pakai long pooling, web soket, web transport, mana yang paling optimal dan tersedia di client-side.

36:23That will automatically pick the best available option. Oke ya.

36:28Ini kalau pakai library, kalau kita mau pakai web soketnya langsung, itu juga bisa.

36:34Artinya ya cuma web soket doang. Kalau gagal, ya kita harus foldback-nya kita bikin sendiri.

36:40Ya kita bikin semua itu sesuai kebutuhan kita.

36:44Yes, nah ngomong-ngomongin soal web soket manual atau Vanilla, ternyata sudah dimers di Node.js.

36:53Oh iya lho, baru.

36:58Oh lah, masa sih?

37:01Ya ini kan September 2018, kali tahun ini udah.

37:06Udah ya?

37:08Karena gue udah pernah lihat, oh pakai Node.js udah bisa langsung pakai web soket gitu. Pernah baca dimana?

37:14Ada contohnya nggak ya?

37:16Contoh untuk apa?

37:18Kita lihat ya, dokumentasinya. Sudah masuk belum ya?

37:23Di Node.js-nya. Jadi biasanya kalau kita, eh kok download, kalau kita pakai server Node.js gitu ya.

37:32Itu biasanya paling umum kita pakai socket I/O ya, paling umum ya.

37:38Ada kan NPM, NPM Web Socket yang ada?

37:41Ada, ada.

37:42Web Socket?

37:43Ya, belum ada di sini. Ini versi berapa?

37:46Enggak ada versinya. 22? 22 belum ada?

37:51Ya ini yang gue selalu pakai. NPM itu yang Web Socket, NPM ini yang selalu, paling sering gue pakai.

38:02Oh yang ini.

38:04Oh, NPM package, Web Socket.

38:07Ya ada, ada.

38:09The Turtle.

38:12Kalau dia tiba-tiba ngamuk dan delete, banyak yang rusak.

38:20Ya selesai.

38:22Risikonya pakai software open source ya. Mending kalau cuma, mending kalau cuma ngamuk terus ngedelete.

38:31Nah kalau yang dulu siapa itu? Yang apa dikasih malicious code, lebih serem lagi sih ini.

38:37Soalnya ini kan langsung berhubungan sama data ya.

38:40Ya selalu dikunci versinya, ya in case Liu tiba-tiba ngamuk atau apa ya.

38:52Kita ambil tiga sirisiko.

38:55Kok node.js webnya berubah ya?

38:58Dokumentasinya gak bisa di-search lagi. Dulu ada tombol search-nya sekarang gak ada.

39:03Search bar, cuman karena ke zoom in, zoom in, zoom out.

39:07Oh iya mungkin juga, gak ada, gak ada.

39:10Apa dinet dia, itu Web Socket itu dimana?

39:15Cuman ya.

39:17Web Crypto, Web Stream.

39:21Ya begitulah.

39:23Eh ini malah adanya di, bukan docs-nya juga sih, tapi di release announcement-nya.

39:32Web Socket client.

39:36Coba deh buka blog post.

39:40Oh salah yang ini, Web Socket WS ini.

39:44Ya dia cuma itu, "We are excited to announce release node.js 22.

39:50Highlights include require AS module, Web Socket client, blablabla."

39:57Web Socket client, bukan Web Socket client.

40:01Client, justru client.

40:05Jadi mungkin apa ya, si node.js-nya itu buka koneksi ke ya suatu server lainnya.

40:15Server lain, jadi proxy.

40:20Iya, jadi proxy ya.

40:23Kayaknya.

40:25Coba, mana dia?

40:28Coba aja buka Web Socket.

40:30Web Socket default, semfer, enable Web Socket by default.

40:35Oh udah ada nih.

40:37Kan tadi sebelumnya experimental tuh ya, September 2023.

40:40Nah yang Januari 2024 ini, enable by default, berarti udah nggak usah pakai flag.

40:45Cuma itu sebagai apa dan gimana pakainya masih misterius.

40:51Masih belum, ya masih misterius.

40:53Mana sih Web Socket-nya?

40:55Enable Web Socket by default.

41:00Ada lagi nggak Web Socket lain?

41:02Nggak ada, oh ini.

41:04Loh, dia lagi.

41:06Oh ini total semuanya ya.

41:08Major commit another.

41:11Ini yang ini.

41:15Wah ini codenya, ada doc-nya, CLI.

41:19Oh CLI buat ini ya, experimental itu tadi ya.

41:22Yang ini.

41:25Nggak ada doc-nya.

41:27Global?

41:28Global apa?

41:30Oh.

41:32Nggak ada.

41:34Ini nih, coba deh.

41:39Oh iya.

41:41Coba buka docs-nya tuh.

41:43History.

41:45Iya betul, buka historinya deh, kan cocok.

41:48Itu sebelumnya edit di versi 2.1.

41:52Terus di 2.2 udah stabil, maksudnya nggak hidden.

41:56Cuma nggak ada link-nya.

42:00Kalau yang atas-atasnya kan ada link-nya tuh, ada link ke docs.

42:03Nah ini belum ditulis.

42:04Jadi mungkin temen-temen yang pengen avatar GitHub-nya masuk ke dokumentasi Node.js,

42:10coba bikin pull request.

42:12Tapi nggak ada.

42:13Bikin dokumentasi.

42:14Untuk apa gitu cara pemakaiannya ya?

42:16Harus bikin, harus dibikin dulu kan.

42:19Biasanya sih begini ya, coba.

42:22Saya salah, tadi bukan yang NPMJS itu bukan itu saya pakai, saya pakai yang WS.

42:27Iya.

42:29Ini yang betul.

42:31Nah, cara pakenya ya, menurut saya,

42:36kalau seadanya ada sih, bakal begini juga ya.

42:39Kurang lebih ya, iya sih.

42:42Ini server-nya.

42:44Tutup, tutup, tutup.

42:46WSS port-nya.

42:49Kalau ini kan Websocket, bukan, apa ya, Websocket yang,

43:01kalau socket I/O salah satunya ini doang kan.

43:04Kalau socket I/O itu kan sebenarnya ini lebih baik.

43:06Iya, salah satu lagi.

43:08Dia rapper.

43:09Dia hampir kayak framework sih, maksudnya kalau mindset front-end ya,

43:14hampir bisa dibilang kayak framework itu dia bikin keputusan arsitektur,

43:18dan termasuk konfigur fallback-fallback-nya,

43:21dan sintaksnya juga dipermudah lah.

43:24Ini kan buat initiate server-nya aja,

43:26config object-nya ribet.

43:28Kalau socket.io cuma masukin port-nya doang.

43:32Oke.

43:34Nah, pertanyaan selanjutnya adalah,

43:37kan HTTP/2 itu sudah bisa push data kan ya?

43:42Iya.

43:44Apakah dengan HTTP/2 Websocket jadi akan punah?

43:49Atau bahkan HTTP/3?

44:01HTTP/2 is primarily focus on optimizing delivery of web content and improving performance of web application.

44:09Feature like multiplexing header compression prioritization help reduce latency and speed up page rendering.

44:17Terus, kalau Websocket apa?

44:21Serve different purpose and as distinct advantages.

44:25They are not necessarily better or worse than each other.

44:28Jadi, peruntukannya beda.

44:31Kalau HTTP/2 itu bisa dia ngirimin static file ya.

44:35Peruntukannya untuk ngirimin static file kan yang di sini ya.

44:39Yang pernyataan ini kan ya. Mana dia?

44:42Delivering web content.

44:45Ya nggak harus static, tapi punya sekali antar ya udah.

44:49Emang kayak kita terima paket aja, paket titerli di dunia nyata kan ya udah kita minta sesuatu,

44:55kita memesan sesuatu, barang itu datang ya udah itu cukup buat kebutuhan kita ya udah.

45:00Itu kan berarti analoginya HTTP itu kayak gitu.

45:03Sementara kalau Websocket itu kan ya itu tadi harus bi-direktional ya dua arah.

45:10Harus terbuka terus menerus, harus kita tinggal bikin semacam event handler atau listener.

45:17Nah, tapi GRPC itu pake HTTP/2 buat komunikasi bi-direktionalnya.

45:26- Oh, baru tahu? - Dan dia ngirimin binary formatnya.

45:34- GRPC gimana secara perjalanannya? Pernah pasti nggak pernah ngedalami GRPC.

45:41- GRPC itu kan remote procedural call. - Ya, kalau RPC gue tahu tuh caranya.

45:48Coba apa bedanya dengan G-nya itu apa sih?

45:51- G-nya itu adalah Google punya. - Oh.

45:55- FourKey. - Ya, dari internal Google, kayak Kubernetes lah.

46:12- Framework. - Framework yang bisa dijalankan...

46:16- Zoom in coba lagi. - Zoom in, oke.

46:20- Bisa jalan dimana aja. - Jadi sebenarnya dia itu bisa equivalent sama Websocket juga.

46:28Kita harus bikin servernya, kemudian bisa berbagai client, baik itu mobile ataupun browser itu bisa konekt ke servernya GRPC.

46:39Nah, tapi bedanya kalau Websocket itu yang data yang dikirim itu umumnya kan string ya.

46:48- Benar nggak? - Oh, text.

46:50Text, string, kalau pun kita mau ngirim JSON kita stringify dulu kan.

46:54Nah, kalau GRPC itu kirimnya binary data.

47:00Binary data yang konon kabarnya membuat si GRPC ini performanya lebih bagus.

47:08Tapi cara kirimnya ribet, karena harus pakai protobuf, sintaksnya protobuf.

47:20- Buffered. - Protobufnya Google punya.

47:25Itu kayak sintaks GraphQL lah.

47:31Iya, kirimannya pakai ini. - Coba lihat contohnya.

47:39Jangan-jangan mereka bikin ini buat Youtube ya? Nggak? Atau buat apa sih?

47:46Bisa kan kalau yang bikin kayak Google, Meta, ya buat in-house produk mereka kan.

47:52- Calendar. - Ini contohnya kalau kita mau ngirimin apa, kita harus bikin objeknya dulu,

48:01terus struktur datanya seperti apa, nanti kliennya juga punya file proto yang sama,

48:09bisa memaping si binary yang dikirimin oleh server ke klien, begitu juga sebaliknya.

48:17Tapi ini tuh apa sih? Library, protokol, kayak teknologi proprietary-nya mereka?

48:26Ini library, framework, RPC framework. Protokolnya mereka menggunakan HTTP 2 dan Sun akan menggunakan HTTP 3.

48:37Jadi ya sebetulnya kayak misalnya tadi socket.io kan dia bikin produk, bikin library,

48:45abstraksi, dibawahnya ada macam-macam tuh ada web socket, ada apa.

48:50Nah kalau ini dia bikin, di dalamnya tuh HTTP 2 biasa ya?

48:55- Mungkin ya mereka mungkin menemukan masalah di web socket sehingga mereka tidak menggunakan web socket,

49:03jadi akhirnya mereka bikin di atas HTTP 2. - Ya mungkin untuk optimum kompatibilitas kali ya.

49:10- Betul. Mungkin tadinya HTTP 2 hanya dioptimise untuk delivery content atau static file,

49:18akhirnya mereka bikin untuk binary. - Web socket perjuangan lah gitu ya.

49:24- Web socket perjuangan. Comet perjuangan. Comet, ini berarti apa? Penerusnya Comet ya?

49:32- Penerusnya Comet, nggak tahu. - Beda sih. Ini bisa di web ya? Bisa?

49:42- Bisa. - RPC bisa di web?

49:44- Bisa, bisa. Ada ini nggak contohnya ya? Google C++.

49:51- Work across languages and platforms. - Nggak ada JavaScript.

49:58- Bisa di PHP, bisa di Node. - Server ke server kan, server ke server.

50:04- Iya makanya. - Maksudnya bukan ke browser.

50:07- Iya. Server to server. - Server to server.

50:12Supported platform. Ini ada web? - Coba. Quick start.

50:19Gitclone, Docker Compose. Antarservice. Ini sebenarnya benar-benar.

50:29Saya baru ingat nih, benar sekali. Jadi, gRPC itu dipakai untuk web services,

50:35komunikasi antarservice di web services. Itu peruntukannya. Peruntukan utamanya.

50:41- Jadi bukan ke client ya? - Bukan untuk client dan server.

50:45Tapi antarservice. Iya. Benar-benar. - Nah, terus berarti dari client,

50:49dari browser, nge-request biasa juga ya, tetap ujung-ujungnya?

50:53- Biasa. - Atau...

50:55Iya kan? Kita harus minta terus ya? Nggak bisa buka koneksi.

50:59- Iya. Bisa jadi... - Kabarnya bakal ada.

51:01- Kabarnya bakal ada. - Apa tadi yang kabarnya bakal ada?

51:07- Yang web browser. GRPC diakses dari browser. Library-nya ya.

51:13- Basic tutorial apa tuh? - Basic tutorial.

51:19- GRPC. - Ada tadi? Coba diklik.

51:23- Itu di kiri. - What's next?

51:25- GRPC web. Itu ada GRPC web. - Oh, ada pasangannya gitu.

51:31- Ini back-end server. Configure Envoy Proxy. - Oke, fine.

51:37Saya cuma pengen tahu di web itu gimana sih?

51:41Itu tadi ada event handler-nya, ada pullback-nya.

51:45- Ini kan, yang atas ini kan? - Atas. Nah, itu ada...

51:49- Eh, ini server kan? - Oh.

51:51- Server. - Ini server, echo.

51:53- Echo server. - Iya.

51:55- Nah, kita mau lihat client sekarang. - Iya.

51:59- Udah ada berarti. - Oh, oke.

52:05Hampir sama seperti Websocket kan, model bentukannya kan ya?

52:09- Betul, betul. - Ya, jadi kayak...

52:13- Kayak ngebuat event source sendiri aja gitu. - Iya.

52:17Kayak bikin event source, betul. Kayak bikin event source.

52:21- Terus request... - Http kan? Http kan?

52:24Jadi membuat event source yang lebih terstruktur.

52:28Karena data yang kita panggil, terus data yang kita panggil, remote code prosedur ya.

52:36Data yang... salah, remote prosedur call.

52:39Prosedur yang kita panggil, prosedurnya apa, data structure-nya apa,

52:44sudah kita kirimkan, nanti kita terima data server seperti apa.

52:47Iya. 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. Terus di sini, ini adalah prosedurnya.

53:07Ini adalah fungsinya. Fungsi yang dibuka oleh server dan bisa dieksekusi oleh klien.

53:13Ini file.proto ini nanti dikompile seperti ini, terus bisa di-output ke JS.

53:23- Jadi kode... - Oh, yang diimport tadi ini ya?

53:27Yang ada di server, kemudian dikompile pakai protokompiler, jadilah file JS

53:33yang isinya sudah auto-generated. - Output-nya JS.

53:37Nah, terus tadi tuh, nah ini nih yang di-require, yang di-import, itu tadi hasil output-nya.

53:43- Iya, echo request, echo response. Dan kemudian echo request-nya bisa kita eksekusi di sini,

53:48di sisi klien. - Kayak web assembly, kayak ngebungkus dengan web assembly.

53:55- Ini kan prosedur call di sini kan sebenarnya kan? - Iya, itu prosedurnya.

54:02- Prosedur call-nya ini kan, set message ini kan. Jadi kita set message seolah-olah di lokal,

54:08padahal sebenarnya request-nya ini ada di server. - Iya, jalan di server.

54:12Jadi yang data yang dikirimkan via, pakainya binary tadi kan. Tapi kirimkan via binary.

54:20- Iya, HTTP2. Dia pakai HTTP2. - Makanya saya bilang, seperti jampur-campur

54:26antara web assembly dan event source, kan web assembly binary juga.

54:34- Di client doang? - Iya sih.

54:38- Tidak ke server? - Susah. Benar-benar RPC sendiri.

54:42- Manggil prosedur yang ada di server tapi dari client, gitu ya. - Iya, betul. Itulah konsepnya seperti itu.

54:50- Serasa, berarti ini khusus untuk orang server tapi dipaksa pengen bikin aplikasi yang di client.

54:59Ya udahlah, tetap seperti nulis logic yang di server, tetapi jalannya di client.

55:08Tapi sebenarnya prosesnya jalan di server. - Enggak. Sebenarnya awalnya ya,

55:16peruntukannya awalnya adalah untuk berkomunikasi antar server, awalnya.

55:21Tapi ternyata banyak yang minta, eh, yang web dibikin dong. - Iya, sekalian.

55:26- client ke web, gitu kan. Ya udah, gitu. Awalnya buat antar server, microservice.

55:32- Nah, berarti sebenarnya itu head-to-head-nya yang tadi masuk baru di Node.js 22, kan.

55:39Mau dibikin kayak gitu juga kan, websocketnya.

55:42Si node server-nya itu sebagai client, makanya tadi kan websocket client.

55:48- Hmm, oke, oke. Tapi pakai WS, instead of HTTPS. - Iya, head-to-head-nya.

55:56- Head-to-head-nya. Oke, oke. Nanti lagi mau kita bahas.

56:01- Nah, terakhir itu ada yang baru, yang baru tentang websocket, web transport.

56:08Ada tuh yang dari Google tuh. - Developer Chrome.

56:13- Ini masih ini ya, masih... - Chrome only.

56:19- Ini bukan? - Iya, limited... Apa itu kalo ininya baseline-nya kuning?

56:25- Availability. Safari Bloom. Safari Bloom Support.

56:31Nah, tapi apa ini saya nggak tau. Kita baca sama-sama aja.

56:35- Baca bareng aja. Nah, MDN itu bukan resource yang bagus kalo kita belum tau.

56:39Tapi bagus kalo kita udah tau. Nah, ini aja yang lebih user-friendly.

56:44API, Offering Low Latency, Bidirectional Client Server.

56:51- Apa? Kayak websocket. Tapi apa bedanya itu yang pertama tau?

56:56- Oh, pakai HTTPS. - Oh, dia ngeliat itu ya kali ya.

57:02Ngeliat DRPC kali ya. - Berarti nggak pakai websocket protocol lagi.

57:09Oh, ini. Oke, lanjut. - Lanjut.

57:15- Nah, kalo non-secure, pakai datagram. Kalo secure, pakai stream. Atau gimana? Gak tau.

57:21Unreliable itu maksudnya apa, coba? - Gak reliable.

57:27- Bebas. Datagram. Oh, do not need strong delivery guarantee.

57:32Kalo stream, oh, urutannya harus sama ya.

57:38Kalo nggak masalah, siapa yang sampe duluan, pakai datagram.

57:42Kalo yang harus urut, pakai stream. Mungkin kalo datagram tuh kayak apa sih?

57:50FTP. File Uploader kali ya. Kan maksudnya yang penting keupload.

57:55Kan pasti ada hashnya atau apanya nanti diurus, di gabungin sendiri di server.

58:03Tapi kalo misalnya kayak video atau chat kan harus urut. Jadi pakai stream API.

58:10Oh, kalo websocket itu di atas TCP kan. Kalo TCP itu sifatnya kita kirimin data.

58:19Terus kalo datanya udah nyampe up problem, kita tau statusnya kan.

58:23Dikirimin balik. Data received gitu kan. Ada atikannya kan.

58:28Kalo ini, di atas UDP. - Makanya lebih cepet.

58:32- Fire and Foreman. Kirim ya udah. Mau nyampe, mau nggak, terserah.

58:37- Dia pakai Quick. - Dia pakai Quick.

58:40- Urutannya kayak gimana? Terserah tadi yang kalo datagram.

58:43Kalo stream, bakal urutkan tuh, one or more streams of ordered data.

58:50- Ini kayaknya contekan banget sama GRPC. Karena GRPC juga bakal menggunakan HTTP 3,

59:01menggunakan UDP, dan pakai Quick protocol juga. Mirip-mirip ya.

59:07- Saling mencontek. - Receiving media stream push.

59:14Receiving notification push.

59:17- Menarik. Bisa bikin push notification nih. Coba gimana secara pakainya?

59:25- Current status. Oh, udah hampir komplit semua.

59:28- Wah, ini masih proposal kan soalnya. - Masih proposal?

59:34- Iya. Eh, nggak tau. Tadi udah launch di Chrome sih.

59:40- Wah, udah ada website ini, webtransport.de. Apa ini?

59:47- Community maintain. - Connect.

59:59- Kan community maintain tadi katanya. Ya kali servernya udah dimatiin.

1:00:06- Ini ya, localhost. Localhost emang bisa, kan nggak ada jalan.

1:00:10Localhost harus bikin. - Iya, iya.

1:00:13- Basic JavaScript client to try. Oh, kita harus bikin servernya.

1:00:19- Oh, pantasan ke localhost. Maksudnya kita jalanin. Kita bikin dulu di local atau di mana.

1:00:25Abis itu kalau kita mau nyoba, bisa. Kayaknya maksudnya gitu.

1:00:30- Code sandbox nih, ada code sandboxnya.

1:00:35- Nah, mending lihat kodenya.

1:00:51- Wah, langsung webtransport, wah. - Zoom in, BTW.

1:01:05- Text send the data 10 times. - Coba buka log.

1:01:25- Initiating connection. - Kalau network, network isinya apa?

1:01:31- Server lognya ada nggak sih? - Nggak ada.

1:01:39- Development servernya, kayak misalnya kalau terminalnya.

1:01:46- Ada tuh. - Ada.

1:01:53- Nah, npm relastart. - Sudah itu udah jalan biasanya.

1:02:01- Udah jalan, tapi servernya aja. - Coba kita lihat ke mana sih dia perginya.

1:02:09- Component log, input. - Wah, jadi kayak mau buka juga.

1:02:23- Send data kan? - Be-directional stream isinya apa tuh?

1:02:39- Oh, di transport, di metode. Apa metodenya transport?

1:02:43- Sebetulnya, sebentar, sebentar. Saya jadi bingung. Ini kan input dan output.

1:02:49- Inputnya itu... - Bawah.

1:02:57- Send data. - Send data, send data.

1:03:01- Iya, itu tadi kan create by directional. - Oh, nggak ada replay?

1:03:09- Pasalnya dia harus nge-replay lognya itu, dia harus ne-kirim di browser juga itu lognya.

1:03:18- Ptw, demo-nya mana sih ini? - Makanya bingung kan?

1:03:23- Demo-nya dari sini itu ada try it out, serverless write your own. - Oh, try it out.

1:03:32- Open bidirectional stream. Gak bisa ya. - Mati.

1:03:42- Anyway, namanya coba-coba using the API. Udah ya, habis ya. Oh, ini ya, bukan?

1:03:48- Itu, itu cara kerjanya. Oh, berarti web transport API itu sudah ada tuh, itu kan?

1:03:54- Iya, ini ada. URL-nya masukin. Terus... - Itu URL server-nya kan ya maksudnya?

1:04:02Yang kita mau buka koneksi. - Once ready, fulfill, the connection can be used.

1:04:09- Wait, transport, ready. - Turun, turun.

1:04:14- Nah, ini kan open connection. - Nah, kita kan bisa milih tadi,

1:04:19pake datagram atau pake stream. Kalo datagram caranya, haa, bingung juga, pake vector ya.

1:04:26- Binary berarti ya, dikirimin ya? - Binary?

1:04:29- Iya. - Binary.

1:04:34- Dan UDP itu data yang bisa dikirimkan, dikit loh. Gak bisa banyak.

1:04:39- Kecil ya, kecil ya? - Kalo gak salah sih, berapa? UDP itu maksimal data-nya berapa sih?

1:04:45- Stream API. Ini contoh stream-nya, create bidirectional stream.

1:04:50- UDP itu maksimal 65 kilobyte. - Ya, harus dipecah-pecah.

1:04:59- Dipecah-pecah kan makanya, misalnya kalo video yang di front-end masters atau apa yang kursus berbayar gitu,

1:05:11video berbayar kan pakenya kayak gini ya kayaknya. - Betul, betul.

1:05:15- Gak tau sih, exactly pake datagram atau bentuk lainnya, selalu ngirim.

1:05:21Jadi ngirimnya bukan media, bukan file media, tapi dipecah jadi chunk yang kayak gitu.

1:05:26- Iya, pengen download ya? - Iya, pengen nyolong.

1:05:32- Kecil-kecil. - Gak bisa dicolong. Gak ada yang bukan media file.

1:05:36- Ketauan, sama saya juga melakukannya jadi tau.

1:05:44Maksudnya mau didownload dulu kan sebelum ditonton gitu kan, kalo nontonnya gitu kadang-kadang suka nge-like kan.

1:05:52Liat lah. Oh, ga ada ternyata yang fullnya, ada yang kecil-kecil.

1:05:57- Kecil-kecil pas dibuka di preview isinya kagak jelas bahasa alien.

1:06:02- Iya, berarti dia modelnya kayak gini. Polyfill. Oh, udah ada polyfill.

1:06:10- Gak kelihatan. - Oke, tadi gak kelihatan di networknya.

1:06:28- Coba kita baca ini dulu tadi.

1:06:34- Berarti, tapi udah didukung banyak, apa, beberapa, tadi mana dia?

1:06:41- Eh, Jeff Postic loh, tuh yang bikin ininya, postnya.

1:06:47- Pak Jeff ini dimana sekarang? - Nuh, udah gak di Google ya?

1:06:53- Epo dikit. - Kan dulu dia yang bikin workbox ya, kalo gak salah.

1:06:59Dan ngejawabin semua. - Iya, yang review saya jadi GDI nih, Pak Jeff Postic.

1:07:08- Dan dia tuh rajin banget dulu pas masih Googler ya, di Stack Overflow,

1:07:13semua pertanyaan yang tagging workbox selalu dijawab dengan apa, kayak detail, ada linknya, wah, itu banget.

1:07:20Rajin banget ngejawabin. Pindah ke mana gitu. Sekarang mungkin pindah ke Ternak Ayam Petunjuk.

1:07:36- Ternak Lele. - Ternak Lele Dumbo. Jadi tadi ada apa aja, pertama tadi yang website.

1:07:50- Hmm, 2sigma apaan? E-commerce, oh, 2sigma, scientist financial service. Beda banget ya?

1:08:07- Jauh-jauh. - Shopify atau semacamnya, kirain teknologi.

1:08:16- Sopify lagi, semua perangnya bonong deh, saya kan Sopify. - Kalo gak, ke itu, ke Edge, Microsoft Edge,

1:08:24ikutan Pak Alex Russell. - Alex Russell udah di Edge sekarang?

1:08:29- Iya. - Oh, gak jauh-jauh.

1:08:35- Iya, emang spesialisasinya di situ. - Browser engineer yang asal Indonesia itu kak Rakina,

1:08:43dia kan sempet ngomong, kalo browser engineer itu pindahnya tuh gak jauh-jauh, muter-muter aja.

1:08:49Mozilla, Safari, Chrome, sekarang Edge. - Karena skillnya niche.

1:08:57- Iya, karena ekspertisnya kemosnya itu udah spesifik banget dan dia optimalnya kalo ya di antara 4 perusahaan itu.

1:09:08- Iya, makanya. Jadi ya, muter-muter aja itu. - By the way, Edge sekarang sudah resmi berdiri sendiri ya.

1:09:17Bukan Chromium-based browser lagi. - Really? Engine-nya apa?

1:09:23- Iya, maksudnya dalam major browser, Edge itu bukan lagi begini. Kayak Opera kan gak di bawah Chrome.

1:09:30- Iya, kalau sebelumnya kan jadi satu antara Chrome sama Edge. - Jadi dulu kan Chrome, Safari, Firefox, sekarang ada Edge.

1:09:40Contohnya kan gak ada kan, ada Brave, Opera, Arc, jadi kan semua di bawah Chrome.

1:09:49Sedangkan Edge berdiri sendiri, dia udah bener-bener kayak udah working, meskipun engine-nya mungkin masih tetap ada Chromium-nya,

1:09:57versi sekian, tetapi dia udah punya banyak layer untuk yang membuat dia differentiasi.

1:10:04- Betul. Kan memang tujuannya buat dioptimise ke OS-nya dia kan.

1:10:11- Tapi maksudnya berarti dia gak direct fork-nya Chromium ya. Dia kayak semacam, apalah, dia forking ke tempatnya sendiri,

1:10:21tapi kalau dia ngubah itu, dia gak merge ke upstream-nya Chromium berarti. Maksudnya dia bisa mengatakan sesuka dia kan,

1:10:30mau diapain ya terserah, tapi gak merge upstream. - Mungkin dia akan merge khusus spesifik untuk yang Windows doang.

1:10:38Untuk yang Linux mungkin dia gak optimise kan. Linux dan Mac OS mungkin dia tidak dioptimise kesana. Mungkin, gak tahu kita.

1:10:45- Alright. Ada lagi yang mau dibahas? - Ya yang tadi aja, Websocket nih,

1:10:52ada pertanyaan karena penasaran apa, yang baru-baru ini terutama sih kayak tadi Websocket, server scene event, web transport,

1:11:03pertimbangan performance-nya gimana ya? Baik dari browser, berarti kan ada event handler yang jalan terus.

1:11:12Tapi kalau event handler sih sebenarnya gak terlalu masalah ya. Tapi server-nya kan berarti harus ngebuka terus tuh.

1:11:18Itu kayak pertimbangan performance-nya, seberapa signifikan, maksudnya seberapa banyak yang harus dipikir dan dihitung,

1:11:27terutama kalau dikaitin sama ya resource dan cost, misalnya berarti hampir tanda putip gak boleh,

1:11:35atau tabu kalau misalnya kita pakai cloud service gitu kan. Gitu aja. Masa berarti tiap ada yang buka koneksi itu jalan terus gitu.

1:11:45Pertimbangannya kayak gimana ya itu? - Tapi kan Websocket ini, mungkin ya, koreksi kalau salah.

1:11:56Websocket ini dia ngirimnya kan teks dalam jumlah kecil kan, apalagi kalau kayak tadi web transport itu kan UDP-UDP lebih kecil lagi.

1:12:05Jadi dia ngirimnya gak bermega-mega, kirimnya per kilo aja. Kecil tapi sering gitu.

1:12:12- Tapi sekali koneksi terbuka dia jalan terus kan? - Iya. Dan nanti bisa dibaca yang content type event stream.

1:12:21Content type event stream itu. Websocket tuh kirim datanya, content type-nya stream.

1:12:27Jadi content type-nya ada text HTML, ada apa lagi? Gak lupa. Apa aja sih content type?

1:12:35- Application JSON. - Application JSON.

1:12:38- Oh iya. - Text HTML, MP4, something-something gitu ya.

1:12:43Multi-part, ada multi-part form data. Nah kalau Websocket itu event stream. Content type-nya.

1:12:55Ya meskipun si Websocket ini bilang ya kalau udah sekali terkoneksi abis itu gak putus-putus ya tetep bisa diputus.

1:13:03Kalau on-close ya server yang close atau client yang close bisa. Eh kita udahannya. Putus deh.

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

1:13:18Selama belum ada pernyataan putus ya dia tetep nyambung terus.

1:13:24- Nah iya berarti kalau pakai websocket bahaya juga kan? - No no no. Websocket tuh ada.

1:13:31Iya gak bisa. Kalau Websocket itu ada ping-nya juga. Ada ping-pong. Ada ping-pong ya dia si server akan nge-ping juga.

1:13:42Dia nge-ping kalau gak dibalas dia tutup. Ping-pong.

1:13:48- Nah ini bener nih. Anak dia mana udah dimaja sama Firebase kenapa harus set-up gitu.

1:13:53Masalahnya Firebase kan itu sama database. Kalau saya gak mau pakai database-nya Firebase gimana?

1:14:00Tetep mau real-time tapi gak mau pakai database Firebase. Atau service Firebase yang mungkin harganya mahal.

1:14:07- Bisa. Kayaknya FCM Firebase Cloud Messaging tuh bisa dipakai buat diintegrasiin sama kode apapun tanpa harus pakai database-nya.

1:14:19Pernah pakai soalnya di kerjaan.

1:14:23- Iya. Kalau dulu kan semudah kita bikin table di Firebase, abis itu semua klien konek ke Firebase.

1:14:31Ketika datanya berubah semuanya ikut berubah kan. Itu magic-nya si Firebase kan. Orang banyak yang suka gara-gara itu salah satunya kan.

1:14:39Ketika ada data berubah semua ke klien semua di broadcast jadi berubah gitu.

1:14:45Tapi ya masalahnya itu lagi. Firebase itu kan satu tipe database. Kalau misalkan kita udah punya database atau kita gak mau pakai dokumen database seperti Firebase,

1:14:56kita mau pakai yang lebih structure kayak relational database, ya mungkin bisa pakai FCM dan lain-lain.

1:15:04FCM itu mirip message broker. Saya gak tahu. - Belum pernah pakai message broker sayangnya.

1:15:11Kalau FCM itu Firebase Cloud Messaging. Ya itu messaging service sih. Itu spesifik banget.

1:15:18Kayak cuma buat ngirim push, push notif, push message. Itu optimize-nya buat itu.

1:15:28Kalau mau dipakai buat hal lain ya bisa-bisa aja. Cuma emang dia optimize-nya buat kirim push notif.

1:15:37Kalau gak salah, Posgill gak bisa loh sebenarnya. - Posgill dibikin apa? - Push data ke klien.

1:15:54- Gak tahu. - Gak tahu ya. - Jadi kayak ada hook-nya gitu.

1:16:01Kalau misalkan kita subscribe, kita kasih tahu ke Posgill, saya mau subscribe ke table ini ketika ada perubahan di table itu.

1:16:09- Kalau ada row baru atau apapun itu, kirim event. Dia manggil suatu webhook URL atau apa gitu?

1:16:18- Iya, protokolnya sendiri URL lewat itu. Event trigger ya. Itu kayaknya pembahasannya di luar konteks ya, agak jauh ya.

1:16:29Kalau server send event, nemu satu artikel yang enak sih nih. Kayak pembahasannya ringan banget.

1:16:38- Ini terkenal memang bagus dia bikin-bikin. - Kalau bikin posting infographic atau semacamnya, bagus.

1:16:49- Zoom in. Nah, streaming events from a server. Terus server send event itu ternyata spesifikasi tersendiri.

1:17:02Itu kalau link-nya diklik masuk ke HTML speknya. Bukan, HTML spek. Kalau iseng pengen lihat speknya. Nah, terus itu penjelasannya.

1:17:19Kalau kita simpler alternative to websocket, kalau cuma pengen server-nya aja yang kirim event. Jadi sebenarnya ini single direction ya kayaknya.

1:17:32- Maksudnya tujuan atau keunggulan utamanya streaming updates from a server. Tapi dia nggak mau polling ceritanya.

1:17:42I didn't want to be doing polling. Mau stream updates. Nah, terus itu ada contoh-contohnya.

1:17:52Ya itu contohnya semi-sudo code sih. Cuma cukup illustratif, enak. Maksudnya kalau belum paham, baca itu jadi oh gitu.

1:18:00- Nah, begini isinya. Betul. Itu tadi saya bilang event-nya, header-nya apa, payload-nya apa.

1:18:08- Oh ini. Terus connection-nya keep alive ya. - Long live connection. Nah itu tuh yang nomor 3, event stream.

1:18:20- Benar. Content-type-nya event stream. - Ini SSI ya. - Nah, terus udah lanjut scroll ke bawah. Nanti ada contoh yang buat client-side-nya, JavaScript-nya ya kayak gitu doang.

1:18:41Nama event-nya sesuai yang dikirim dari server tadi. Tapi client cannot send updates in the middle.

1:18:56So itunya unlike web sockets, jadi perbedaannya sama web sockets tuh yang ga bisa back and forth di tengah-tengah. Jadi pas dia lagi terima, sepanjang keep alive itu,

1:19:11ga bisa bolak-balik. Ga bi-directional. - Tidak bi-directional sebenarnya kan ya. - The client makes one request at the beginning, abis itu server-nya yang kirim response.

1:19:28Kayak request-response, tapi keep alive. Bener ga sih? - Iya. Kayak request di awal, abis itu sepanjang connection-nya masih alive, server bisa kirim kapanpun dan berapapun data.

1:19:44Ini tadi yang udah kita bahas selanjutnya sih, kalau connection-nya putus, dia otomatis restart. - Oh ada bug, dia ketemu bug. Gak bisa di-power or send event.

1:19:58Event were being buffered. - Bisa difix dengan settingan proxy.

1:20:07Stack overflow is amazing. Apa ini? - Oh salah, dia salah pakai HTTP 1. - Oh harusnya HTTP 2 ya?

1:20:25- Mungkin. Atau itu settingan attack-nya ya, gitu masalah dia. Cuma tadi yang di atas itu kayak simple banget penjelasannya, cuma langsung jadi kebayang, oh flow-nya kayak gitu.

1:20:39- Websocket bisa digunakan untuk WebRTC ga sih? Bisa aja, tapi WebRTC setau saya ada protokol untuk kirim datanya kan ya, protokol tersendiri kan.

1:20:51- Websocket itu client server, kalau WebRTC itu peer-to-peer, beda. - Oh iya bener, beda peruntukan ya.

1:20:59- Peer-to-peer dan bahkan ga perlu server optional kalau ga perlu pakai server.

1:21:05- Ini harus ada ini-nya, apa bahasanya, eye-server, turn, yang handshake mereka yang ngasih tau, oh si ini di IP ini, si ini di IP sini, yaudah kalian ketemu ya.

1:21:27Register-nya gitu, macongblangnya, harus ada macongblangnya. Register-nya aja sih sebenernya. Buku tamu, harus ada buku tamu, harus ada buku tamunya.

1:21:43- Buku absent. - Sip, kalau gitu, berarti sudah cukup, jangan lupa saran-sarannya. - Bener, bola berapa hasilnya, coba hasil bola.

1:21:57- Ih 2-0, Cuy menang kita, asik. - Menang, jangan lupa ya, temen-temen bisa kesana.in/ngobrolinweb untuk nanya-nanya, atau saran topik, atau pemateri, ga ada sumber.

1:22:13Jadi, terus dimatikan dulu, nanti mungkin kita akan ada episode khusus untuk membahas beberapa yang belum. Websocket adalah salah satu materi yang lumayan banyak.

1:22:29- Udah lama nyangkut di discussions-nya. - Discussions, ya. PHP sekarang bisa websocket, apa saya dong yang baru karena... - PHP, socket sudah lama, sudah bisa.

1:22:43- Laravel 11 itu bikin rapper-nya memudahkan. - Rapper-nya, ya. - Revert ya, tadi yang di-post sama di-comment di atas. - Iya, tadi ada pertanyaan ini, apa hubungannya Laravel Echo dan Pusher? Kenapa API-nya mirip?

1:23:00- Temen-temen yang pengguna Laravel mungkin bisa kasih masukan, Laravel Echo dan Pusher. - Ga pake itu sih soalnya, ga pake Echo. Laravel itu produknya banyak banget ya, itu offisial integration-nya.

1:23:16- Ada terakhir pertanyaan itu, konkurensi, websocket bisa di-thread atau process? - Bisa di-thread atau process? - Kan dia event handler ya? - Ga tau. Kenapa? - Oh, kalau di server mah ga ngerti.

1:23:30- Saya ga ngerti server, kalau di client ya event handler harus di main thread kan. Atau ditaro web worker juga bisa sih. Server-nya bikin. - Kalau thread itu biasa kalau seperti Java, itu kan kalau kita mau konkurensi kan harus pake thread.

1:23:50- Kemudian kalau process itu biasanya istilahnya mirip seperti thread, tapi lebih ringan kalau di Erlang, Elixir dan mungkin Go Routine ya.

1:24:08- Itu kan konsepnya supaya bisa multi-threading kan, maksudnya biar bisa parallel kan, makanya namanya multi-threading. Kalau Java itu kan agak berat, makanya sekarang bahasa-bahasa yang modern itu sebutnya process, itu lebih ringan katanya gitu.

1:24:26Cuman bagusnya websocket jalan di thread atau di process ya tergantung bahasa pemogramannya. Kalau di Java mungkin ga bisa pake process kan. Harus bikin thread kan. Ga tau juga sih.

1:24:40- Ga tau. Belum pernah sampai sedalam itu. - Kita hanya pengguna, menggunakan.

1:24:47- Cuma jadi kepikiran sih kalau di browser, bisa juga ditaro di service worker atau web worker atau semacamnya ya. Enak juga kan biar yang lungguin, maksudnya ibaratnya ngurangin kerjaan browser.

1:25:04- Selama proses yang dilakukan itu ga perlu ngubah dong ya, saya terserah. Jadi cuma kayak nge-update index DB atau local storage bisa-bisa aja.

1:25:19- Ya kan dari service worker bisa post message. Jadi maksudnya misalnya perlu ada yang di-update, ya kirim post message. Ya itu tergantung apa yang dibikin sih.

1:25:28Cuma yang jelas kalau kebutuhannya adalah biar ga lambat, ga lagging, core web vitals, INP atau semacamnya. Berarti kan itu semua event handlernya bisa dipindahin ke service worker ya.

1:25:46- Coba aja. Belum pernah coba sih. Kayaknya sih bisa. - Belum pernah coba juga. Ini juga asal. - Kalau SSI ga bisa di service worker.

1:25:58- Oh iya. Berarti problem utamanya di Websocket adalah tidak semua server mendukung ya. Kalau temen-temen deploy server sendiri, mungkin pakai PM, install, itu mungkin bisa.

1:26:16Tapi kalau yang hosted, ya itu harus dicek apakah Websocketnya mendukung. Kalau ga mendukung, mungkin bisa fallback ke SSI, server send event. Kalau server send event itu kompatibilitasnya lebih tinggi ya.

1:26:31- Karena dia pakai HTTP. - Iya. Karena itu sebenarnya. - Tapi lebih lambat ya. - Tapi lebih lambat. Ya karena dia kayak polling kan. Request response tapi keep alive.

1:26:45- Berarti web transport salah satunya solusi untuk ini ya. Karena mungkin ada server yang ga mendukung, nginx-nya juga harus ditwik supaya lebih kencang dan lebih mendukung si Websocket. Akhirnya ada web transport yang pakai HTTP tapi mungkin kecepatannya menyamai Websocket atau mungkin hampir menyamai gitu ya.

1:27:10Kita coba aja. Temen-temen bisa komen. Saya belum coba, baru belajar hari ini web transport. - Iya. Mungkin nanti beberapa bulan ke depan web transport muncul, kita bisa coba, mungkin lebih bagus atau gimana reviewnya nanti kita lihat lagi.

1:27:26- Shoutout Mas Johan tadi yang nyaranin materi web transport. Tadi kita cuma pengen bahas Websocket doang tapi disarankan coba deh web transport sama tadi server event.

1:27:40- Karena Mas Johan lagi main-main kesana kan. Web artisi, Websocket buat chatting-nya mungkin. Oh ada yang balapan. We are. Sama web transport mungkin ya itu ya.

1:28:00Ada hubungannya lah. Masih bikin aplikasi yang real-time kan. - Video call. - Video call.

1:28:11Oke untuk malam ini segitu aja. Terima kasih banyak buat semuanya yang hadir. Kita ketemu lagi minggu depan dengan topik yang berbeda. Selamat malam, selamat istirahat, bye bye.