كيفية استخدام Laravel مع Socket.IO

مآخذ الويب رائعة. إنها مفيدة حقًا إذا كنت ترغب في عرض أنشطة في الوقت الفعلي من المستخدمين (أو ربما بعض وظائف قائمة الانتظار).

الآن ، إذا كنت تخشى كلمة " Websockets " ، فلا داعي للقلق . سأضع التعليمات حول كيفية استخدامه وسأكون موجودًا للإجابة على أسئلتك إذا كنت بحاجة إلى ذلك.

واجهت هذا التحدي حيث كنت بحاجة إليه لإظهار قائمة بالأشخاص الذين يشاهدون حاليًا عنوان URL محددًا في Laravel . لذلك بدأت في التفكير. أراد جزء مني القيام باختراق سريع (لحسن الحظ ، هذا ليس أقوى جانب مني). بينما أراد الآخر بناء شيء رائع وقابل لإعادة الاستخدام وطويل الأمد.

"لماذا لا تستخدم Pusher فقط؟"

هنا هو الشيء.

يأتي Laravel مع تمكين دافع. على الرغم من أن Pusher يبدو وكأنه حل سريع " التوصيل والتشغيل " (وهو كذلك) ، إلا أنه يأتي مع قيود. تحقق من //pusher.com/pricing

وتخدعك معظم البرامج التعليمية بعنوانها في تنفيذ Websockets بينما في الواقع يريدون فقط إعطائك Pusher. (والجزء المفضل لدي هو عندما يقولون أنه يمكنك التبديل بسهولة إلى socket.io)

"نريد أن يكون لدينا عدد غير محدود من الاتصالات"

لا نريد أن نقلق بشأن القيود.

لنبدأ.

أنا أستخدم المتشرد / هومستيد.

لهذا ، سنحتاج إلى القراءة عن بث الأحداث.

أشياء يجب ملاحظتها هنا (لذلك لا يتعين علي تكرار الأشياء):

1. واجهة يجب البث للأحداث

2. تمكين مسارات البث واستخدام route / channels.php لمصادقة المستخدمين

3. القناة العامة - يمكن للجميع الاستماع

4. القناة الخاصة - تحتاج إلى تخويل المستخدمين قبل أن يتمكنوا من الانضمام إلى قناة

5. قناة الحضور - مثل خاص ولكن يمكنك تمرير الكثير من البيانات الوصفية الإضافية على تلك القناة والحصول على قائمة بالأشخاص الذين انضموا إلى القناة.

أنشئ حدثك

php artisan make:event MessagePushed

يمكنك حتى اتباع المثال المحدد في وثائق Event Broadcasting. (وهو ما يجب علينا حقا).

قم بتثبيت Redis

قبل ذلك ، كان لدي بالفعل إعداد قوائم انتظار مع المشرف / Redis / Horizon. Horizon رائع ويمكنك العثور على معلومات حول ذلك هنا //laravel.com/docs/5.6/horizon

بمجرد الانتهاء من عمل قوائم الانتظار ، سيحتاج حدث MessagePushed هذا إلى استخدام قوائم الانتظار.

ملاحظة : لكي يعمل كل هذا ، تأكد من تحرير ملف .env الخاص بك:

BROADCAST_DRIVER=redis
QUEUE_DRIVER=redis
(this is from the horizon setup actually, but we will need that for later)
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

قم بتثبيت Laravel Echo Server

هذا الجزء هو في الواقع حيث نقوم بتثبيت خادم socket.io الذي تم تجميعه داخل خادم laravel-echo-server. يمكنك العثور عليها هنا: //github.com/tlaverdure/laravel-echo-server

ملاحظة : تحقق من المتطلبات في الأعلى!

قم بتشغيل ما يلي (كما هو مذكور في المستند)

npm install -g laravel-echo-server

ثم قم بتشغيل init من أجل الحصول على ملف laravel-echo-server.json الذي تم إنشاؤه في جذر التطبيق (والذي سنحتاج إلى تهيئته).

laravel-echo-server init

بمجرد إنشاء ملف laravel-echo-server.json ، يجب أن يبدو هكذا.

{
"authHost": "//local-website.app",
"authEndpoint": "/broadcasting/auth",
"clients": [
{
"appId": "my-app-id",
"key": "my-key-generated-with-init-command"
}
],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
},
"port": "6379",
"host": "127.0.0.1"
},
"devMode": false,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": ""
}

ملاحظة : إذا كنت تريد دفع هذا إلى خادمك العام ، فتأكد من إضافة laravel-echo-server.json إلى .gitignore الخاص بك . قم بتفعيل هذا الملف على الخادم ، وإلا فستحتاج إلى تغيير مضيف التأليف الخاص بك طوال الوقت.

قم بتشغيل خادم Laravel Echo

