Introduction

In this tutorial, we will be building a real-time chat application using Laravel, a popular PHP framework. The application will allow users to send private messages to each other and join group chats. We will use Laravel's built-in features, such as routing, controllers, and views, to build the application. We will also use Laravel's Eloquent ORM to interact with the database.

Step 1: Setting up the Project

To start, let's create a new Laravel project using the following command:

composer create-project --prefer-dist laravel/laravel chat-app

This will create a new directory called chat-app containing the basic structure for a Laravel project.

Step 2: Creating the Database

Next, let's create a new database for our chat application. We will use MySQL as our database management system. Create a new database called chat_app and add the following tables:

• users:
  • id (primary key)
  • name
  • email
  • password
• conversations:
  • id (primary key)
  • user_id (foreign key referencing the users table)
  • name
• messages:
  • id (primary key)
  • conversation_id (foreign key referencing the conversations table)
  • user_id (foreign key referencing the users table)
  • message
  • created_at
  • updated_at

Step 3: Configuring the Database

In the config/database.php file, update the database and username settings to match your database configuration.

Step 4: Creating the User Model

In the app/Models directory, create a new file called User.php. This file will contain the User model, which will be used to interact with the users table.

// app/Models/User.php

namespace AppModels;

use IlluminateDatabaseEloquentModel;
use IlluminateSupportFacadesHash;

class User extends Model
{
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    protected $hidden = [
        'password',
        'remember_token',
    ];

    public function setPasswordAttribute($value)
    {
        $this->attributes['password'] = Hash::make($value);
    }
}

Step 5: Creating the Conversation Model

In the app/Models directory, create a new file called Conversation.php. This file will contain the Conversation model, which will be used to interact with the conversations table.

// app/Models/Conversation.php

namespace AppModels;

use IlluminateDatabaseEloquentModel;
use IlluminateSupportFacadesAuth;

class Conversation extends Model
{
    protected $fillable = [
        'user_id',
        'name',
    ];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function messages()
    {
        return $this->hasMany(Message::class);
    }
}

Step 6: Creating the Message Model

In the app/Models directory, create a new file called Message.php. This file will contain the Message model, which will be used to interact with the messages table.

// app/Models/Message.php

namespace AppModels;

use IlluminateDatabaseEloquentModel;

class Message extends Model
{
    protected $fillable = [
        'conversation_id',
        'user_id',
        'message',
    ];

    public function conversation()
    {
        return $this->belongsTo(Conversation::class);
    }

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Step 7: Creating the Controllers

In the app/Http/Controllers directory, create a new file called ConversationController.php. This file will contain the Conversation controller, which will handle requests related to conversations.

// app/Http/Controllers/ConversationController.php

namespace AppHttpControllers;

use AppModelsConversation;
use IlluminateHttpRequest;
use IlluminateSupportFacadesAuth;

class ConversationController extends Controller
{
    public function index()
    {
        $conversations = Conversation::where('user_id', Auth::id())->get();
        return view('conversations.index', compact('conversations'));
    }

    public function create()
    {
        return view('conversations.create');
    }

    public function store(Request $request)
    {
        $conversation = new Conversation();
        $conversation->user_id = Auth::id();
        $conversation->name = $request->input('name');
        $conversation->save();
        return redirect()->route('conversations.index');
    }

    public function show(Conversation $conversation)
    {
        return view('conversations.show', compact('conversation'));
    }

    public function messages(Conversation $conversation)
    {
        $messages = $conversation->messages()->orderBy('created_at', 'asc')->get();
        return view('conversations.messages', compact('conversation', 'messages'));
    }

    public function sendMessage(Request $request, Conversation $conversation)
    {
        $message = new Message();
        $message->conversation_id = $conversation->id;
        $message->user_id = Auth::id();
        $message->message = $request->input('message');
        $message->save();
        return redirect()->route('conversations.messages', $conversation);
    }
}

Step 8: Creating the Views

In the resources/views directory, create a new directory called conversations. Inside the conversations directory, create the following files:

• index.blade.php:

  
  <!-- resources/views/conversations/index.blade.php -->

Conversations

@foreach($conversations as $conversation)
• {{ $conversation->name }}
@endforeach

Create a new conversation

* `create.blade.php`:
```php
<!-- resources/views/conversations/create.blade.php -->

<h1>Create a new conversation</h1>

<form method="POST" action="{{ route('conversations.store') }}">
    @csrf
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">Create</button>
</form>

• show.blade.php:

  
  <!-- resources/views/conversations/show.blade.php -->

{{ $conversation->name }}

@foreach($conversation->messages as $message)
• {{ $message->message }} ({{ $message->user->name }})
@endforeach

* `messages.blade.php`:
```php
<!-- resources/views/conversations/messages.blade.php -->

<h1>Messages</h1>

<ul>
    @foreach($messages as $message)
        <li>
            {{ $message->message }} ({{ $message->user->name }})
        </li>
    @endforeach
</ul>

<form method="POST" action="{{ route('conversations.sendMessage', $conversation) }}">
    @csrf
    <label for="message">Message:</label>
    <input type="text" id="message" name="message" required>
    <button type="submit">Send</button>
</form>

Step 9: Creating the Routes

In the routes/web.php file, add the following routes:

// routes/web.php

Route::get('/conversations', 'ConversationController@index');
Route::get('/conversations/create', 'ConversationController@create');
Route::post('/conversations', 'ConversationController@store');
Route::get('/conversations/{conversation}', 'ConversationController@show');
Route::get('/conversations/{conversation}/messages', 'ConversationController@messages');
Route::post('/conversations/{conversation}/messages', 'ConversationController@sendMessage');

Step 10: Running the Application

Start the Laravel development server by running the following command:

php artisan serve

Open a web browser and navigate to http://localhost:8000/conversations. You should see a list of conversations. Click on a conversation to view its messages and send a new message.

That's it! You have now built a real-time chat application using Laravel.