Final Project

Mini Multiplexed Chat

One WebSocket carries chat, presence, and file chunks as labeled frames.

What you are building

This project turns the whole course into a tiny working system: one WebSocket connection carries three logical app channels.

Project channels
Channel What it carries Why it exists
chat User chat text Normal app messages.
presence online Small status update that should not need a second socket.
file Fake file chunks Bulk data that demonstrates chunking.

The WebSocket is the shared road. Each JSON frame has a channel label and sequence number. The browser demultiplexes incoming frames into separate channel displays.

What the demo does

  1. Connect: browser opens one WebSocket to ws://localhost:8765.
  2. Encode: a chat, presence, or file message is split into frames.
  3. Send: frames travel over the same WebSocket.
  4. Broadcast: the teaching server sends each frame to every connected browser.
  5. Demux: each browser reads channel and sequence, then rebuilds channel messages. 
{ "channel": "chat", "messageId": "chat-1", "sequence": 0, "total": 2, "data": "hell" }
{ "channel": "presence", "messageId": "presence-2", "sequence": 0, "total": 2, "data": "onli" }
{ "channel": "file", "messageId": "file-3", "sequence": 0, "total": 2, "data": "ABCD" }

Teaching demo, not production server

This project intentionally uses a tiny WebSocket server so the multiplexing protocol stays visible. Do not expose it to the internet. Production systems need full WebSocket frame handling, origin checks, authentication, TLS, rate limits, backpressure, ping/pong, and robust close/error handling.

Run it

node project/mini-ws-server.mjs
npx serve .

Open project/mini-ws-chat.html from the served site in two browser windows. Messages in each channel share one socket.

Controls

Disconnected
Disconnected.

Channels

Raw frames on one socket

No frames yet.

Demultiplexed channels

Channel messages rebuilt from frames
Channel Progress Missing Message
chat 0/0 —
presence 0/0 —
file 0/0 —

Read these in order. The protocol module is the reusable idea. The browser page shows UI and demultiplexing. The server is intentionally tiny and teaching-only.

Try these experiments

Back to course home