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

مقدمهاگه با Broadcast تو لاراول آشنا باشید میدونید که برای استفاده از این قابلیت به رویدادها ( events ) نیاز داریم، اما مشکلی که وجود داره اینه که نمیتونیم به صورت عادی از این قابلیت تو پکیج هامون استفاده کنیم، تو این نوشته اول میریم یه Broadcast تو خود پروژه با استفاده از Livewire میسازیم ( برا کسایی که با نحوه ساختنش آشنا نیستن )، بعد انتقالش میدیم به پکیجپیش نیازهاLaravelLivewirevitepusher-jslaravel-echopusher/pusher-php-serversoketiقاعدتا شمایی که داری این متن رو میخونی با نصب 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;تمام. حالا رویداد مثل سابق کار میکنهتو این نوشته فرض شده شما با لاراول و لایووایر و رویداد و... آشنا هستید ( گرچه باز زیاد جزییات گفته شد ) و صرفا کلیات ایجاد رویداد و انتقال به پکیج ( همون یک خط اضافه شده انتهای متن ) گفته شد.ایشالا در آینده بیشتر راجع به رویداد و قابلیت هاش حرف خواهم زد:)