بناء ميزات الوقت الفعلي مع البث

# .env - استخدام Pusher
BROADCAST_DRIVER=pusher

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

# أو استخدام Redis (يتطلب حزمة predis/predis)
BROADCAST_DRIVER=redis

# تثبيت Pusher PHP SDK
composer require pusher/pusher-php-server

# تثبيت Laravel Echo و Pusher JS (الواجهة الأمامية)
npm install --save-dev laravel-echo pusher-js

# للبث عبر Redis
composer require predis/predis

// config/app.php
'providers' => [
    // ...
    App\Providers\BroadcastServiceProvider::class,
],

php artisan make:event OrderShipped

<?php
// app/Events/OrderShipped.php
namespace App\Events;

use App\Models\Order;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    public $order;

    public function __construct(Order $order)
    {
        $this->order = $order;
    }

    // تحديد القناة (القنوات) للبث عليها
    public function broadcastOn()
    {
        // قناة عامة - يمكن لأي شخص الاستماع
        return new Channel('orders');

        // قناة خاصة - تتطلب المصادقة
        // return new PrivateChannel('orders.' . $this->order->user_id);

        // قناة حضور - تتبع من يستمع
        // return new PresenceChannel('orders');
    }

    // تخصيص اسم الحدث (اختياري)
    public function broadcastAs()
    {
        return 'order.shipped';
    }

    // تخصيص البيانات المبثوثة (اختياري)
    public function broadcastWith()
    {
        return [
            'order_id' => $this->order->id,
            'tracking_number' => $this->order->tracking_number,
            'status' => $this->order->status,
            'shipped_at' => $this->order->shipped_at,
        ];
    }
}

<?php
// app/Http/Controllers/OrderController.php
namespace App\Http\Controllers;

use App\Models\Order;
use App\Events\OrderShipped;

class OrderController extends Controller
{
    public function ship(Order $order)
    {
        $order->update(['status' => 'shipped', 'shipped_at' => now()]);

        // بث الحدث
        event(new OrderShipped($order));

        // أو استخدام مساعد broadcast()
        // broadcast(new OrderShipped($order));

        return response()->json(['message' => 'تم شحن الطلب بنجاح']);
    }
}

public function broadcastOn()
{
    return new Channel('public-updates');
}

<?php
// routes/channels.php
use Illuminate\Support\Facades\Broadcast;

// قناة خاصة بالمستخدم
Broadcast::channel('orders.{userId}', function ($user, $userId) {
    return (int) $user->id === (int) $userId;
});

// قناة خاصة بالطلب
Broadcast::channel('order.{orderId}', function ($user, $orderId) {
    return $user->orders()->where('id', $orderId)->exists();
});

// قناة خاصة بالمشرفين فقط
Broadcast::channel('admin', function ($user) {
    return $user->is_admin;
});

// استخدام قناة خاصة في الحدث
public function broadcastOn()
{
    return new PrivateChannel('orders.' . $this->order->user_id);
}

<?php
// routes/channels.php
Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    if ($user->canJoinRoom($roomId)) {
        return [
            'id' => $user->id,
            'name' => $user->name,
            'avatar' => $user->avatar_url,
        ];
    }
});

// استخدام قناة الحضور في الحدث
public function broadcastOn()
{
    return new PresenceChannel('chat.1');
}

// resources/js/bootstrap.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,

    // للقنوات المصادق عليها
    authEndpoint: '/broadcasting/auth',
    auth: {
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    }
});

// لـ Soketi (التطوير المحلي)
/*
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'app-key',
    wsHost: 'localhost',
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
});
*/

// إضافة إلى .env
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

// الاستماع إلى قناة عامة
Echo.channel('orders')
    .listen('OrderShipped', (e) => {
        console.log('تم شحن الطلب:', e.order_id);
        showNotification('تم شحن طلبك #' + e.order_id + '!');
    });

// الاستماع إلى قناة خاصة (يتطلب المصادقة)
Echo.private('orders.' + userId)
    .listen('.order.shipped', (e) => {
        console.log('تم شحن طلبك:', e);
        updateOrderStatus(e.order_id, 'shipped');
    });

