Real-Time SMS Chat App with Laravel, Pusher, Twilio, and React InertiaJS

Prerequisites

To complete this tutorial, you will need:

• PHP 8.3 (or higher)
• Node.js and NPM
• Composer installed globally
• A Pusher account (create one here)
• Basic knowledge of WebSockets
• Familiarity with the InertiaJS framework is helpful but not essential

Backend Setup

1. Scaffold a New Laravel Project

composer create-project laravel/laravel sms-chat-app
cd sms-chat-app

2. Install Laravel Breeze and Scaffold Authentication

composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev
php artisan migrate

3. Add WebSocket and Event Broadcast Support

php artisan install:frontend

Select the appropriate options when prompted. This will create channels.php and broadcasting.php, and install laravel-echo and pusher-js.

Configure Pusher

1. Install Pusher Package

composer require pusher/pusher-php-server

2. Create a New Pusher App

• Go to Pusher Dashboard
• Click Create App
• Fill in app details and click Create App
• Copy your App ID, Key, Secret, and Cluster

3. Update .env

PUSHER_APP_ID=<your_pusher_app_id>
PUSHER_APP_KEY=<your_pusher_app_key>
PUSHER_APP_SECRET=<your_pusher_app_secret>
PUSHER_APP_CLUSTER=<your_pusher_app_cluster>
BROADCAST_DRIVER=pusher

Setup Twilio

1. Install Twilio SDK

composer require twilio/sdk

2. Update .env

TWILIO_CONNECTION=default
TWILIO_NOTIFICATION_CHANNEL_CONNECTION=default
TWILIO_API_SID=<your_sid>
TWILIO_API_AUTH_TOKEN=<your_token>
TWILIO_API_FROM_NUMBER=<your_twilio_number>

Setup Models and Migrations

1. Create ChatMessages Model and Migration

php artisan make:model ChatMessages -m

Update migration:

$table->id();
$table->foreignId('sender_id')->constrained('users');
$table->foreignId('receiver_id')->constrained('users');
$table->text('text');
$table->timestamps();

Update ChatMessages.php:

protected $fillable = ['sender_id', 'receiver_id', 'text'];
public function sender() { return $this->belongsTo(User::class, 'sender_id'); }
public function receiver() { return $this->belongsTo(User::class, 'receiver_id'); }

Update create_users_table.php to add:

$table->string('phone_number')->nullable();

Run the migration:

php artisan migrate

Setup Event Broadcasting

1. Update routes/channels.php

Broadcast::channel('chat', function ($user) {
    return Auth::check();
});

2. Create and Update Event

php artisan make:event MessageSent

In MessageSent.php:

public function broadcastOn() { return new PrivateChannel('chat'); }
public function broadcastWith() { return ['message' => $this->message]; }

Create Controllers

1. ChatController

php artisan make:controller ChatController

In ChatController.php, implement logic to store messages and dispatch MessageSent event.

2. TwilioController

Implement SMS handling and store messages as well.

Twilio Webhook Setup

• Expose your local server using Ngrok or similar.
• Set the Twilio webhook to your exposed URL /sms/incoming.

Update Routes

Update routes/web.php:

Route::get('/dashboard', [ChatController::class, 'index']);
Route::get('/chat/{user}', [ChatController::class, 'show']);
Route::resource('messages', ChatController::class);

Frontend Setup

1. Create ChatBox.vue or .tsx

Implement using React + Inertia or Vue as per your stack.

2. Update resources/js/echo.js

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

3. Update Blade / Inertia Pages

Update Dashboard.tsx to list users and link to chats.
 Create Chat.tsx page to render the ChatBox component.

Test the Application

1. Start Laravel queue:

php artisan queue:listen

1. Open browser tab A and B with two users logged in.
2. Start chatting. You should see real-time messages and SMS updates.

Conclusion

You’ve built a fully functional real-time chat application with Laravel, Pusher, Twilio, and InertiaJS. This stack enables you to expand into SMS notifications, customer support chat, or real-time collaboration tools.

Next Steps:

• Add typing indicators
• Message read receipts
• File attachments

Keep building! 🚀