💬 Laravel Socket.IO Real-time Chat Application

A stunning WhatsApp-like real-time chat application built with Laravel and Socket.IO

🚀 Quick Start • 📱 Features • 🛠 Installation • 💻 Usage • 🔧 Troubleshooting

📸 Screenshots

🏠 Dashboard Home Screen

💬 Chat Room Interface

🌟 What is this?

This is a real-time chat application that brings the power of modern messaging to your Laravel application! Think WhatsApp, but built with cutting-edge web technologies. It features instant messaging, online status tracking, typing indicators, and message delivery receipts - all wrapped in a beautiful, responsive interface.

🎯 Perfect for:

Learning real-time web development
Building chat features for your apps
Understanding WebSocket communication
Creating modern messaging interfaces

✨ Features

🚀 Real-time Magic

⚡ Instant messaging - Messages appear instantly
👀 Typing indicators - See when someone is typing
🟢 Online status - Know who's online/offline
✅ Message receipts - Track delivery and read status
🔄 Auto-reconnection - Never lose connection

💬 WhatsApp-like Experience

🎨 Beautiful UI - Clean, modern design
💭 Message bubbles - Sent/received message styling
📱 Mobile responsive - Works on all devices
⏰ Timestamps - See when messages were sent
🔢 Unread counts - Badge notifications

🔐 Security & Performance

🛡️ Laravel Sanctum - Secure API authentication
🔒 Token-based auth - Modern authentication
🗄️ MySQL database - Reliable data storage
⚡ Optimized queries - Fast performance

🛠 Technology Stack

Backend	Real-time	Frontend	Database
🐘 Laravel 12.x 🔧 PHP 8.2+ 🔐 Laravel Sanctum	⚡ Socket.IO 4.8.1 🟢 Node.js 🌐 WebSockets	🎨 Bootstrap 5 ⚡ JavaScript ES6+ 📱 jQuery 3.7.1	🗄️ MySQL 5.7+ 📊 Optimized indexes 🔄 Real-time sync

🚀 Quick Start

⚡ Super Quick Setup (5 minutes!)

# 1️⃣ Clone and setup
git clone <your-repo-url>
cd laravel-socket.io

# 2️⃣ Install everything
composer install && npm install

# 3️⃣ Configure environment
cp .env.example .env
php artisan key:generate

# 4️⃣ Setup database (create MySQL database first)
php artisan migrate

# 5️⃣ Start both servers (2 terminals)
# Terminal 1:
php artisan serve --host=127.0.0.1 --port=8080

# Terminal 2:
node socket.js

# 6️⃣ Open browser
# Go to: http://127.0.0.1:8080

🎉 That's it! You're ready to chat!

📋 Prerequisites

Before we begin, make sure you have these installed:

✅ Required Software

Software	Version	Download Link
🐘 PHP	8.2+	php.net
📦 Composer	Latest	getcomposer.org
🟢 Node.js	16+	nodejs.org
🗄️ MySQL	5.7+	mysql.com
🔧 Git	Latest	git-scm.com

🖥️ System Requirements

RAM: 2GB minimum (4GB recommended)
Storage: 1GB free space
OS: Windows 10+, macOS 10.14+, or Linux

🛠 Installation

Step 1: 📥 Clone the Repository

# Clone the project
git clone <your-repository-url>
cd laravel-socket.io

# Or if you already have it locally
cd C:\Users\Subhash\Documents\GitHub\laravel-socket.io

Step 2: 📦 Install Dependencies

# Install PHP packages
composer install

# Install Node.js packages
npm install

What this installs:

🐘 Laravel Framework & Sanctum
⚡ Socket.IO & Express.js
🎨 Bootstrap & jQuery
🔧 Build tools (Vite)

Step 3: ⚙️ Environment Configuration

# Copy environment file
cp .env.example .env

# Generate application key
php artisan key:generate

Edit your .env file:

APP_NAME="Laravel Socket Chat"
APP_ENV=local
APP_DEBUG=true
APP_URL=http://127.0.0.1:8080

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_socket_chat
DB_USERNAME=your_username
DB_PASSWORD=your_password

