مقدمة إلى Broadcasting في Laravel: استخدام WebSockets في الوقت الفعلي

المقدمة

البث في Laravel يسمح لك ببناء تطبيقات في الوقت الفعلي عبر WebSockets، مما يوفر تجربة مستخدم تفاعلية وسريعة الاستجابة. باستخدام البث، يمكنك إرسال بيانات من الخادم إلى العميل دون الحاجة إلى طلب من العميل، مما يجعل التطبيق أكثر ديناميكية. يمكنك استخدام خدمات مثل Pusher أو مكتبة Laravel WebSockets لإنشاء قنوات بث فورية وآمنة.

الخطوة 1: إعداد Pusher أو Laravel WebSockets

Laravel يدعم العديد من برامج تشغيل البث مثل Pusher وLaravel WebSockets. في هذا المثال، سنستخدم Pusher. أولاً، قم بتثبيت حزمة Pusher SDK عبر Composer:

composer require pusher/pusher-php-server

ثم قم بتحديث إعدادات البث في ملف .env لتتضمن معلومات API الخاصة بـ Pusher:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret
PUSHER_APP_CLUSTER=mt1

تأكد من تحديث ملف config/broadcasting.php ليعكس هذه التغييرات:

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'useTLS' => true,
    ],
],

الخطوة 2: إعداد Laravel Echo

Laravel Echo هو مكتبة JavaScript توفر واجهة برمجة تطبيقات لدمج WebSockets بسهولة مع Laravel. لتثبيت Laravel Echo وPusher JavaScript، استخدم NPM:

npm install --save laravel-echo pusher-js

بعد التثبيت، قم بتحديث ملف resources/js/bootstrap.js لإعداد Laravel Echo مع Pusher:

import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

لا تنس تشغيل الأوامر npm run dev أو npm run watch لإعادة تجميع الأصول.

الخطوة 3: إنشاء حدث بث في Laravel

الآن، لنقم بإنشاء حدث بث. يمكنك استخدام الأمر make:event لإنشاء حدث جديد. لنقم بإنشاء حدث بث بسيط:

php artisan make:event MessageSent

افتح الملف الذي تم إنشاؤه MessageSent.php في مجلد app/Events وقم بتحديثه ليبدو كما يلي:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;
use App\Models\Message;

class MessageSent implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('chat');
    }
}

في هذا المثال، نقوم ببث الحدث MessageSent على قناة خاصة chat. يمكنك استخدام القنوات العامة أو الخاصة بناءً على احتياجات التطبيق.

الخطوة 4: إعداد قنوات البث

لإعداد قنوات البث، افتح ملف routes/channels.php وقم بتعريف القناة الخاصة التي سيتم استخدامها:

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

هذا التعريف يحدد من يمكنه الاستماع إلى القناة الخاصة chat. في هذا المثال، يتم السماح للمستخدمين المسجلين فقط بالوصول.

الخطوة 5: بث الحدث واستخدامه في JavaScript

لتجربة البث في الوقت الفعلي، يمكنك بث الحدث من المتحكم (Controller). لنقم بتحديث متحكم بسيط لبث حدث MessageSent عند إرسال رسالة:

<?php

namespace App\Http\Controllers;

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

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {
        $message = Message::create([
            'user_id' => auth()->id(),
            'content' => $request->input('message'),
        ]);

        broadcast(new MessageSent($message))->toOthers();

        return response()->json(['status' => 'Message sent successfully!']);
    }
}

في JavaScript، يمكنك الآن الاستماع إلى الأحداث باستخدام Laravel Echo:

Echo.private('chat')
    .listen('MessageSent', (e) => {
        console.log(e.message);
    });

عندما يتم إرسال رسالة جديدة، سيستمع Laravel Echo للحدث ويعرض الرسالة في وحدة التحكم الخاصة بالمستعرض.

الخاتمة

تعد ميزة البث في Laravel أداة قوية لإنشاء تطبيقات ويب تفاعلية في الوقت الفعلي باستخدام WebSockets. من خلال إعداد Pusher أو Laravel WebSockets، واستخدام Laravel Echo، يمكنك بسهولة بث الأحداث والاستجابة لها في الوقت الفعلي لتحسين تجربة المستخدم وجعل تطبيقاتك أكثر تفاعلية. استمر في استكشاف ميزات Laravel لتعزيز تطبيقاتك وتحسين أدائها.