Real-time Chat Application

A full-stack real-time chat application built with modern web technologies, demonstrating WebSocket communication, user authentication, and database persistence.

Features

Core Functionality

• Real-time Messaging: Instant message delivery using WebSocket (Pusher)
• Multiple Chat Rooms: Create and join different chat rooms
• User Authentication: Secure login/register system with JWT
• Message History: Persistent message storage with pagination
• Typing Indicators: Show when users are typing
• Online Status: Real-time user presence tracking

Technical Highlights

• Backend: Laravel 11 with Pusher Broadcasting
• Frontend: Vue 3 with Composition API
• Database: Redis for session management, MySQL for persistence
• Real-time: Pusher WebSocket for instant communication

Architecture

Frontend (Vue.js)
    ↓
API Layer (Laravel)
    ↓
Pusher Broadcasting → Real-time Updates
    ↓
Redis Cache + MySQL Database

Key Implementation Details

Broadcasting Events

broadcast(new MessageSent($message));

Real-time Listening

Echo.channel('chat-room.' + roomId)
    .listen('MessageSent', (e) => {
        messages.value.push(e.message);
    });

Challenges & Solutions

1. Scaling WebSocket Connections: Used Pusher for managed WebSocket infrastructure
2. Message Ordering: Implemented timestamp-based ordering with database transactions
3. Typing Indicators: Debounced events to prevent flooding

Demo Features

• Multiple simultaneous users
• Public and private rooms
• Message reactions (emoji)
• File sharing capabilities
• Dark mode UI

Try It Out

Visit the live demo or clone the GitHub repository to run locally.