Step 4: 🗄️ Database Setup

Create MySQL Database:

CREATE DATABASE laravel_socket_chat;

Run Migrations:

php artisan migrate

This creates:

👥 users table (user accounts)
💬 messages table (chat messages)
🔐 personal_access_tokens table (API auth)
📊 sessions table (user sessions)

Step 5: 🚀 Start the Servers

You need TWO terminals running:

🖥️ Terminal 1 - Laravel Server

php artisan serve --host=127.0.0.1 --port=8080

Expected output:

Starting Laravel development server: http://127.0.0.1:8080

⚡ Terminal 2 - Socket.IO Server

node socket.js

Expected output:

Socket.IO server running on port 3000

Step 6: 🌐 Access the Application

Open your browser
Go to: http://127.0.0.1:8080
Register a new account or Login
Click "Chat" to start messaging!

💻 Usage Guide

🎯 Getting Started

1. First Time Setup

🏠 Visit the home page
📝 Click "Register" to create account
🔐 Or "Login" if you have an account

2. Accessing Chat

💬 Click "Chat" in navigation
👥 See list of all users
🖱️ Click any user to start conversation

3. Sending Messages

✍️ Type your message
⏎ Press Enter or click Send
⚡ Message appears instantly!

💬 Chat Features

📱 Message Status Indicators

Icon	Status	Meaning
⏰	Sending	Message being sent to server
✅	Delivered	Message reached recipient's device
✅✅	Read	Message has been read by recipient

🟢 Online Status

Green dot = User is online
Gray dot = User is offline
Real-time updates = Status changes instantly

⌨️ Typing Indicators

See when someone is typing
Auto-hide after 1 second of inactivity
Real-time updates via Socket.IO

📱 Mobile Experience

Responsive design works on all devices
Touch-friendly interface
Collapsible sidebar for mobile

🔧 Advanced Features

📊 Message History

All messages stored in database
Previous conversations load automatically
Messages persist between sessions

🔔 Unread Notifications

Red badges show unread count
Counts reset when opening conversation
Real-time updates for new messages

👀 Last Message Preview

See last message in each conversation
Timestamps show when sent
Updates in real-time

🔌 API Documentation

🔐 Authentication

All API endpoints require authentication via Laravel Sanctum token.

Headers Required:

Authorization: Bearer {your_api_token}
Content-Type: application/json

📡 API Endpoints

💬 Send Message

POST /api/send

Request:

{
    "to": 2,
    "message": "Hello, how are you?"
}

Response:

{
    "success": true,
    "id": 123
}

📥 Get Pending Messages

GET /api/pending

Response:

[
    {
        "id": 123,
        "from": 2,
        "from_name": "John Doe",
        "message": "Hello there!",
        "sent_at": "2024-01-15T10:30:00.000000Z"
    }
]

💭 Get Conversation

GET /api/messages?with=2

Response:

[
    {
        "id": 123,
        "from": 1,
        "from_name": "Jane Smith",
        "message": "Hello!",
        "sent_at": "2024-01-15T10:30:00.000000Z",
        "is_me": true
    }
]

✅ Mark as Delivered

POST /api/mark-delivered/123

👀 Mark as Read

POST /api/mark-read/123

📋 Get Last Message

GET /api/last-message/2

⚡ Socket.IO Events

📤 Client to Server Events

// Join user room
socket.emit('join', userId);

// Typing indicator
socket.emit('typing', {
    user_id: userId,
    user_name: userName,
    to: recipientId
});

// Stop typing
socket.emit('stop-typing', {
    user_id: userId,
    to: recipientId
});

// Message read
socket.emit('message-read', {
    message_id: messageId,
    from: senderId,
    to: recipientId
});

📥 Server to Client Events

// User came online
socket.on('online', (data) => {
    console.log('User online:', data.user_id);
});

// New message received
socket.on('new-message', (data) => {
    console.log('New message:', data);
});

