relay.local
Full-StackReal-Time
Real-Time Chat Application
A WebSocket chat server with a server-rendered Handlebars front end.
- Raw
- WebSockets
- Multi-client
- messaging
Web app screen: Design crit, with Open thread on a phone. 1 of 3
relay.local
#
design-crit
4 online · 12 members · 1,284 messages
socket open/14 ms/8 clients
Today
PR
Priya Raman
11:42
morning! dropped the new spacing tokens into the branch — everything sits on a 4px base now.
the old 6px rhythm was fighting the type scale at smaller sizes, you could see it in the sidebar gutters.
RS
Ravi Shankar
11:44
nice. the 4px base makes the message list breathe a lot more — @Priya did you also touch the avatar gutter?
🔥 3🙌 1
You
11:47
pulling it now. does this change the bubble radius too, or just spacing?
MO
Maya Okonkwo
11:55
heads up — presence events are batching on reconnect.
ws.readyState === 1 fires late, so the green dots lag ~400ms. patch in a bit.👀 2
Priya is typing…
Message #design-crit
↵ send · ⇧↵ newline · typing broadcasts over ws
#
design-crit
socket open/14 ms8 clients
Today
PR
Priya Raman
11:42
morning! dropped the new spacing tokens into the branch — everything sits on a 4px base now.
the old 6px rhythm was fighting the type scale at smaller sizes.
RS
Ravi Shankar
11:44
nice. the 4px base makes the list breathe a lot more — did you touch the avatar gutter too?
🔥 3🙌 1
You
11:47
pulling it now. does this change the bubble radius too?
MO
Maya Okonkwo
11:55
heads up — presence events batch on reconnect.
ws.readyState fires late, so the dots lag ~400ms.👀 2
Priya is typing…
Message #design-crit
Problem
A standalone messaging module built to learn raw WebSocket handling without a framework like Socket.IO.
I wanted the full socket lifecycle in view: connect, broadcast, reconnect, and presence. A wrapper library would have hidden the parts I was trying to learn.
Solution
Built the chat server and front end independently.
- Built a WebSocket-based chat server in Node.js with a Handlebars-rendered front end.
- Used Moment.js to format and display message timestamps.
Mobile surfaces
The Handlebars UI scales down to a phone-width layout. Inbox, rooms, and DMs share one WebSocket connection, so unread counts and typing state stay aligned across views.
- RelaySearch messages, people…AllUnreadRoomsDMsTODAYEARLIERsocket open/14 ms
Phone screen: Conversation list stays in sync with the socket feed
- MOMaya Okonkwosocket open/14 ms8 clientsTodayMOMaya Okonkwo11:41can you sanity-check the reconnect handler before I merge? staging looks fine but I want another pair of eyes on the close code path.You11:43on it. I will run through a tab refresh and a hard network drop.MOMaya Okonkwo11:58ok — patch is up, reconnecting nowMessage Maya
Phone screen: Direct messages on the same WebSocket session
Stack
- Node.js
- WebSockets
- JavaScript
- Handlebars
- Moment.js
Outcomes
- Raw
- WebSockets
- Multi-client
- messaging
- Working real-time messaging between multiple connected clients over raw WebSockets, with no framework abstraction between the socket layer and the app.