Belajar WebSocket - Modern Alternatives & Future of Real-Time

#Pendahuluan

WebSocket telah melayani real-time web sejak 2011, tapi internet tidak berhenti. HTTP/3 menghapus head-of-line blocking, QUIC membawa stream yang tidak perlu TCP, dan WebTransport menggabungkan kemudahan HTTP dengan kekuatan UDP. Sebagai engineer, kalian perlu tahu kapan yang baru benar-benar lebih baik.

Episode 32 membahas modern alternatives & future of real-time: HTTP/3 dan QUIC, WebTransport, gRPC streaming, GraphQL subscription, serta edge computing. Ini adalah peta untuk keputusan arsitektur beberapa tahun ke depan.

#HTTP/3 dan QUIC

#Melampaui TCP

QUIC adalah protokol transport di atas UDP dengan keunggulan besar untuk real-time.

Perbandingan transport

TCP + TLS : koneksi lambat, head-of-line blocking
QUIC      : handshake 1 RTT, stream independen, tanpa blocking

Head-of-line blocking berarti satu paket hilang menghentikan semua stream di koneksi TCP itu. QUIC memberi setiap stream kemandirian: paket hilang di stream A tidak menunda stream B. Bagi aplikasi yang mengirim banyak tipe data sekaligus, ini terasa nyata.

#Migrasi dari WebSocket

WebSocket berjalan di atas HTTP/2 dan HTTP/3 tanpa perubahan kode — browser menangani upgrade transport secara transparan. Namun head-of-line blocking untuk koneksi WebSocket tetap ada selama dijalankan di atas TCP. Untuk kebutuhan latensi ekstrem, WebTransport adalah jawabannya.

#WebTransport

#Stream dan Datagram

WebTransport adalah API browser yang memakai QUIC: stream bidirectional, stream unidirectional, dan datagram.

Membuka koneksi WebTransport

const transport = new WebTransport("https://relay.example.com/chat");
 
await transport.ready;
 
const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();
await writer.write(encodedPayload);

transport.createBidirectionalStream() membuka stream dua arah yang terpisah dari stream lain. Datagram menawarkan mode tanpa urutan yang sempurna untuk data yang boleh terlambat — ideal untuk video dan telemetri.

#Kapan Memakai WebTransport

WebTransport unggul untuk: game yang butuh stream berprioritas, streaming media dengan datagram, dan aplikasi yang banyak stream paralel. Dukungan browser masih bertumbuh, dan untuk kebanyakan aplikasi WebSocket tetap lebih sederhana dan lebih luas jangkauannya.

#gRPC Streaming

#Tiga Mode Streaming

gRPC menawarkan empat model komunikasi, tiga di antaranya streaming.

Model gRPC streaming

Server streaming   : server mengirim aliran data ke klien
Client streaming   : klien mengirim aliran data ke server
Bidirectional      : keduanya mengirim aliran sekaligus

gRPC streaming memakai protobuf (episode 10), menghasilkan payload kecil dan typed. Kekuatannya: definisi service dalam file .proto menjadi kontrak otomatis antara server dan klien di bahasa apa pun.

#gRPC vs WebSocket

gRPC unggul di server-to-server dan komunikasi service-to-service: typed, efisien, dan punya dukungan bahasa luas. WebSocket unggul di browser-to-server langsung: tidak butuh proxy khusus, didukung semua browser, dan lebih mudah untuk chat serta notifikasi.

#GraphQL Subscription

#Real-Time di atas WebSocket

GraphQL subscription memakai WebSocket sebagai transport, lalu menyaring data di layer GraphQL.

Subscription GraphQL

type Subscription {
  pesanBaru(room: ID!): Pesan
}

Klien berlangganan dengan query yang meminta field tertentu. Server GraphQL mengirim hanya field yang diminta saat event terjadi — berbeda dari WebSocket mentah yang mengirim seluruh payload. Keunggulannya seleksi field; harga yang dibayar adalah kompleksitas layer tambahan.

#Edge Computing

#Cloudflare Workers dan Durable Objects

Edge computing membawa WebSocket dekat ke pengguna — di ratusan lokasi, bukan satu region.

WebSocket di Cloudflare Worker

export default {
  async fetch(request) {
    const upgrade = request.headers.get("Upgrade");
    if (upgrade !== "websocket") {
      return new Response("harus websocket", { status: 400 });
    }
    return new Response(null, {
      status: 101,
      webSocket: new WebSocketPair().server,
    });
  },
};

Worker menerima handshake WebSocket di edge dan membuka koneksi langsung ke pengguna. Durable Objects menyimpan state persisten di lokasi terdekat pengguna — untuk chat global, ini menurunkan latensi dari ratusan menjadi puluhan milidetik.

#Pertimbangan Edge

Edge unggul untuk latensi global dan scaling tanpa khawatir region, tapi state lintas lokasi perlu disinkronkan dengan hati-hati. Untuk aplikasi yang penggunanya tersebar luas, kombinasi edge WebSocket dan Redis menjadi arsitektur masa depan yang realistis.

#Penutup

Episode 32 menutup pandangan masa depan: QUIC membebaskan stream dari TCP, WebTransport memanfaatkan UDP untuk latensi ekstrem, gRPC dan GraphQL menambah struktur di atas real-time, dan edge mendekatkan server ke pengguna. WebSocket belum mati — ia menjadi fondasi yang justru ditinggali teknologi di atasnya.

Inti yang harus dibawa pulang:

QUIC menghapus head-of-line blocking dengan stream independen.
WebTransport menawarkan stream dan datagram di atas QUIC.
gRPC streaming kuat untuk service-to-service dengan protobuf.
GraphQL subscription memakai WebSocket lalu memfilter field.
Edge computing mendekatkan WebSocket ke pengguna global.
WebSocket tetap paling universal untuk browser-to-server.

Di episode 33, episode terakhir, kita menyatukan semuanya: production checklist & best practices — checklist pra-deploy, operational best practices, baseline performa, common pitfalls, dan debugging di production.