آشنایی با لاراول Reverb و ایجاد چت روم با لاراول 11

در این مقاله، من شما را در فرآیند ایجاد یک برنامه چت روم real-time با استفاده از آخرین نسخه چارچوب لاراول، لاراول 11 و پکیج قدرتمند لاراول Reverb راهنمایی خواهم کرد. Laravel 11 یک راه حل قدرتمند در قالب Laravel Reverb ارائه می دهد. این پکیج نوآورانه ارتباطات WebSocket بی‌درنگ و سریع و مقیاس‌پذیر را مستقیماً به برنامه لاراول شما می‌آورد و به طور یکپارچه با مجموعه ابزارهای broadcasting رویداد موجود لاراول ادغام می‌شود. با استفاده از قدرت WebSockets و انعطاف پذیری کتابخانه Axios برای واکشی و مدیریت کارآمد داده ها، ما یک چت روم real-time ایجاد خواهیم کرد که تجربه کاربری استثنایی را ارائه می دهد.

در طول این مقاله، من شما را از طریق فرآیند گام به گام راه اندازی پروژه، پیکربندی اجزای لازم و اجرای عملکرد اصلی اتاق گفتگو راهنمایی می کنم. در پایان این سفر، درک کاملی از نحوه ساخت یک برنامه چت روم real-time خواهید داشت که کاربران شما را در زمان واقعی درگیر و متصل نگه می دارد.

لاراول Reverb چیست؟

Laravel Reverb یک سرور WebSocket شخص اول برای برنامه های لاراول است. این منبع باز است و از پروتکل Pusher استفاده می کند، و آن را به اولین انتخاب برای ارتباط real-time بین کلاینت و سرور در برنامه های لاراول تبدیل می کند.

در حالی که می توانید آن را به عنوان یک پکیج در برنامه موجود خود نصب کنید، اغلب منطقی است که یک سرور WebSocket اختصاصی برای همه برنامه های خود داشته باشید.

شروع نصب Laravel و Laravel Reverb

برای شروع، اجازه دهید ابتدا لاراول 11 را با استفاده از Composer، مدیر وابستگی PHP، نصب کنیم. ترمینال خود را باز کنید و دستور زیر را اجرا کنید:

composer global require laravel/installer
 laravel new my-chatroom-app

این یک پروژه Laravel 11 جدید با نام my-chatroom-app در دایرکتوری فعلی شما ایجاد می کند.

در مرحله بعد، پکیج Laravel Reverb را نصب می کنیم. می توانید Reverb را با استفاده از دستور install:broadcasting Artisan نصب کنید:

php artisan install:broadcasting

این دستور اجزای لازم برای Reverb را نصب و پیکربندی می‌کند و از یکپارچگی با برنامه Laravel 11 شما اطمینان می‌دهد.

راه اندازی Frontend

هنگامی که موارد بالا را نصب کردید، اجازه می‌دهید یک view برای شروع بسازید. در این پروژه از Tailwind برای استایل دادن و Axios برای ارسال درخواست ها استفاده خواهیم کرد. ما همچنین از Laravel Vite برای پکیج بندی دارایی استفاده خواهیم کرد. برای آشنایی با vite این مقاله را بررسی کنید.

Tailwind را در لاراول 11 نصب کنید
برای نصب Tailwind CSS در پروژه Laravel 11 خود، مراحل زیر را دنبال کنید:

ترمینال را باز کنید و به دایرکتوری پروژه لاراول خود بروید.
دستور زیر را برای نصب Tailwind CSS و وابستگی های همتای آن اجرا کنید:

npm install -D tailwindcss postcss autoprefixer

سپس دستور زیر را برای تولید فایل‌های tailwind.config.js و postcss.config.js اجرا کنید:

npx tailwindcss init -p

2. مسیرهای قالب خود را پیکربندی کنید
فایل tailwind.config.js را باز کنید و مسیرها را به همه فایل های قالب خود اضافه کنید:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

فایل resources/css/app.css/. (یا فایل CSS که در پروژه لاراول خود استفاده می کنید) را باز کنید و دستورات Tailwind زیر را اضافه کنید:

@tailwind base; @tailwind components; @tailwind utilities;

