https://virgool.io/feed/@mhgolij توسعه دهنده وب - لاراول، علاقه‌مند به نشر دانش اندک خود fa 2026-06-10 15:26:10 https://files.virgool.io/upload/users/2638342/avatar/mRnBAE.jpg?height=120&width=120 https://virgool.io/@mhgolij https://virgool.io/@mhgolij/%D8%AE%D8%B7%D8%A7%DB%8C-livewire-encountered-corrupt-data-when-trying-to-hydrate-a-component-ensure-that-the-name-id-data-of-the-livewire-component-wasnt-tampered-with-between-requests-%D8%A8%D8%B1%D8%A7%DB%8C-%DA%86%DB%8C%D9%87-inlkc3zny23f اگر از livewire زیاد استفاده میکنید حتما به این خطا برخورد کرده اید، خطایی که باعث شده شاید به این فکر کنید که چرا دارم از livewire استفاده میکنم و باید بذارمش کنار! ولی یک لحظه صبر کنید! قبل از مهاجرت از livewire این متن رو بخونید:ما همه php رو به عنوان زبانی میشناسیم که به نوع داده ها اهمیتی نمیده و شما میتونید متغیرها رو بدون مشخص کردن نوع آن تعریف کنید اما گویا livewire اینطور نیست، تا اونجایی که من فهمیدم livewire بین هر درخواست چک میکنه که داده ها به صورت غیرمجاز تغییر نکرده باشند و این چیز خوبیه اما تو این چک کردن 0 با "0" فرق میکنه و اگه نوع این داده متفاوت باشه خطای تغییر غیرمجاز میدهاین خطا اغلب روی داده های آرایه ای رخ میده و کلیدهای همنام باید نوع داده یکسانی داشته باشند مثلا:$amountsData = [ &quotdiscount&quot=>0.0, ...];این آرایه یک کلید برای تخفیف داده که به صورت عددی ذخیره شده و ما در همین کامپوننت یک آرایه دیگه ای داریم که همین کلید رو داره:$totalData = [ &quotdiscount&quot=>&quot0.0&quot, ...];این خطاست!! درسته که دوتا آرایه مختلف داریم که به ظاهر هیچ ربطی به هم ندارند ولی livewire این موضوع براش مهم هست پس خطا میده که:Livewire encountered corrupt data when trying to hydrate a component. Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requestsحالا کافیه یکی از این دو داده را به نوع مقابلش تبدیل کنید:اگه از sql استفاده میکنید میتونید رشته رو با استفاده از این متد به عدد تبدیل کنید:DB::raw('CAST(discount AS DECIMAL(10,2)) as discount')البته همیشه این خطا بابت این موضوع نیست ولی بیشتر اوقات همینه...امیدوارم که مفید باشه Mohammad H Goli J Mohammad H Goli J Sun, 02 Feb 2025 13:16:53 +0330 https://virgool.io/@mhgolij/%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-broadcast-%D8%A8%D8%A7-livewire-%D8%AF%D8%B1%D9%88%D9%86-%D9%BE%DA%A9%DB%8C%D8%AC-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-grs9fehwdjuf مقدمهاگه با 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;تمام. حالا رویداد مثل سابق کار میکنهتو این نوشته فرض شده شما با لاراول و لایووایر و رویداد و... آشنا هستید ( گرچه باز زیاد جزییات گفته شد ) و صرفا کلیات ایجاد رویداد و انتقال به پکیج ( همون یک خط اضافه شده انتهای متن ) گفته شد.ایشالا در آینده بیشتر راجع به رویداد و قابلیت هاش حرف خواهم زد:) Mohammad H Goli J Mohammad H Goli J Sat, 24 Jun 2023 22:27:38 +0330