يجب عليك تشغيله لبدء مآخذ الويب.

laravel-echo-server start 

(داخل الجذر الخاص بك - حيث يتم وضع laravel-echo-server.json)

يجب أن تبدأ بنجاح. (سنريد الآن إضافة هذا إلى المشرف على الخادم الخاص بك ، لذلك يتم تشغيله تلقائيًا وإعادة تشغيله في حالة تعطله)

داخل /etc/supervisor/conf.d/laravel-echo.conf (فقط قم بإنشاء هذا الملف داخل مجلد conf.d الخاص بك ) ضع ما يلي:

[program:laravel-echo]
directory=/var/www/my-website-folder
process_name=%(program_name)s_%(process_num)02d
command=laravel-echo-server start
autostart=true
autorestart=true
user=your-linux-user
numprocs=1
redirect_stderr=true
stdout_logfile=/var/www/my-website-folder/storage/logs/echo.log

بمجرد وضعك في جذر Laravel ، يمكنك تشغيل

pwd

للحصول على مسار "الدليل" أعلاه والبادئة "stdout_logfile".

سيكون المستخدم الخاص بك هو مستخدم Linux الخاص بك (المتشرد أو Ubuntu أو غيره)

احفظ الملف واخرج.

إذا كنت تستخدم vim laravel-echo.conf ، فاضغط على I (مثل Istanbul) على لوحة المفاتيح لتعديل ملف باستخدام VIM ثم اكتب ESC التالي: wq! لإغلاق الملف وحفظه.

بعد ذلك ، نحتاج إلى تشغيل الأوامر التالية:

sudo supervisorctl stop all sudo supervisorctl reread
sudo supervisorctl reload

بعد ذلك تحقق لمعرفة ما إذا كان صدى laravel قيد التشغيل

sudo supervisorctl status

قم بتثبيت عميل Laravel Echo و Socket IO

npm install --save laravel-echo
npm install --save socket.io-client

ثم في bootstrap.js (أنا أستخدم Vue js) قم بتسجيل Echo الخاص بك

import Echo from "laravel-echo"window.io = require('socket.io-client');
// Have this in case you stop running your laravel echo server
if (typeof io !== 'undefined') { window.Echo = new Echo({ broadcaster: 'socket.io', host: window.location.hostname + ':6001', });}

تحقق الآن مرة أخرى من كيفية الاستماع إلى الأحداث الخاصة بك على قنوات محددة.

بعد التوثيق على Laravel Broadcasting الذي شاركناه أعلاه ، إذا قمت بتعيين طريقة البث () الخاصة بك لإرجاع قناة PresenceChannel جديدة (سأشرح الحالة الخاصة التي قمت بها ، لكن لا تتردد في طرح الأسئلة في حال كنت بحاجة إلى تنفيذ شيء آخر. أجد هذا أن تكون أكثر تعقيدًا من مجرد استخدام قناة عامة ، لذلك يمكننا تقليص حجمها دون أي مشاكل) ثم نريد الاستماع إلى هذه القناة على جانب جافا سكريبت (الواجهة الأمامية).

هنا مثال ملموس:

  1. لقد دفعت حدثًا إلى قناة تواجد (كنت أتعامل مع الاستطلاعات)
public function broadcastOn()
{
return new PresenceChannel('survey.' . $this->survey->id);
}

2. بعد دفع الحدث ، سوف يمر عبر channel.php. هناك نريد إنشاء إذن لهذا المستخدم. (تذكر إعادة مصفوفة لترخيص قناة التواجد وليس قيمة منطقية.)

Broadcast::channel('survey.{survey_id}', function ($user, $survey_id) {
return [
'id' => $user->id,
'image' => $user->image(),
'full_name' => $user->full_name
];
});

3. ثم في مكون VueJs الخاص بي الذي يتم تحميله على الصفحة التي أريد مراقبتها ، أحدد طريقة سيتم بدؤها من طريقة الإنشاء () عند التحميل:

listenForBroadcast(survey_id) {
Echo.join('survey.' + survey_id)
.here((users) => {
this.users_viewing = users;
this.$forceUpdate();
})
.joining((user) => {
if (this.checkIfUserAlreadyViewingSurvey(user)) {
this.users_viewing.push(user);
this.$forceUpdate();
}
})
.leaving((user) => {
this.removeViewingUser(user);
this.$forceUpdate();
});
},

من الواضح أنني قمت بسحب بعض الكود من السياق هنا ولكن لدي مجموعة "users_viewing" هذه للحفاظ على المستخدمين الحاليين الذين انضموا إلى القناة.

وسيكون ذلك حقًا.

آمل أن تكون قادرًا على المتابعة كما حاولت أن أكون مفصلاً قدر الإمكان.

ترميز سعيد!

تابعني على تويتر

أضفني على LinkedIn