اکنون Tailwind CSS را در پروژه Laravel 11 خود راه اندازی کرده اید. می‌توانید از کلاس‌های کاربردی Tailwind در قالب‌های Blade خود استفاده کنید و با قدرت Tailwind CSS شروع به ساخت برنامه Laravel خود کنید.

تنظیم کنترلر، مسیر، Bladeو کانال

1. ایجاد کنترلر

ابتدا باید یک کنترلر ایجاد کنیم که ذخیره پیام ها را مدیریت کند. این کنترلر پیام هایی را از کاربر دریافت می کند و رویدادی را ارسال می کند. یک فایل به نام ChatController.php در پوشه App\Http\Controllers ایجاد کنید و کد زیر را اضافه کنید:

<?php

namespace App\Http\Controllers;

use App\Events\MessageSent;
use Illuminate\Http\Request;

class ChatController extends Controller
{
    public function store(Request $request)
    {
        $message = $request->input('message');

        MessageSent::dispatch($message);
        return response()->json(['success' => true, 'message' => 'Message sent successfully']);
    }
}

سپس مسیرهای نمایش view چت و متد ارسال پیام را مشخص کنید. فایل web.php را در دایرکتوری routes باز کنید و موارد زیر را اضافه کنید:

use App\Http\Controllers\ChatController;

Route::get('/', function () {
    return view('chat');
});

Route::post('/chat/send-message', [ChatController::class, 'store'])->name('chat.send');

2. ایجاد نمای Blade

یک فایل Blade جدید با نام chat.blade.php در resources/views ایجاد کنید. این فایل شامل ساختار HTML برنامه چت شما خواهد بود. کد زیر را اضافه کنید:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatroom</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])


</head>
<body>
<div id="app" class="p-6">
    <div id="chatroom" class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
        <div class="p-4 bg-gray-200">
            <div class="text-lg font-semibold">Chatroom</div>
        </div>
        <div class="p-4">
            <div id="messages" class="h-64 overflow-y-scroll">
                <div class="bg-gray-100 text-gray-800 p-3 rounded-lg m-2 self-start">
                    <p>This is a message from another user.</p>
                    <div class="text-right text-sm text-gray-500">User Name, 10:00 AM</div>
                </div>
            </div>
            <div class="mt-4">
                <input type="text" id="messageInput" class="w-full p-2 border rounded" placeholder="Type your message here...">
                <button onclick="sendMessage()" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition ease-in-out duration-150">Send Message</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

این view از Tailwind CSS برای استایل‌سازی استفاده می‌کند و شامل Laravel Vite برای کامپایل کردن دارایی است. مطمئن شوید که این وابستگی ها را در پروژه لاراول خود پیکربندی کرده اید.

3. راه اندازی کانال

در نهایت، یک کانال broadcasting تعریف کنید که برنامه از آن برای broadcasting رویدادها استفاده کند. فایل channels.php را در دایرکتوری routes باز کنید و موارد زیر را اضافه کنید:

Broadcast::channel('chatroom', function () { return true; });

این قطعه کد کانالی به نام اتاق گفتگو را تعریف می کند که برای broadcasting پیام های چت استفاده می شود.

4.ایجاد رویداد

برای برقراری ارتباط real-time در یک برنامه چت ساخته شده با لاراول، رویدادها نقش مهمی دارند. این رویدادها مسئول broadcasting پیام ها به همه کلاینت های متصل به یک کانال خاص هستند. در این قسمت از آموزش، رویدادی ایجاد می کنیم که پیام های چت را به صورت real-time پخش می کند.

ایجاد رویداد MessageSent
برای مدیریت broadcasting پیام ها، رویدادی به نام MessageSent ایجاد می کنیم. این رویداد رابط ShouldBroadcastNow را پیاده‌سازی می‌کند، که امکان broadcasting فوری از طریق وب سوکت‌ها را بدون ایجاد صف فراهم می‌کند. برای ایجاد و راه اندازی رویداد مراحل زیر را دنبال کنید:

ابتدا یک فایل PHP جدید در پوشه App\Events ایجاد کنید و نام آن را MessageSent.php بگذارید.
فایل جدید ایجاد شده را باز کنید و کد زیر را اضافه کنید:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class MessageSent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('chatroom'),
        ];
    }

    public function broadcastAs(): string
    {
        return 'message.sent';
    }
}