// Someone is typing
socket.on('typing', (data) => {
    console.log('User typing:', data.user_name);
});

// Message was read
socket.on('message-read', (data) => {
    console.log('Message read:', data.message_id);
});

🗄️ Database Schema

👥 Users Table

CREATE TABLE users (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    api_token VARCHAR(80) UNIQUE NULL,
    created_at TIMESTAMP NULL,
    updated_at TIMESTAMP NULL
);

💬 Messages Table

CREATE TABLE messages (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    from_id BIGINT NOT NULL,
    to_id BIGINT NOT NULL,
    message TEXT NOT NULL,
    delivered BOOLEAN DEFAULT 0,
    read_at TIMESTAMP NULL,
    created_at TIMESTAMP NULL,
    updated_at TIMESTAMP NULL,
    
    FOREIGN KEY (from_id) REFERENCES users(id),
    FOREIGN KEY (to_id) REFERENCES users(id)
);

🔧 Troubleshooting

🚨 Common Issues & Solutions

1. Socket.IO Connection Failed

Problem: Browser shows connection errors Solutions:

✅ Ensure Socket.IO server is running on port 3000
✅ Check firewall settings
✅ Verify CORS configuration
✅ Check browser console for errors

2. Laravel Server Won't Start

Problem: php artisan serve fails Solutions:

✅ Check if port 8080 is in use
✅ Try different port: php artisan serve --port=8081
✅ Verify PHP version: php --version
✅ Check Laravel: php artisan --version

3. Database Connection Error

Problem: Migration fails Solutions:

✅ Verify database credentials in .env
✅ Ensure MySQL service is running
✅ Check database exists
✅ Verify user permissions

4. Messages Not Sending

Problem: Messages don't reach recipients Solutions:

✅ Check Socket.IO server logs
✅ Verify API token is valid
✅ Check network connectivity
✅ Review browser console

5. Authentication Issues

Problem: Can't login or API calls fail Solutions:

✅ Clear browser cache and cookies
✅ Check session configuration
✅ Verify Sanctum setup
✅ Regenerate API tokens

🐛 Debug Mode

Enable detailed error information:

# In .env file
APP_DEBUG=true
LOG_LEVEL=debug

Check logs:

# Laravel logs
tail -f storage/logs/laravel.log

# Socket.IO logs (in terminal where node socket.js is running)

🚀 Deployment

🌐 Production Setup

1. Environment Configuration

APP_ENV=production
APP_DEBUG=false
APP_URL=https://yourdomain.com

# Use Redis for sessions in production
SESSION_DRIVER=redis
CACHE_DRIVER=redis

2. Server Requirements

🐘 PHP 8.2+ with required extensions
🗄️ MySQL 5.7+ or MariaDB 10.3+
🟢 Node.js 16+ and NPM
🌐 Web Server: Nginx or Apache
⚙️ Process Manager: PM2 or Supervisor

3. Deployment Steps

# Install production dependencies
composer install --optimize-autoloader --no-dev
npm install --production

# Generate optimized assets
npm run build
php artisan config:cache
php artisan route:cache
php artisan view:cache

# Run migrations
php artisan migrate --force

# Start services with PM2
pm2 start socket.js --name "socket-server"
pm2 start "php artisan serve --host=0.0.0.0 --port=8000" --name "laravel-server"

🎨 Customization

🎨 Styling

Modify Bootstrap classes in templates
Add custom CSS in resources/css
Update JavaScript for UI interactions
Test on different devices

⚡ Adding Features

Create new API endpoints in MessageController
Add new Socket.IO events in socket.js
Update frontend JavaScript in chat.blade.php
Add database migrations for new tables/columns

🔧 Configuration

Socket.IO port: Modify socket.js
Laravel port: Change in php artisan serve
Database: Update .env file
CORS: Configure in socket.js

🤝 Contributing

🚀 How to Contribute

🍴 Fork the repository
🌿 Create feature branch: git checkout -b feature/amazing-feature
💾 Commit changes: git commit -m 'Add amazing feature'
📤 Push to branch: git push origin feature/amazing-feature
🔄 Open Pull Request

