Interactive Walkthroughs & Packet Telemetry

WireChat in action

Explore step-by-step messaging flows, WebSocket packet payloads, CLI outputs, and SQLite database schemas.

1. User Authentication

How a new user registers, hashes passwords via argon2, and logs in securely.

01

Registering a New User

The user issues the registration command from the input box. The client validates it and pushes a registration packet.

// Inside the TUI Client input field
/register alice supersecurepassword
TUI Client - Log View
Welcome to Wire Chat! Please authenticate first: /register <username> <password> /login <username> <password> /register alice supersecurepassword
02

Network Packet Payload & Server Hashing

The server receives a register JSON packet, generates a secure argon2 hash, and saves it in the SQLite database.

Client → Server Packet
{
  "type": "register",
  "username": "alice",
  "password": "supersecurepassword"
}
Database Record (SQLite)
SELECT * FROM users;
┌──────────┬──────────────────────────────┐
│ username │ password (Argon2 Hash)       │
├──────────┼──────────────────────────────┤
│ alice    │ $argon2id$v=19$m=65536,t=3...│
└──────────┴──────────────────────────────┘
03

Logging In & Session Bind

Once registered, the user logs in. The server verifies the password, maps the user to the websocket connection, and auto-joins the user to the general chat room.

TUI Client - Authenticated State
Successfully logged in as alice! [SYSTEM] alice joined general ───────────────────────────────────────────────────────────────── User: alice | Room: general

2. Room Creation & Broadcasting

How rooms are created dynamically and how messages are broadcast in real time.

01

Creating a Custom Room

A user can spin up a custom room at runtime with an optional description using /create-room.

/create-room tech "Technical discussions and logs"
Client → Server Packet
{
  "type": "command",
  "command": "create-room",
  "name": "tech",
  "description": "Technical discussions"
}
Server Response
{
  "type": "system",
  "content": "Room 'tech' created/updated."
}
02

Joining and Switching Channels

Switching rooms leaves the previous room, joins the new one, and notifies other room members in real time.

/join tech
Server Console Log
Wire server running Connected to the SQLite database using node:sqlite. Client connected [general] Broadcast system event: alice left general [tech] Broadcast system event: alice joined tech

3. Private Direct Messaging

Sending peer-to-peer messages privately over the network.

01

Initiating a Direct Message

A user types a DM using /dm <target> <msg>. The server finds the socket connected to the target and routes the message exclusively to them.

/dm bob Hey bob, did you check the SQLite logs?
02

Packet Routing

The server intercept matches the target "bob" against the active users list and emits a private `dm` packet.

Client (Alice) → Server
{
  "type": "command",
  "command": "dm",
  "target": "bob",
  "content": "Hey bob, check logs."
}
Server → Target (Bob)
{
  "type": "dm",
  "from": "alice",
  "content": "Hey bob, check logs.",
  "timestamp": 1715901243100
}
03

TUI Presentation (Bob's Screen)

Bob receives the DM, styled in magenta to clearly distinguish it from public room messages.

TUI Client - Bob's View
[general] chalie: is anyone here? (12:04:12 PM) [DM] alice: Hey bob, check logs. (12:05:01 PM) ───────────────────────────────────────────────────────────────── User: bob | Room: general

4. Chat History Retrieval

SQLite backed persistent logs showing chronologically sorted historical messages.

01

Fetching Room History

Users who join a room or need context can pull historical messages using `/history` with a custom limit.

/history 3
02

SQLite Query & WebSocket Delivery

The server runs a SQL query on chat.db, formats the records, and replies with a history collection.

SQLite Query Executed
SELECT sender, content, timestamp 
FROM messages 
WHERE room = 'tech' 
ORDER BY timestamp DESC 
LIMIT 3;
Server Response Payload
{
  "type": "history",
  "messages": [
    {"username":"bob","content":"test"...},
    {"username":"alice","content":"hi"...}
  ]
}
03

Chronological Log Rendering

The TUI client reverses the fetched array so history prints in order (oldest to newest), flanked by gray boundary markers.

TUI Client - Chat Screen
--- Chat History --- [tech] alice: Hello technical channel! (11:58:32 AM) [tech] bob: Running some tests on the DB (11:59:12 AM) [tech] alice: Looks fast. (11:59:58 AM) --- End of History --- ───────────────────────────────────────────────────────────────── User: alice | Room: tech