استفاده از BroadCast با Livewire درون پکیج لاراول

مقدمه

اگه با Broadcast تو لاراول آشنا باشید میدونید که برای استفاده از این قابلیت به رویدادها ( events ) نیاز داریم، اما مشکلی که وجود داره اینه که نمیتونیم به صورت عادی از این قابلیت تو پکیج هامون استفاده کنیم، تو این نوشته اول میریم یه Broadcast تو خود پروژه با استفاده از Livewire میسازیم ( برا کسایی که با نحوه ساختنش آشنا نیستن )، بعد انتقالش میدیم به پکیج

پیش نیازها

• Laravel
• Livewire
• vite
• pusher-js
• laravel-echo
• pusher/pusher-php-server
• soketi

قاعدتا شمایی که داری این متن رو میخونی با نصب Laravel و livewire و vite آشنای پس مستقیم میریم برای نصب سه گزینه آخر روی پروژه لاراولی خودمون:

composer require pusher/pusher-php-server 
npm i pusher-js 
npm i laravel-echo

منتظر بمونید تا مراحل نصب تموم بشه

شما همچنین به یک سرور نیاز دارید که روش soketi نصب باشه، مراحل نصبش رو میتونید تو داکیومنتش بخونید:

https://docs.soketi.app/

.env

در فایل env متغیرهای سراسری زیر را اضافه کنید ( اگر وجود دارند تغییر دهید )، این متغیرها بسته به اطلاعات سرور soketi شما متفاوته:

VITE_PUSHER_APP_KEY=”${PUSHER_APP_KEY}”
VITE_PUSHER_HOST=”${PUSHER_HOST}”
VITE_PUSHER_PORT=”${PUSHER_PORT}”
VITE_PUSHER_SCHEME=”${PUSHER_SCHEME}”
VITE_PUSHER_APP_CLUSTER=”${PUSHER_APP_CLUSTER}”

PUSHER_APP_KEY=app-key
PUSHER_APP_ID=app-id
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6000
PUSHER_APP_CLUSTER=mt1

توجه داشته باشید که مقدار متغیر BROADCAST_DRIVER را برابر pusher قرار دهید

BROADCAST_DRIVER=pusher

کار ما با فایل env تموم شد

resources/js/app.js

کدهای زیر رو به فایل جاوااسکریپتی app خود ( یا هر فایلی که به vite معرفی کردید ) اضافه کنید:

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,
     wsHost: import.meta.env.VITE_PUSHER_HOST ,
     wsPort: import.meta.env.VITE_PUSHER_PORT ,
     forceTLS: false,
     encrypted: true,
     disableStats: true,
     enabledTransports: ['ws', 'wss'],
     cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER
});

تبریک! شما همه تنظیمات اولیه رو با موفقیت اضافه کردید :)

تا اینجا چکار کردیم؟

ما اومدیم تنظیماتی رو به برنامه اضافه کردیم که با استفاده از این تنظیمات برنامه میتونه به سرور soketi وصل بشه و پیام باهاش رد و بدل کنه... این کار رو هم بدون بارگزاری مجدد صفحه میتونه انجام بده.

نکته: پیام رو یه کاربر به سرور ارسال میکنه و بقیه هم در همون لحظه دریافت میکنه، ما میتونیم با استفاده از جاوااسکریپت یا لایووایر ( که خودش پشت صحنه از جاوااسکریپت استفاده میکنه ) منتظر پیام سرور بمونیم تا مارو از پیام جدید باخبر کنه و ما رفتار مدنظر خودمون رو با استفاده از اون پیام اعمال کنیم، مثلا پیام رو به کاربر نشون بدیم... مثلا خرید جدید انجام بشه و ما به ادمین نوتیف نشون بدیم.

ساخت event

با دستور زیر یک رویداد میسازیم:

php artisan make:event BroadCastExample

با دستور بالا فایل BroadCastExample.php در مسیر app\Events ساخته میشود