📋 Code Standards

Follow PSR-12 coding standards
Write meaningful commit messages
Add tests for new features
Update documentation

📚 Additional Resources

📖 Documentation

🎓 Learning Resources

Laracasts - Video tutorials
Laravel Daily - Tips and tutorials
Socket.IO Examples

💬 Community Support

📄 License

This project is open-sourced software licensed under the MIT license.

🆘 Support

Having issues? We're here to help!

🔍 Check the troubleshooting section above
🔎 Search existing issues in the repository
🆕 Create a new issue with detailed information
💬 Join the community for help and discussions

🎉 Conclusion

Congratulations! You now have a complete real-time chat application! 🎊

What you've built:

✅ Real-time messaging with Socket.IO
✅ Beautiful WhatsApp-like interface
✅ Message status tracking
✅ Online/offline status
✅ Typing indicators
✅ Mobile-responsive design
✅ Secure authentication

Next steps:

🚀 Deploy to production
🎨 Customize the design
⚡ Add new features
📱 Test on different devices

Happy coding! 🚀💻

Made with ❤️ using Laravel & Socket.IO

⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.github		.github
app		app
bootstrap		bootstrap
config		config
database		database
public		public
resources		resources
routes		routes
storage		storage
tests		tests
.env		.env
.gitignore		.gitignore
COMPLETE_GUIDE.md		COMPLETE_GUIDE.md
LICENSE		LICENSE
README.md		README.md
artisan		artisan
composer.json		composer.json
composer.lock		composer.lock
laravel-echo-server.json		laravel-echo-server.json
package-lock.json		package-lock.json
package.json		package.json
phpunit.xml		phpunit.xml
socket.js		socket.js
vite.config.js		vite.config.js

Uh oh!

License

subhashladumor1/laravel-socket.io

Folders and files

Latest commit

History

Repository files navigation

💬 Laravel Socket.IO Real-time Chat Application

📸 Screenshots

🏠 Dashboard Home Screen

💬 Chat Room Interface

🌟 What is this?

🎯 Perfect for:

✨ Features

🚀 Real-time Magic

💬 WhatsApp-like Experience

🔐 Security & Performance

🛠 Technology Stack

🚀 Quick Start

⚡ Super Quick Setup (5 minutes!)

📋 Prerequisites

✅ Required Software

🖥️ System Requirements

🛠 Installation

Step 1: 📥 Clone the Repository

Step 2: 📦 Install Dependencies

Step 3: ⚙️ Environment Configuration

Step 4: 🗄️ Database Setup

Step 5: 🚀 Start the Servers

🖥️ Terminal 1 - Laravel Server

⚡ Terminal 2 - Socket.IO Server

Step 6: 🌐 Access the Application

💻 Usage Guide

🎯 Getting Started

1. First Time Setup

2. Accessing Chat

3. Sending Messages

💬 Chat Features

📱 Message Status Indicators

🟢 Online Status

⌨️ Typing Indicators

📱 Mobile Experience

🔧 Advanced Features

📊 Message History

🔔 Unread Notifications

👀 Last Message Preview

🔌 API Documentation

🔐 Authentication

📡 API Endpoints

💬 Send Message

📥 Get Pending Messages

💭 Get Conversation

✅ Mark as Delivered

👀 Mark as Read

📋 Get Last Message

⚡ Socket.IO Events

📤 Client to Server Events

📥 Server to Client Events

🗄️ Database Schema

👥 Users Table

💬 Messages Table

🔧 Troubleshooting

🚨 Common Issues & Solutions

1. Socket.IO Connection Failed

2. Laravel Server Won't Start

3. Database Connection Error

4. Messages Not Sending

5. Authentication Issues

🐛 Debug Mode

🚀 Deployment

🌐 Production Setup

1. Environment Configuration

2. Server Requirements

3. Deployment Steps

🎨 Customization

🎨 Styling

⚡ Adding Features

🔧 Configuration

🤝 Contributing

🚀 How to Contribute

Packages