ساخت یک برنامه چت بلادرنگ با استفاده از Laravel Reverb و Vue

> composer create-project laravel/laravel:^11.0 laravel_chat_demo

 > php artisan serve

 > php artisan make:model -m Message

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Message extends Model
{
    use HasFactory;

    public $table = 'messages';
    protected $fillable = ['id', 'user_id', 'text'];

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

    public function getTimeAttribute(): string
    {
        return date(
            "d M Y, H:i:s",
            strtotime($this->attributes['created_at'])
        );
    }
}

 > php artisan make:migration create_message_table

 

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration {
    public function up(): void {
        Schema::create('messages', function (Blueprint $table) {
            $table->id();
            $table->timestamps();

            $table->foreignId('user_id')->constrained();
            $table->text('text')->nullable();
        });
    }

    public function down(): void {
        Schema::dropIfExists('messages');
    }
};

 > php artisan migrate:fresh

 > composer require laravel/ui

 > php artisan ui vue --auth

 > npm install

 > npm run dev

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;

Route::get("https://dev.to/", function () { return view('welcome'); });

Auth::routes();

Route::get('/home', [HomeController::class, 'index'])
    ->name('home');
Route::get('/messages', [HomeController::class, 'messages'])
    ->name('messages');
Route::post('/message', [HomeController::class, 'message'])
    ->name('message');

namespace App\Http\Controllers;

use App\Jobs\SendMessage;
use App\Models\Message;
use App\Models\User;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function index()
    {
        $user = User::where('id', auth()->id())->select([
            'id',
            'name',
            'email',
        ])->first();

        return view('home', [
            'user' => $user,
        ]);
    }

    public function messages(): JsonResponse
    {
        $messages = Message::with('user')->get()->append('time');

        return response()->json($messages);
    }

    public function message(Request $request): JsonResponse
    {
        $message = Message::create([
            'user_id' => auth()->id(),
            'text' => $request->get('text'),
        ]);
        SendMessage::dispatch($message);

        return response()->json([
            'success' => true,
            'message' => "Message created and job dispatched.",
        ]);
    }
}

 > php artisan make:event GotMessage

namespace App\Events;

use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class GotMessage implements ShouldBroadcast {
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct() {
    }

    public function broadcastOn() {
        return  new PrivateChannel("channel_for_everyone");
    }
}

 > php artisan make:job SendMessage

namespace App\Jobs;

use App\Events\GotMessage;
use App\Models\Message;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;

class SendMessage implements ShouldQueue {
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    public function __construct(public Message $message) {
        //
    }

    public function handle(): void {
        GotMessage::dispatch([
            'id' => $this->message->id,
            'user_id' => $this->message->user_id,
            'text' => $this->message->text,
            'time' => $this->message->time,
        ]);
    }
}

 > php artisan install:broadcasting

Broadcast::channel('channel_for_everyone', function ($user) {
    return true;
});

> npm install vue vue-router @vitejs/plugin-vue```
{% endraw %}


Now we can focus on three files to integrate a Vue template in Laravel. The first one is {% raw %}`resources/js/app.js`{% endraw %}, which will instantiate the Vue component that contains our app:
{% raw %}


```javascript 
import './bootstrap';
import App from './App.vue'
import { createApp } from 'vue';

const app = createApp({});

app.component('app', App);

app.mount("#app");

<script setup>
const props = defineProps({
    isAuth: {
        type: Boolean,
        default: false
    },
    user: {
        type: [Object, Array],
        required: false
    }
})
</script>
<template>
    <h1>Hello, {{ user.name }}</h1>
</template>