کار با رویدادهارو نمیخوایم بررسی کنیم، لذا از متدهای این فایل صرفا متد زیر را تغییر میدهیم:

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

ما یک رویداد با نام BroadCastExample و کانالی با نام lists ساختیم... توجه کنید که به این رویداد ساده نمیتوان هیچ پیامی ارسال کرد، صرفا میخواهیم از آن برای فراخوانی یک متد استفاده کنیم، اگر میخواهید پیام دلخواهی به کاربران ارسال کنید باید درباره events ها بیشتر بخوانید... مثلا در لینک زیر:

https://laravel-livewire.com/docs/2.x/laravel-echo

استفاده در کامپوننت لایووایر

کامپوننت خود را بسازید و به عنوان مثال یک دکمه درنظر میگیریم که با کلیک روی آن متد fireBroad اجرا شود، در این متد کافیست کدهای زیر را بنویسید:

public function fireBroad(){
      App\Events\BroadCastExample::broadcast();
}

با این کار به محض کلیک روی دکمه، رویداد فراخوانده میشود و به سرور soketi ارسال میشود، سرور همه کاربران از جمله خود کسی که فراخوانی کرده را از این رویداد مطلع میکند که میتوانیم در صفحه دلخواه گوش به زنگ باشیم، در لایووایر گوش به زنگ بودن با کد زیر اتفاق می افتد:

protected $listeners = [ 'echo:lists,BroadCastExample' => 'showMessage' ];

کد بالا یعنی با رویداد BroadCastExample در کانال lists متد showMessage در این فایل اجرا شود، لذا همه کاربرانی که در حال مشاده فرانت این صفحه هستند ، متد showMessage برایشان اجرا میشود که میتواند هر چیزی باشد، مثلا ما یک dd قرار میدهیم... با اجرای این متد روی صفحه کاربرانی که در حال مشاهده این صفحه هستند، صفحه سیاه dd اجرا میشود

public function showMessage(){
    dd('Hi');
}

توجه کنید که اگر در فایل env مقدار QUEUE_CONNECTION برابر database باشد آنگاه باید job را نیز اجرا کنید.

انتقال رویداد به پکیج

برای انتقال به پکیج کافیست فایل رویداد را جابجا کنیم و namespace ها رو هم تغییر بدیم، اگر لایووایر رو هم میخوایم ببریم تو پکیج حواسمون باشه که تو service provicer پکیچ حتما کامپوننت رو ریجستر کنیم.

حالا فقط میمونه اضافه کردن یک تنظیمات به فایل app.js

لاراول اکو به صورت پیشفرض منتظر فراخوانی رویداد ها در namespace پیشفرض میمونه یعنی App\Events و چون ما رویداد رو تغییر دادیم متوجه نمیشه... کافیه تو app.js فضای نام جدید رو معرفی کنیم:

window.Echo = new Echo({
      broadcaster: 'pusher',
      key: import.meta.env.VITE_PUSHER_APP_KEY,
     wsHost: import.meta.env.VITE_PUSHER_HOST ,
     wsPort: import.meta.env.VITE_PUSHER_PORT ,
     forceTLS: false,
     encrypted: true,
     disableStats: true,
     enabledTransports: ['ws', 'wss'],
     namespace:&quotmhgolij.Events&quot, //این خط را اضافه کنید
     cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER
});

ما در این کد فرض کردیم که فضای نام رویداد ما در پکیج برابر است با :

<?php
namespace mhgolij\Events;

تمام. حالا رویداد مثل سابق کار میکنه

تو این نوشته فرض شده شما با لاراول و لایووایر و رویداد و... آشنا هستید ( گرچه باز زیاد جزییات گفته شد ) و صرفا کلیات ایجاد رویداد و انتقال به پکیج ( همون یک خط اضافه شده انتهای متن ) گفته شد.

ایشالا در آینده بیشتر راجع به رویداد و قابلیت هاش حرف خواهم زد:)