Skip to main content
Watch N Chill includes a real-time chat system that lets participants communicate during watch parties. Messages are delivered instantly via WebSockets and persist in Redis for late joiners.

​
Chat Interface

The chat system appears in the room sidebar and includes:

Message List

Displays up to 20 most recent messages with sender names and timestamps

Typing Indicators

Shows who’s currently typing in real-time

Message Input

Text input field for composing messages

Auto-Scroll

Automatically scrolls to newest messages

​
Sending Messages

Sending messages is simple and works for both hosts and guests:
1

Type Message

Click in the chat input field at the bottom of the chat panel and start typing your message.
2

Typing Indicator Activates

As you type, other participants see “[Your Name] is typing…” below the messages.
The typing indicator disappears after 1 second of inactivity or when you clear the input.
3

Send Message

Press Enter or click the send button. Your message is instantly broadcast to all participants.
4

Message Appears

Your message appears in the chat for everyone, including yourself, with your name and timestamp.

​
Message Format

Each message includes:
  • Sender Name: Display name of the user who sent it
  • Message Content: The actual text (trimmed of whitespace)
  • Timestamp: When the message was sent
  • User Identification: Messages you sent are visually distinct
interface ChatMessage {
  id: string;           // Unique UUID for the message
  userId: string;       // ID of the sender
  userName: string;     // Display name of sender
  message: string;      // Message content (trimmed)
  timestamp: Date;      // When message was sent
  roomId: string;       // Which room it belongs to
  isRead: boolean;      // Whether current user has read it
}

​
Typing Indicators

Typing indicators show real-time awareness of who’s composing messages:

​
How They Work

1

Start Typing

When you type in the input field, a typing-start event is broadcast to all other participants.
2

Display Indicator

Other users see “[Your Name] is typing…” at the bottom of the chat.
3

Inactivity Timer

If you stop typing for 1 second, a typing-stop event is sent automatically.
4

Clear on Send

When you send a message, the typing indicator immediately clears.

​
Multiple Typers

When multiple people type simultaneously:
  • Each person’s indicator is shown separately
  • Format: “Alice is typing…”, “Bob is typing…”
  • Indicators auto-remove after timeout
Typing indicators help create a more natural conversation flow, similar to messaging apps like Slack or Discord.

​
Message History

Chat messages are persisted in Redis for continuity:

​
Storage

Messages are stored in a Redis list with the key pattern:
chat:{roomId}
  • Uses LPUSH to add new messages to the front
  • Uses LTRIM to keep only the last 20 messages
  • Auto-expires after 24 hours (matches room TTL)
When joining a room, the system:
  1. Fetches the last 20 messages from Redis
  2. Converts timestamp strings back to Date objects
  3. Reverses the list to chronological order
  4. Displays them in the chat panel

​
Message Limit

20 Message LimitOnly the most recent 20 messages are kept. Older messages are automatically discarded. This prevents Redis memory bloat and keeps chat focused on recent conversation.

​
Late Joiners

When you join a room that already has conversation history:
  1. Load History: Previous messages (up to 20) load immediately
  2. Context: You can see what’s been discussed before you arrived
  3. Real-Time Updates: New messages appear instantly as they’re sent
You cannot retrieve messages older than the last 20, even if they existed before the trim operation.

​
Chat Persistence

Chat data persists alongside the room:

​
Lifespan

  • Duration: 24 hours from last message
  • Tied to Room: When room expires, chat history is deleted
  • No Export: Chat history cannot be exported or saved

​
Deletion Scenarios

Room Expires

After 24 hours, the room and all messages auto-delete from Redis.

Room Closes

When all hosts leave, the room closes and chat history is immediately deleted.

​
Message Delivery

Messages are delivered via WebSocket events:

​
Event Flow

1

Client Sends

Your client emits a send-message event with the room ID and message content.
2

Server Validates

The server validates:
  • User is authenticated (has userId and userName)
  • Message content exists and is not empty (after trimming)
  • Room exists
3

Server Stores

Message is saved to Redis with a unique UUID and timestamp.
4

Broadcast

Server broadcasts new-message event to all participants in the room.
5

Clients Render

All clients receive the message and add it to their chat display.
Outgoing (Client → Server):
  • send-message: Send a new message
  • typing-start: Notify others you’re typing
  • typing-stop: Notify others you stopped typing
Incoming (Server → Client):
  • new-message: Receive a new message
  • user-typing: Someone started typing
  • user-stopped-typing: Someone stopped typing

​
Read Status

Messages have a basic read status system:
  • Your Messages: Automatically marked as read
  • Others’ Messages: Initially marked as unread
  • Overlay Mode: Unread count shows in minimized chat badge
  • Mark as Read: Opening the chat marks all messages as read
Read status is client-side only and not persisted. If you refresh, all messages appear as read.

​
Auto-Scroll Behavior

The chat panel automatically scrolls to show new content:

​
Scroll Triggers

New Message

Scrolls to bottom when a new message arrives (smooth scroll)

Typing Indicator

Scrolls to show typing indicator when someone starts typing

Manual Scroll

You can manually scroll up to read history

Scroll Restoration

New messages trigger scroll even if you were reading history
The smooth scroll animation provides a polished user experience without being jarring.

​
Chat Modes

Watch N Chill supports two chat display modes:

​
Best Practices

Keep It Relevant

Chat about the video you’re watching together.

Use Timestamps

Reference video timestamps when discussing specific moments.

Be Respectful

Remember real people are behind each message.

No Spam

Avoid sending too many messages rapidly.

​
Limitations

Current Chat Limitations
  • No message editing
  • No message deletion
  • No emoji picker (can paste emojis)
  • No file/image sharing
  • No @mentions or notifications
  • No private messages
  • No moderation tools (kick, mute)
  • 20 message history limit

​
Troubleshooting

​
Messages Not Sending

“Not authenticated” error:
  • Your session may have expired
  • Try refreshing the page
  • Ensure you properly joined the room

​
Not Seeing Messages

Messages from others don’t appear:
  • Check your internet connection
  • WebSocket might be disconnected
  • Refresh the page to reconnect

​
Typing Indicator Stuck

Indicator doesn’t disappear:
  • Other user’s connection may have dropped
  • Indicators auto-clear after timeout
  • No action needed on your part

​
Can’t Scroll Chat

Chat panel won’t scroll:
  • May be a rendering issue
  • Try resizing your browser window
  • Refresh the page if problem persists

Build docs developers (and LLMs) love

Get started for freeTalk to us