💬 Chatty

Real-time WebSocket-based Chat Application

Overview

Chatty is a lightweight real-time chat platform built with Express and WebSocket (ws). It implements real-time bidirectional communication with minimal dependencies and provides an extensible architecture for future enterprise-grade collaboration tools.

Core Values

• Real-time: Low-latency messaging with WebSocket
• Scalability: Modular structure for easy feature additions
• Simplicity: Minimal external framework dependencies
• Productivity: Fast prototyping and deployment

Installation & Setup

Requirements

• Node.js 14.x or higher
• pnpm 6.x or higher

Installation

# Install pnpm if not already installed
npm install -g pnpm

# Install project dependencies
pnpm install

Running Development Server

pnpm start

The server runs on http://localhost:3001 by default. You can change the port using the PORT environment variable.

PORT=3000 pnpm start

Architecture

Directory Structure

simple-chat/
├── server/
│   ├── index.js          # Express + WebSocket server
│   ├── roomManager.js    # Room management logic
│   ├── messageModel.js   # SQLite message persistence
│   └── messages.db       # SQLite database file (auto-generated)
├── public/
│   ├── index.html        # Client UI
│   ├── styles.css        # Stylesheets
│   └── app.js            # Client logic
├── .github/
│   └── ISSUE_TEMPLATE/   # Issue templates
├── .agent/
│   └── rules/
│       └── code-style-guide.md
├── LICENSE               # MIT License
└── package.json

Tech Stack

Backend

• Express 5.2.1 - HTTP server
• ws 8.18.3 - WebSocket server
• better-sqlite3 11.10.0 - SQLite database for message persistence
• Node.js - Runtime environment

Frontend

• Vanilla JavaScript
• CSS3 - Modern styling (Grid, Flexbox, Animations)
• WebSocket API - Real-time communication

Development Tools

• pnpm - Fast and efficient package manager

Features

Current Implementation (v1.2) 🆕

1. Message Persistence ✨

   • SQLite database integration
   • Automatic message saving on send
   • Message history retrieval on room join
   • Pagination support (50 messages per load)
   • Infinite scroll for loading older messages
   • Offline message synchronization
   • LocalStorage-based timestamp tracking

2. Multi-Room Chat System

   • Create custom chat rooms
   • Join and switch between rooms
   • Room list with user counts
   • General room auto-created on server start
   • Room-based message isolation

3. User Management

   • Nickname-based authentication
   • Duplicate nickname prevention
   • Real-time user list per room

4. Messaging

   • Real-time message send/receive
   • Room-based broadcasting
   • Timestamp display
   • XSS prevention (HTML escaping)

5. User Experience

   • Responsive design (Mobile/Desktop)
   • Room creation modal
   • Active room highlighting
   • Enter key support
   • Auto-scroll
   • Join/Leave notifications
   • Error handling and user feedback

Deployment

Render

This application is optimized for deployment on Render.

1. Push your code to GitHub
2. Connect your repository to Render
3. Configure:
   • Build Command: pnpm install
   • Start Command: pnpm start
4. Deploy

For detailed deployment instructions, see Render Deployment Guide.

Development

Code Style

See Code Style Guide for detailed coding conventions.

Key Rules

• Package manager: pnpm required
• Indentation: 2 spaces
• Variables: const preferred, let when needed
• Naming: camelCase (functions/variables), PascalCase (classes)
• Error handling: Explicit try-catch

Testing

# Start development server
pnpm start

# Test with multiple browser tabs
# http://localhost:3001

License

MIT License - see LICENSE file for details

Contributing

Issues and PRs are welcome. Please check the Code Style Guide before contributing.

---

Chatty - An extensible chat platform for real-time collaboration