Learning Center/Real-World Examples/Chat API
Tutorial

Build a Real-time Chat API

Create a messaging API with chat rooms, direct messages, presence indicators, and typing status. Perfect for chat applications and team collaboration tools.

What You'll Build

Chat Features

  • Real-time messaging
  • Chat rooms & channels
  • Direct messages (DMs)
  • User presence status
  • Typing indicators
  • File attachments
  • Unread counts
  • Message reactions

What You'll Learn

  • Real-time patterns
  • Message threading
  • Presence tracking
  • Read receipts
  • Channel design
  • File uploads
  • Notification logic
  • Chat UI patterns
Time Required:50-70 minutes
1

Create Chat Project

Create a new project for your chat API:

1Navigate to Dashboard
2Click "Create Project"
3Name it "Chat API"
4Description: "Real-time messaging with rooms and DMs"
2

Define Messages Schema

Create a message schema with all chat features:

json
3

Define Rooms Schema

Create chat rooms/channels with member management:

json
4

Configure Message Endpoints

GET/rooms/:roomId/messages

Get message history for a room (with pagination):

json
POST/rooms/:roomId/messages

Send a new message:

json
PATCH/messages/:id

Edit a message (within 15 minutes):

json
DELETE/messages/:id

Delete a message:

json
5

Room Management

GET/rooms

Get all rooms for current user:

json
POST/rooms

Create a new chat room:

json
POST/rooms/:id/join

Join a public room:

json
6

Presence & Typing Indicators

POST/users/me/status

Update user presence status:

json

Status Options: online, away, busy, offline

POST/rooms/:id/typing

Send typing indicator:

json

Note: Typing indicators automatically expire after 5 seconds of inactivity.

GET/rooms/:id/members/online

Get online members in a room:

json
7

Reactions & Read Receipts

POST/messages/:id/reactions

Add emoji reaction to a message:

json
POST/rooms/:id/read

Mark all messages as read in a room:

json
GET/notifications/unread

Get total unread message count:

json
8

React Chat Component

Chat Application
javascript

Real-time Chat Best Practices

Performance

  • Use pagination for message history
  • Implement message caching
  • Lazy load images/attachments
  • Debounce typing indicators

User Experience

  • Auto-scroll to new messages
  • Show visual feedback for sent messages
  • Display timestamps clearly
  • Highlight mentions and notifications

Real-time Updates

  • Use WebSocket for production
  • Implement reconnection logic
  • Handle offline state gracefully
  • Queue messages when offline

Security

  • Validate message content
  • Implement rate limiting
  • Sanitize user input
  • Verify room permissions

Congratulations! 🎉

You've built a complete real-time chat API with:

Real-time messaging system
Chat rooms & channels
Presence indicators
Typing indicators
Message reactions
Read receipts & unread counts

For production, integrate WebSocket (Socket.io, Pusher, or Ably) for true real-time updates instead of polling!

Previous: Task Management AppNext: Social Network