استخدام WebSockets في Laravel بطريقة مبسطة للمبتدئين

مقدمة

تقنية WebSockets بتسمح بإنشاء اتصال مباشر بين السيرفر والمتصفح بحيث يقدروا يتبادلوا البيانات في الوقت الحقيقي من غير ما المستخدم يضطر يعمل Reload للصفحة.

في Laravel، بنقدر نستخدم WebSockets علشان نعمل تطبيقات تفاعلية زي:

تطبيقات الدردشة زي واتساب وفيسبوك ماسنجر.

الألعاب الأونلاين اللي بتحتاج تحديثات لحظية.

التحديثات الحية زي أسعار الأسهم أو نتائج المباريات.

أولًا: إنشاء تطبيق تجريبي

هنفترض إن عندنا تطبيق بيرفع المستخدمين فيه فيديوهات، بس بدل ما المستخدم يستنى لحد ما الفيديو يخلص تحميل، هنخليه يقدر يتابع حالة التحميل لحظيًا باستخدام WebSockets.

المتطلبات الأساسية

لازم يكون عندك Laravel مثبت، ولو مش عندك، نفذ الأمر ده:

composer create-project --prefer-dist laravel/laravel my-websockets-app

ثم ادخل إلى المجلد:

cd my-websockets-app

تثبيت الحزم المطلوبة

1. تثبيت Laravel Echo و Pusher

لتثبيت الحزم المطلوبة:

npm install --save laravel-echo pusher-js

ثم تعديل ملف resources/js/bootstrap.js وإضافة:

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,
  encrypted: true
});
        

2. تثبيت Redis لتشغيل المهام في الخلفية

Redis يُستخدم كـ queue driver لتشغيل المهام بالخلفية:

composer require predis/predis

ثم تعديل ملف .env:

QUEUE_CONNECTION=redis

تفعيل الإعدادات المطلوبة

تأكد من تفعيل BroadcastingServiceProvider في ملف config/app.php.

إعادة تجميع الأصول بعد تعديل .env:

npm run dev

استخدام Pusher مع Laravel

لتثبيت Pusher:

composer require pusher/pusher-php-server "~3.0"

ثم إضافة بيانات الاتصال في .env:

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=your_cluster
        

إنشاء نموذج (Model) للفيديو

php artisan make:model Video -mc

إضافة مسارات (Routes)

Route::get('/videos/{video}', 'VideoController@show');
Route::post('/videos', 'VideoController@store');
        

إنشاء وظيفة (Job) لمعالجة الفيديو

php artisan make:job ProcessVideo

إرسال إشعار للمستخدم عند انتهاء المعالجة

php artisan make:event VideoWasProcessed

استخدام Laravel WebSockets بدلاً من Pusher

1. تثبيت الحزمة

composer require beyondcode/laravel-websockets

2. نشر الإعدادات

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

3. تعديل 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'),
        'encrypted' => true,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'http'
    ],
],
        

4. تعديل bootstrap.js

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: process.env.MIX_PUSHER_APP_KEY,
  wsHost: window.location.hostname,
  wsPort: 6001,
  disableStats: true,
});
        

5. تشغيل السيرفر الخاص بـ WebSockets

php artisan websockets:serve

الخلاصة

WebSockets بتساعد على إنشاء تطبيقات تفاعلية في الوقت الحقيقي.

Laravel Echo مع Pusher بيسهّل المهمة، لكن Laravel WebSockets بيقدم تحكم كامل بدون خدمات خارجية.

Redis بيُستخدم كـ Queue Driver لتشغيل المهام بالخلفية.

دلو