Kojo.gg•14mo ago

BroadcastChannel vs EventSource vs WebSocket

Why would one uses BroadcastChannel, over EventSource, or WebSocket? Could anyone provide clear examples, advantages, and inconvenient of them? Are they all available on Deno Deploy?

4 Replies

Deno AI Helper•14mo ago

The BroadcastChannel, EventSource, and WebSocket are all different APIs that serve different purposes, and they are all available in Deno. 1. BroadcastChannel: This API is used for communication between different instances of your Deno Deploy script running in different data centers around the world. It's a simple message bus that connects the various Deploy instances worldwide. It's useful in real-time applications like chats and games. For example, you can use BroadcastChannel to build a simple chat system where messages sent in one region are received in all other regions. However, it's important to note that this API is still experimental and may change in the future.

const channel = new BroadcastChannel("my-channel");
channel.onmessage = (event) => {
  console.log(event.data);
};
channel.postMessage("Hello, world!");

const channel = new BroadcastChannel("my-channel");
channel.onmessage = (event) => {
  console.log(event.data);
};
channel.postMessage("Hello, world!");

2. EventSource (Server-Sent Events): This API is used for one-way communication from the server to the client. The server can send events to the client at any time. This is useful for applications that need real-time updates from the server, like a live news update or a real-time dashboard. Note that Deno Deploy uses HTTP/2, so Server-Sent Events do not suffer from the browsers maximum open connections limit that makes SSE over HTTP/1.1 unwise. ```javascript import { serve } from "https://deno.land/std@0.140.0/http/server.ts"; const msg = new TextEncoder().encode("data: hello\r\n\r\n"); serve(async (_) => { let timerId: number | undefined; const body = new ReadableStream({ start(controller) { timerId = setInterval(() => { controller.enqueue(msg); }, 1000); }, cancel() { if (typeof timerId === "number") { clearInterval(timerId); } }, }); return new

Deno AI Helper•14mo ago

Response(body, { headers: { "Content-Type": "text/event-stream", }, }); });

3. `WebSocket`: This API is used for full-duplex communication between the client and the server. This means that both the client and the server can send data to each other at any time. This is useful for applications that need real-time bidirectional communication, like a chat application or a multiplayer game. Deno also uses this same API for server-side (incoming) WebSocket connections on the native HTTP server.

3. `WebSocket`: This API is used for full-duplex communication between the client and the server. This means that both the client and the server can send data to each other at any time. This is useful for applications that need real-time bidirectional communication, like a chat application or a multiplayer game. Deno also uses this same API for server-side (incoming) WebSocket connections on the native HTTP server.

Helpful Links: BroadcastChannel | Deploy Docs Deno Deploy Beta 1 A list of every web API in Deno Web Streams at the Edge

ioB•14mo ago

The AI bot got it down pretty well. Feel free to ask more questions.

Fifth-Normal-Form•14mo ago

I like SSE+BC The SSE has auto-reconnect, and BC bridges all clients across isolates and regions. A very simple SSE-Chat example: https://github.com/nhrones/SSE-CHAT