أحداث Laravel اللحظية على ويندوز (الخادم المحلي)

أحداث Laravel اللحظية على ويندوز (الخادم المحلي)

في هذا المقال نشرح كيفية إعداد الأحداث اللحظية في Laravel على نظام ويندوز باستخدام بيئة تطوير محلية. سنستخدم:

• Windows + WSL (Ubuntu)
• Redis كسيرفر للـ Queue والبث
• Laravel Broadcasting
• Laravel Echo Server + Socket.IO

في النهاية ستكون قادراً على إرسال الأحداث من Laravel واستقبالها في الواجهة الأمامية لحظيًا على localhost.

---

1. المتطلبات المسبقة

• Windows 10/11
• صلاحيات مدير (Administrator)
• PHP 8.1 أو أحدث
• Composer
• Node.js و npm
• مشروع Laravel جاهز أو جديد

---

2. تثبيت Ubuntu على ويندوز باستخدام WSL

2.1 تفعيل WSL

افتح PowerShell كمسؤول (Run as Administrator) ثم نفّذ الأمر:

wsl --install

سيتم تثبيت WSL و Ubuntu بشكل افتراضي. أعد تشغيل الجهاز إذا طُلِب ذلك.

للتحقق من التثبيت:

wsl -l -v

2.2 فتح Ubuntu (WSL)

من قائمة Start افتح Ubuntu ثم قم بتعيين اسم المستخدم وكلمة المرور الخاصة بلينكس.

---

3. تثبيت وتشغيل Redis داخل Ubuntu (WSL)

سنستخدم Redis كسيرفر للبث (Broadcasting driver).

3.1 تحديث الحزم

sudo apt update && sudo apt upgrade -y

3.2 تثبيت Redis

sudo apt install redis-server -y

3.3 تشغيل خدمة Redis

sudo service redis-server start

للتحقق من أن Redis يعمل:

redis-cli ping

المخرجات المتوقعة:

PONG

سيكون Redis متاحًا على 127.0.0.1:6379

---

4. تهيئة البث في Laravel

4.1 تثبيت إضافة Redis للـ PHP

من داخل WSL:

sudo apt install php-redis -y

ثم أعد تشغيل PHP (سواء كنت تستخدم PHP-FPM أو Apache).

4.2 تفعيل البث في Laravel

داخل مجلد مشروع Laravel نفّذ:

php artisan install:broadcasting

هذا الأمر يقوم بضبط إعدادات البث تلقائيًا.

4.3 تحديث ملف .env

BROADCAST_CONNECTION=redis
QUEUE_CONNECTION=redis
CACHE_DRIVER=redis
REDIS_HOST=127.0.0.1
REDIS_PORT=6379

4.4 التحقق من إعداد config/broadcasting.php

تأكد من أن تعريف Redis موجود ومُفعّل:

'redis' => [
    'driver' => 'redis',
    'connection' => 'default',
],

---

5. تفعيل BroadcastServiceProvider في Laravel

افتح ملف config/app.php وتأكد أن السطر التالي غير مُعلّق:

App\Providers\BroadcastServiceProvider::class,

---

6. تثبيت Laravel Echo Server و Socket.IO

Laravel Echo Server يستمع للأحداث من Laravel ويقوم بدفعها عبر WebSockets.

6.1 تثبيت Laravel Echo Server عالميًا

npm install -g laravel-echo-server

6.2 تهيئة Echo Server

من جذر مشروع Laravel نفّذ:

laravel-echo-server init

أجب عن الأسئلة مثل:

? Do you want to run this server in development mode? Yes
? Which port would you like to serve on? 6001
? Which database would you like to use to store presence channel members? redis
? Enter the host of your Laravel authentication server: http://localhost
? Will you be serving on http or https? http
? Do you want to generate a client ID/Key? Yes

سيتم إنشاء ملف laravel-echo-server.json.

6.3 مثال لملف laravel-echo-server.json

{
  "authHost": "http://localhost",
  "authEndpoint": "/broadcasting/auth",
  "clients": [
    {
      "appId": "local",
      "key": "localkey"
    }
  ],
  "database": "redis",
  "databaseConfig": {
    "redis": {
      "host": "127.0.0.1",
      "port": 6379
    }
  },
  "devMode": true,
  "host": null,
  "port": 6001,
  "protocol": "http",
  "socketio": {},
  "secureOptions": 67108864
}

---

7. تشغيل Laravel Echo Server

laravel-echo-server start

يُفترض أن تظهر مخرجات مثل:

✔ Running at http://localhost:6001
✔ Listening for events...

---

8. تهيئة الواجهة الأمامية (Laravel Echo)

8.1 تثبيت مكتبات Echo و Socket.IO Client

npm install laravel-echo socket.io-client

8.2 ضبط ملف resources/js/bootstrap.js

import Echo from 'laravel-echo';
import io from 'socket.io-client';

window.io = io;

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

ثم قم بعمل Build للأصول:

npm run dev

---

9. إنشاء حدث بسيط للبث

9.1 إنشاء الحدث

php artisan make:event MessageSent

9.2 تعديل كلاس الحدث

app/Events/MessageSent.php:

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

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

    public string $message;

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

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

---

10. إطلاق الحدث من الـ Controller

use App\Events\MessageSent;

Route::get('/send', function () {
    broadcast(new MessageSent('Hello from Laravel'));
    return 'Event Sent';
});

---

11. الاستماع للحدث في JavaScript

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

افتح Console المتصفح ثم زر الرابط:

http://localhost/send

يُفترض أن تشاهد الرسالة تظهر فورًا.

---

12. ملاحظات مهمة حول البث في Laravel

نقاط أساسية

• تأكد دائمًا من أن الكلاس يُطبِّق ShouldBroadcast
• القنوات تُعرّف في ملف routes/channels.php
• القنوات العامة (Public) لا تحتاج إلى توثيق
• قنوات Private / Presence تحتاج إلى توثيق (Authentication)

مثال لتعريف قناة

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

متطلبات الـ Queue

البث في Laravel يعتمد على الـ Queue، لذلك تأكد أن عامل الـ Queue يعمل:

php artisan queue:work

---

13. مشاكل شائعة

---

الخلاصة

باستخدام WSL + Redis + Laravel Echo Server يمكنك تشغيل الأحداث اللحظية في Laravel على نظام ويندوز بسهولة تامة في بيئة محلية، وبشكل قريب جدًا من بيئات الإنتاج، مع اتصال WebSocket سريع وموثوق.

برمجة موفقة 🚀