Learn WebSocket - Modern Alternatives & Future of Real-Time

#Introduction

WebSocket has served the real-time web since 2011, but the internet does not stop. HTTP/3 removes head-of-line blocking, QUIC brings streams that do not need TCP, and WebTransport combines the ease of HTTP with the power of UDP. As an engineer, you need to know when the new thing is genuinely better.

Episode 32 covers modern alternatives & the future of real-time: HTTP/3 and QUIC, WebTransport, gRPC streaming, GraphQL subscriptions, and edge computing. This is a map for architecture decisions years ahead.

#HTTP/3 and QUIC

#Beyond TCP

QUIC is a transport protocol over UDP with big advantages for real-time.

Transport comparison

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

Head-of-line blocking means one lost packet stalls every stream on that TCP connection. QUIC gives each stream independence: a lost packet in stream A does not delay stream B. For applications sending many data types at once, this is felt for real.

#Migrating from WebSocket

WebSocket runs over HTTP/2 and HTTP/3 without code changes — the browser handles the transport upgrade transparently. But head-of-line blocking for a WebSocket connection still exists while it runs over TCP. For extreme latency needs, WebTransport is the answer.

#WebTransport

#Streams and Datagrams

WebTransport is a browser API that uses QUIC: bidirectional streams, unidirectional streams, and datagrams.

Opening a WebTransport connection

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() opens a two-way stream separate from other streams. Datagrams offer an unordered mode perfect for data that can be late — ideal for video and telemetry.

#When to Use WebTransport

WebTransport shines for: games needing prioritized streams, media streaming with datagrams, and applications with many parallel streams. Browser support is still growing, and for most applications WebSocket remains simpler and more widely supported.

#gRPC Streaming

#Three Streaming Modes

gRPC offers four communication models, three of which are streaming.

gRPC streaming models

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

gRPC streaming uses protobuf (episode 10), producing small, typed payloads. Its strength: the service definition in a .proto file becomes an automatic contract between server and client in any language.

#gRPC vs WebSocket

gRPC excels at server-to-server and service-to-service communication: typed, efficient, and with broad language support. WebSocket excels at direct browser-to-server: no special proxy needed, supported by every browser, and easier for chat and notifications.

#GraphQL Subscriptions

#Real-Time over WebSocket

GraphQL subscriptions use WebSocket as the transport, then filter the data at the GraphQL layer.

GraphQL subscription

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

A client subscribes with a query requesting specific fields. The GraphQL server sends only the requested fields when the event happens — unlike raw WebSocket, which sends the whole payload. The advantage is field selection; the price paid is the complexity of an extra layer.

#Edge Computing

#Cloudflare Workers and Durable Objects

Edge computing brings WebSocket close to the user — in hundreds of locations, not a single region.

WebSocket in a 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,
    });
  },
};

The Worker accepts the WebSocket handshake at the edge and opens a direct connection to the user. Durable Objects store persistent state at the location nearest the user — for global chat, this drops latency from hundreds to tens of milliseconds.

#Edge Considerations

The edge excels at global latency and scaling without worrying about regions, but state across locations needs careful synchronization. For applications with widely spread users, combining edge WebSocket and Redis is a realistic future architecture.

#Closing

Episode 32 closed the future view: QUIC frees streams from TCP, WebTransport harnesses UDP for extreme latency, gRPC and GraphQL add structure on top of real-time, and the edge brings the server closer to the user. WebSocket is not dead — it is the foundation that technologies above it build upon.

Key takeaways:

QUIC removes head-of-line blocking with independent streams.
WebTransport offers streams and datagrams over QUIC.
gRPC streaming is strong for service-to-service with protobuf.
GraphQL subscriptions use WebSocket, then filter fields.
Edge computing brings WebSocket closer to global users.
WebSocket remains the most universal for browser-to-server.

In episode 33, the final episode, we bring everything together: production checklist & best practices — pre-deploy checklist, operational best practices, performance baselines, common pitfalls, and debugging in production.