// الاستماع إلى قناة الحضور
Echo.join('chat.1')
    .here((users) => {
        // المستخدمون الموجودون حالياً في القناة
        console.log('المستخدمون المتصلون:', users);
        displayOnlineUsers(users);
    })
    .joining((user) => {
        // انضم مستخدم إلى القناة
        console.log(user.name + ' انضم');
        addOnlineUser(user);
    })
    .leaving((user) => {
        // غادر مستخدم القناة
        console.log(user.name + ' غادر');
        removeOnlineUser(user);
    })
    .listen('MessageSent', (e) => {
        // تم استلام رسالة دردشة
        displayMessage(e.message);
    });

<?php
// app/Notifications/InvoicePaid.php
namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Notifications\Notification;

class InvoicePaid extends Notification implements ShouldQueue
{
    use Queueable;

    public $invoice;

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

    public function via($notifiable)
    {
        return ['database', 'broadcast'];
    }

    public function toArray($notifiable)
    {
        return [
            'invoice_id' => $this->invoice->id,
            'amount' => $this->invoice->amount,
            'message' => 'تم دفع الفاتورة #' . $this->invoice->id,
        ];
    }

    public function toBroadcast($notifiable)
    {
        return new BroadcastMessage([
            'invoice_id' => $this->invoice->id,
            'amount' => $this->invoice->amount,
            'message' => 'تم دفع الفاتورة #' . $this->invoice->id,
        ]);
    }
}

// إرسال إشعار
$user->notify(new InvoicePaid($invoice));

// الاستماع للإشعارات في الواجهة الأمامية
Echo.private('App.Models.User.' + userId)
    .notification((notification) => {
        console.log('تم استلام إشعار:', notification);
        showNotification(notification.message);
        updateNotificationBadge();
    });

<?php
// app/Events/MessageSent.php
namespace App\Events;

use App\Models\Message;
use App\Models\User;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    public $message;
    public $user;

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

    public function broadcastOn()
    {
        return new PresenceChannel('chat.' . $this->message->chat_room_id);
    }

    public function broadcastWith()
    {
        return [
            'id' => $this->message->id,
            'body' => $this->message->body,
            'created_at' => $this->message->created_at->toDateTimeString(),
            'user' => [
                'id' => $this->user->id,
                'name' => $this->user->name,
                'avatar' => $this->user->avatar_url,
            ],
        ];
    }
}

<?php
// app/Http/Controllers/ChatController.php
namespace App\Http\Controllers;

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

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {
        $validated = $request->validate([
            'chat_room_id' => 'required|exists:chat_rooms,id',
            'body' => 'required|string|max:1000',
        ]);

        $message = Message::create([
            'user_id' => auth()->id(),
            'chat_room_id' => $validated['chat_room_id'],
            'body' => $validated['body'],
        ]);

        broadcast(new MessageSent($message, auth()->user()))->toOthers();

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

// JavaScript للواجهة الأمامية
const chatRoomId = 1;

// الانضمام إلى غرفة الدردشة
Echo.join(`chat.${chatRoomId}`)
    .here((users) => {
        displayOnlineUsers(users);
    })
    .joining((user) => {
        addOnlineUser(user);
        showSystemMessage(`${user.name} انضم إلى الدردشة`);
    })
    .leaving((user) => {
        removeOnlineUser(user);
        showSystemMessage(`${user.name} غادر الدردشة`);
    })
    .listen('MessageSent', (e) => {
        appendMessage(e);
    });

// إرسال رسالة
function sendMessage(body) {
    axios.post('/chat/message', {
        chat_room_id: chatRoomId,
        body: body
    }).then(response => {
        appendMessage(response.data);
        clearInput();
    });
}

function appendMessage(message) {
    const messageHtml = `
        <div class="message">
            <img src="${message.user.avatar}" alt="${message.user.name}">
            <div>
                <strong>${message.user.name}</strong>
                <p>${message.body}</p>
                <span>${message.created_at}</span>
            </div>
        </div>
    `;
    document.querySelector('#messages').insertAdjacentHTML('beforeend', messageHtml);
}