این کلاس رویداد از چندین ویژگی ارائه شده توسط لاراول برای مدیریت کارآمد فرآیند پخش استفاده می کند. ویژگی Dispatchable اجازه می دهد تا رویداد به راحتی ارسال شود، InteractsWithSockets قابلیت های تعامل سوکت را ارائه می دهد، و ویژگی SerializesModels سریال سازی مدل را هنگام پخش داده ها کنترل می کند.

متد broadcastOn کانال هایی را مشخص می کند که رویداد باید در آنها broadcasting شود. در این مورد، ما در حال broadcasting در کانال چت روم هستیم. متد broadcastAs نام رویدادی را تعریف می‌کند که شنوندگان در قسمت فرانت اند از آن برای دریافت این رویداد استفاده می‌کنند.

با ایجاد رویداد MessageSent، برنامه لاراول شما اکنون می‌تواند پیام‌ها را در زمان واقعی broadcasting کند. این برنامه چت شما را قادر می سازد تا یک تجربه کاربری پویا و تعاملی ارائه دهد.

5. جاوا اسکریپت را برای Frontend ما تنظیم کنید

ایجاد یک تجربه کاربری یکپارچه در یک چت روم نیاز به تعامل در زمان واقعی دارد. برای تسهیل این امر، ما از جاوا اسکریپت برای مدیریت ارسال و دریافت پیام به صورت پویا استفاده می کنیم. در این بخش، راه‌اندازی فایل‌های جاوا اسکریپت خود را برای ایجاد فضای گفتگوی زنده و تعاملی دنبال می‌کنیم.

ایجاد chat-scripts.js
برای سازماندهی و نگهداری جاوا اسکریپت، یک فایل جداگانه به نام chat-scripts.js ایجاد می کنیم. این فایل حاوی تمام کدهای لازم برای عملکردهای چت ما خواهد بود. در اینجا چیزی است که ما به آن اضافه خواهیم کرد:

گوش دادن real-time با Laravel Echo: ما از Laravel Echo برای گوش دادن به رویدادهای پیام استفاده می کنیم. هر زمان که یک رویداد message.sent پخش می شود، ما این رویداد را در زمان واقعی مشاهده می کنیم و برای نمایش پیام جدید، رابط کاربری چت روم خود را به روز می کنیم.

ارسال پیام: ما یک تابع برای مدیریت ارسال پیام اضافه می کنیم. هنگامی که کاربر پیامی را تایپ می کند و دکمه ارسال را می زند، این تابع پیام را می گیرد، آن را با استفاده از Axios برای درخواست HTTP ناهمزمان به سرور می فرستد و سپس فیلد ورودی را پاک می کند و آن را برای پیام بعدی آماده می کند.

کد chat-scripts.js در اینجا آمده است:

// Listen for new messages using Laravel Echo
window.Echo.channel('chatroom')
    .listen('.message.sent', (e) => {
        console.log(e);
        // Append the new message to the chatroom
        const messages = document.getElementById('messages');
        const messageElement = document.createElement('p');
        messageElement.innerText = e.message;
        messages.appendChild(messageElement);
    });

// Function to send a new message
window.sendMessage = function() {
    const messageInput = document.getElementById('messageInput');
    const message = messageInput.value;
    axios.post('/chat/send-message', { message: message })
        .then(response => {
            console.log(response.data);
            // Clear the input field after sending
            messageInput.value = '';
        })
        .catch(error => console.error(error));

    console.log('sent message');
};

ادغام chat-scripts.js در برنامه ما

پس از ایجاد chat-scripts.js، باید مطمئن شویم که در برنامه لاراول ما یکپارچه شده است. ما این کار را با قرار دادن آن در فایل اصلی جاوا اسکریپت، app.js انجام می دهیم. با وارد کردن chat-scripts.js به app.js، اطمینان حاصل می‌کنیم که قابلیت‌های چت ما توسط Laravel Vite جمع‌بندی و کامپایل شده‌اند و آن‌ها را در دسترس برنامه‌مان قرار می‌دهیم.

در app.js، به سادگی عبارت import زیر را اضافه کنید:

import './bootstrap'; import './chat-scripts';

این راه‌اندازی به ما امکان می‌دهد ساختار کد تمیزی را حفظ کنیم و در عین حال اطمینان حاصل کنیم که همه توابع جاوا اسکریپت به درستی بارگذاری و اجرا شده‌اند. با جدا کردن جاوا اسکریپت مربوط به چت خود به chat-scripts.js، ما همچنین کد خود را مدولارتر کرده و نگهداری یا گسترش آن را در آینده آسان‌تر می‌کنیم.

با chat-scripts.js که به درستی راه اندازی شده و در برنامه ما گنجانده شده است، چت روم ما اکنون به قابلیت های پیام رسانی real-time مجهز شده است، تجربه کاربر را افزایش می دهد و برنامه چت روم ما را واقعاً تعاملی می کند.

برنامه چت لاراول خود را با Vite فعال کنید

با راه‌اندازی بک‌اند و فرانت‌اند برنامه چت، زمان آن رسیده است که برنامه را فعال کنید و پیام‌رسانی هم‌زمان را در عمل ببینید. این مرحله شامل راه اندازی سرور broadcasting رویداد لاراول در زمان واقعی با فعال کردن دیباگ و استفاده از Laravel Vite برای یک تجربه توسعه روان است.

راه اندازی سرور broadcasting رویداد real-time لاراول
برای شروع پخش رویداد در زمان واقعی، باید سرور broadcasting رویداد لاراول، Reverb را راه اندازی کنید. این سرور به رویدادهایی مانند ارسال یک پیام گوش می دهد و آنها را به صورت real-time برای همه کلاینت ها متصل پخش می کند. ترمینال یا رابط خط فرمان خود را باز کنید و دستور زیر را اجرا کنید:

php artisan reverb:start --debug

فلگ debug-- بسیار مهم است زیرا بازخورد فوری و ثبت خطا را مستقیماً در کنسول شما ارائه می دهد و به شما در درک جریان رویدادها و عیب یابی هر گونه مشکلی که در طول توسعه ایجاد می شود کمک می کند.

کامپایل دارایی ها با لاراول وایت

Laravel Vite یک بیلدر فرانت اند مدرن و سریع است که گردش کار توسعه شما را افزایش می دهد. این به طور ویژه برای کار یکپارچه با لاراول طراحی شده است و جایگزینی ماژول داغ (HMR) را از جعبه ارائه می دهد. این بدان معنی است که می توانید تغییراتی را در CSS یا جاوا اسکریپت خود ایجاد کنید و بدون بارگیری مجدد صفحه، فوراً آن تغییرات را در مرورگر منعکس کنید. برای شروع Vite و کامپایل دارایی های خود، اجرا کنید:

npm run dev

این دستور Vite را راه‌اندازی می‌کند، دارایی‌های شما را کامپایل می‌کند و تغییراتی را که در فایل‌هایتان ایجاد می‌کنید، بررسی می‌کند و در صورت نیاز، بخش‌هایی از صفحه را دوباره بارگیری می‌کند.

تست برنامه چت

با اجرای سرور پخش رویداد و کامپایل شدن دارایی های شما، به URL توسعه محلی برنامه لاراول خود بروید. این معمولاً http://localhost:8000 است، مگر اینکه پورت دیگری را پیکربندی کرده باشید یا از ابزاری مانند Laravel Valet استفاده کنید که ممکن است دامنه متفاوتی را اختصاص دهد.

پس از آن، باید رابط برنامه چت خود را ببینید. سعی کنید با استفاده از فرم ارائه شده پیام ارسال کنید. اگر همه چیز به درستی تنظیم شده باشد، باید پیام را در زمان واقعی مشاهده کنید، هم برای شما و هم برای هر کلاینت متصل دیگر، بدون نیاز به بازخوانی صفحه. این نشان دهنده قدرت پخش رویداد لاراول و چرخه توسعه سریع Vite است.

نتیجه

این مقاله یک راهنمای گام به گام برای ساختن یک برنامه چت روم real-time با استفاده از Laravel Reverb و ذخیره سازی پایگاه داده برای پیام ها ارائه می دهد. اکنون، شما می توانید نسبت به خلاقیت ها و توانایی های خود این چت روم را بهبود ببخشید برای مثال احراز هویت را به آن اضافه کنید.