نوشته های محسن میرحسینی

پیاده‌سازی وب‌سوکت‌ها با لاراول - بخش دوم

محسن میرحسینی — Wed, 08 Nov 2023 09:22:55 +0330

در بخش قبلی به همراه هم تونستیم یک وب‌سوکت‌سرور رو با لاراول راه‌اندازی کنیم. یک کتابخونه نصب کردیم که جایگزین pusher باشه و وظیفه دریافت و ارسال اطلاعات در کانال‌های ارتباطی بین سرور و کلاینت رو برعهده داشته باشه.در این بخش سعی می‌کنیم یک کانال ارتباطی در لاراول ایجاد کنیم و اطلاعات رو در این کانال جریان بدیم و همچنین بوسیله جاوااسکریپت در سمت کلاینت به اون متصل بشیم و اطلاعات موجود در کانال رو دریافت کنیم و به صورت یک نوتیفیکیشن نمایششون بدیم. با من همراه باشید تا وارد مرحله بعدی بشیم.ایجاد یک کانال ارتباطیحتما قبل از این متوجه شدین که داخل دایرکتوری routes در پروژه لاراول یک فایل با عنوان channels.php وجود داره که تا قبل از این استفاده‌ای ازش نکردیم. در لاراول برای تعریف کانال‌های ارتباطی از این فایل استفاده می‌کنیم. اگر کد زیر رو به فایل channels.php اضافه کنید یک کانال با اسم test-channel ایجاد می‌شه که می‌تونیم جریان اطلاعات رو به اون ارسال یا ازش دریافت کنیم.Broadcast::channel('test-channel', function () {});در لاراول ارسال جریان اطلاعات درون یک کانال بوسیله eventها انجام می‌شه. پس برای اینکه بتونیم بوسیله وب‌سوکت کاربر رو از اطلاعات خاصی مطلع کنیم باید یک رخداد پیش بیاد. به ‌عنوان مثال در نظر بگیرید که کاربر در فروشگاه اینترنتی شما مشغول مشاهده محصولاته و شما همون موقع تصمیم می‌گیرید قیمت محصولات رو تغییر بدین. برای اینکه کاربر از بروزرسانی این قیمت‌ها باخبر بشه می‌تونیم یک رخداد تعریف کنیم و در کانال ارتباطی که قبلا کاربر بهش متصل‌شده اطلاعاتی در این خصوص ارسال کنیم. می‌تونیم همه قیمت‌ها رو ارسال کنیم یا در روشی که من بهتر می‌دونم، کلاینت رو باخبر کنیم که باید اطلاعات محصولات رو دوباره از سرور فراخوانی کنهپس با استفاده از دستور زیر یک رخداد می‌سازیم و سراغ فایل رخداد می‌ریم تا تنظیمات مربوط رو در اون انجام بدیم.$ php artisan make:event TestWebsocketEventاگر به دایرکتوری app/events مراجعه کنید می‌بینید که یک فایل به‌نام TestWebsocketEvent ایجاد شده که در ادامه محتویات اون رو باهم بررسی می‌کنیم.class TestWebsocketEvent implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; /** * Create a new event instance. */ public function __construct() { } /** * Get the channels the event should broadcast on. * * @return array */ public function broadcastOn(): array { return [ new PrivateChannel('channel-name'), ]; } }اولین مساله اینکه این کانال‌های ارتباطی که بین سرور و کلاینت ایجاد می‌شن شامل public channels و private channels هستن و بزرگترین تفاوتشون اینه که در کانال‌های خصوصی می‌تونیم کاربر رو اعتبارسنجی کنیم و متوجه بشیم که کدوم کاربر در حال حاضر به کانال متصل شده. ولی اجازه بدین که در بخش‌های بعدی در این‌خصوص صحبت کنیم و در حال حاضر برای استفاده از یک کانال عمومی فایل رخداد ایجاد‌شده رو به شکل زیر تغییر بدینclass TestWebsocketEvent implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public array $data; /** * Create a new event instance. */ public function __construct() { $this->data = [ 'title' => 'New Notification', 'message' => 'You have new Notification', ]; } /** * Get the channels the event should broadcast on. * * @return array */ public function broadcastOn(): array { return [ // new PrivateChannel('channel-name'), new Channel('test-channel') ]; } }اول از همه یک property به این کلاس اضافه کردیم که حاوی اطلاعتیه که قراره توی کانال جریان پیدا‌کنهpublic array $data; public function __construct() { $this->data = [ 'title' => 'New Notification', 'message' => 'You have new Notification', ]; }بعد از اون هم بوسیله متد broadcastOn به لاراول می‌گیم که اطلاعات این رخداد روی کدوم کانال(ها) باید جریان داشته باشه و در حال حاضر از یک کانال عمومی استفاده کردیم که در مرحله قبلی درون فایل broadcast.php اون رو ایجاد کرده بودیم.public function broadcastOn(): array { return [ // new PrivateChannel('channel-name'), new Channel('test-channel') ]; }حالا که کانال ارتباطی رو ایجاد کردیم و مشخص شده که چه اطلاعاتی قراره داخلش جریان پیدا کنه باید بریم سمت کلاینت و اونجا به این کانال ارتباطی متصل بشیم.ارتباط با وب‌سوکت سمت کلاینتهمونطور که قبلا هم گفتم برای استفاده از وب‌سوکت‌ها در سمت کلاینت می‌تونیم از کتابخانه Laravel Echo استفاده کنیم که قابلیت‌های کافی برای این کار رو داره. البته شما می‌تونید از هر کتابخونه دیگه‌ای هم برای این کار استفاده کنید. با استفاده از دستور زیر می‌تونید کتابخونه‌های مورد نیاز رو نصب کنید.$ npm install --save-dev laravel-echo pusher-jsحالا باید این کتابخونه‌ها رو به بخش فرانت پروژه اضافه کنیم و تنظیمات اولیه رو روشون انجام بدیم.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, cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1', wsHost: import.meta.env.VITE_PUSHER_HOST wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80, wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443, forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https', enabledTransports: ['ws', 'wss'], });اگر از vite برای bundle کردن فایل‌های پروژه استفاده کرده باشید می‌تونید با استفاده از متغیرهای تعریف شده در فایل env استفاده کنید ولی در هرصورت من مقادیر مورد نیاز رو یک‌بار دیگه توضیح می‌دم.کلید (key): همون کلید یکتایی که در بخش قبلی در اولین مرحله برای وب‌سوکت سرور ایجاد کردیم و هم در فایل websockets.php و هم فایل broadcasting.php در دایرکتوری config قرارش دادیم.هاست (wsHost): آدرس دسترسی وب‌سوکت‌سرورپورت (wsPort): پورت دسترسی به وب‌سوکت‌سروردر این مرحله باید در کانال وب‌سوکت که در سرور ایجادش گردیم subscribe کنیم یا در اصطلاح عضو بشیم.همچنین باید برای اون رخدادی که قراره توی کانال اطلاعات رو جریان بده گوش بزنگ (listen) باشیمبرای این کار می‌تونید دستورات زیر رو در صفحه اجرا کنید:Echo.channel('test-channel') .listen('TestWebsocketEvent', (e) => { console.log(e); }) .error(error => { console.log('channel error', error); }); در این مرحله اگر کلاس رخدادی که در لاراول ایجاد کرده بودیم رو اجرای کنید، خصوصیات عمومی کلاس (public properties) به داخل کانال ارتباطی جریان پیدا می‌کنن. البته به‌خاطر داشته باشید که برای این‌کار باید دستور مربوط به اجرای صف (queue)ها رو با مشخصات مورد نظر خودتون به شکل زیر در لاراول اجرا کنید.$ php artisan queue:workنمایش نوتیفیکیشن سمت فرانتبرای نمایش نوتیفیکیشن سمت کلاینت می‌تونید بعد از کسب اجازه از کاربر منتظر دریافت اطلاعات از کانال ارتباطی باشید. برای این‌کار می‌تونید از قطعه کد زیر استفاده کنید.function getNotificationsPermission() { Notification.requestPermission() .then((permission) => { if (permission === "granted") { Echo.channel(`test-channel`) .listen('TestWebsocketEvent', (e) => { const title = e.data.title; const icon = e.data.icon; const body = e.data.message; const notification = new Notification(title, {body, icon}); notification. = function () { window.parent.focus(); notification.close(); } }) .error(error => console.log('channel error', error)); } }); } window.addEventListener('load', () => getNotificationsPermission())حالا اگر رخدادی که در سمت سرور ساخته بودیم اجرا بشه، اطلاعات اون به‌صورت نوتیفیکیشن سمت کاربر نمایش داده میشه.در این بخش تونستیم بوسیله وب‌سوکت‌ها یک کانال ارتباطی ایجاد کنیم و با استفاده از یک رخداد، اطلاعات موردنظرمون رو در داخل اون جریان بدیم. همچنین در سمت فرانت با استفاده از کتابخونه Laravel Echo در اون کانال ارتباطی ثبت‌نام کردیم و اطلاعات ارسال شده رو دریافت کردیم. در بخش بعدی با انواع کانال‌های عمومی و خصوصی بیشتر آشنا می‌شیم و از قابلیت‌های کتابخونه Laravel Echo برای ساخت یک چت‌روم استفاده می‌کنیم.حتما اگر سوالی دارید یا ابهام و اشتباهی در مطلبی که نوشتم وجود داره از طریق بخش نظرات با من در ارتباط باشید.استفاده از محتوای مطلبی که نوشتم کاملا آزاد و رایگانه و می‌تونید به دلخواه خودتون با هر نامی اون رو منتشر کنید.

پیاده‌سازی وب‌سوکت‌ها با لاراول

محسن میرحسینی — Sat, 04 Nov 2023 13:49:59 +0330

برای یه مدت طولانی در تلاش بودم که بتونم برای کاربران وب‌سایت‌ها و وب‌اپلیکیشن‌هایی که پیاده‌سازی کردم «وب‌پوش نوتیفیکیشن» بفرستم. البته کار سختی نیست اگر بخوایم از سرویس‌های مخصوص این کار مثل فایربیس گوگل، ‌Pusher و نمونه ایرانی اون پوشه استفاده کنیم. ولی من نیازهای بیشتری داشتم که می‌خواستم با استفاده از وب‌سوکت‌ها برطرفشون کنم. پس دست‌به‌کار شدم و دنبال راهکار مناسب این کار گشتم و به نتایج خوبی هم رسیدم که می‌خوام با شما در میون بزارم.با توجه به گستردگی موضوع مورد بحثمون یعنی وب‌سوکت‌ها، مجموع مواردی که می‌خوام در موردشون صحبت کنم نیاز به مقالات بیشتری داره که سعی می‌کنم در فواصل کوتاهی اون‌ها رو بنویسم و در این‌جا منتشر کنم. برای استفاده از این مطلب باید با زبان برنامه‌نویسی ‌php و فریم‌ورک محبوبش لاراول در حد حرفه‌ای کار کرده‌باشید و همچنین این نکته رو درنظر داشته باشید که چون استفاده از وب‌سوکت‌ها در سمت مرورگر کاربر هم اتفاق می‌افته باید با زبان جاوااسکریپت هم آشنایی کافی داشته‌باشید.با معرفی و راه‌اندازی اولیه وب‌سوکت‌ها شروع می‌کنیم و به عنوان اولین مورداستفاده، وب‌پوش‌نوتیفیکیشن‌ها و روش ارسالشون رو بررسی می‌کنیم.اما اینکه وب‌پوش نوتیفیکیشن دقیقا چیه و چه کاربردی داره رو حتما به خوبی می‌دونید. من می‌خوام بهتون بگم این وب‌پوش‌نوتیفیکیشن‌ها که اسمشون خیلی طولانیه و از این به بعد به‌اختصار بهشون نوتیفیکشن می‌گیم از چه طریقی برای کاربران ارسال می‌شن.وب سوکت چیست؟برای تعریف وب‌سوکت از ویکی‌پدیای انگلیسی کمک می‌گیرم.وب‌سوکت یک پروتکل ارتباطی کامپیوتری است که کانال های ارتباطی دو طرفه همزمان را از طریق یک اتصال شبکه (tcp) فراهم می کند.متوجه نکته خاصی که در همین یک پاراگراف وجود داره شدین؟ به‌طور کلی در محیط وب، کاربران با مراجعه به یک آدرس درخواستشون رو برای ما ارسال می‌کنن و برخی اوقات اطلاعاتی هم همراه این درخواست به دستمون می‌رسه. ولی وقتی بین مرورگر کاربر و سرور یک سوکت باز باشه شما می‌تونید با کاربران ارتباط دوطرفه داشته باشید. یعنی بدون این‌که درخواستی از سوی کاربر به سمت سرور بیاد، اطلاعات مورد نظرتون رو براش ارسال کنید. این اطلاعات می‌تونه قیمت و موجودی بروزشده محصولات، مطالب جدید وب‌لاگ، آمار بازدیدکنندگان سایت، پیام‌های چت‌روم و یا محتویات یک نوتیفیکیشن باشه.برای برقراری این ارتباط دو‌طرفه به‌جز اینکه باید در سمت کلاینت درخواست بازشدن ارتباط رو به‌همراه مقداری اطلاعات شناسایی برای سرور بفرستید، باید یک وب‌سوکت سرور هم راه‌اندازی کنید تا این ارتباط دوطرفه تکمیل بشه و دقیقا در این قسمت کار نیاز داریم که از یک سرویس‌دهنده مثل فایربیس استفاده کنیم. بعد از برقراری ارتباط، باید برای ارسال اطلاعات به کاربر درخواستتون رو به وب‌سوکت سرور ارسال کنید و ازش بخواید که اطلاعات رو در کانال ارتباطی که با کاربر دارید ارسال کنه و در سمت کلاینت اطلاعات رو دریافت کنید.لاراول وب‌سوکت‌سروراول از همه بگم این عبارت وب‌سوکت سرور رو از خودم در آوردم و نمی‌دونم از نظر فنی درسته یا نه. از اونجایی که هدفمون از نوشتن این مطلب ارسال نوتیفیکیشن بدون استفاده از سرویس‌دهنده‌های دیگه است باید سرویس‌دهنده اختصاصی خودمون رو پیاده‌سازی کنیم. خیالتون رو راحت کنم که اگر پکیجی که در ادامه معرفی می‌کنم نبود، راه‌اندازی یک سرویس‌دهنده یا به قول خودمون وب‌سوکت سرور اصلا کار ساده‌ای نیست. ولی خوب خوشبختانه این کتابخونه هست تا ما به راحتی از پس این مشکل بربیایم.کتابخانه Laravel Websockets در واقع سرویس‌دهنده Pusher رو در داخل پروژه خودتون شبیه‌سازی می‌کنه و شما از هر کتابخانه سمت کلاینت که با pusher کار می‌کنه می‌تونید برای برقراری ارتباط استفاده کنید که البته پیشنهاد من Laravel Echo است که به وقتش باهاش آشنا می‌شیم.مطمئنم که در این مرحله همه شما پروژه لاراولی خودتون رو راه‌اندازی کردین و حالا وقتشه که بریم سراغ نصب کتابخانه با استفاده از کامپوزرcomposer require beyondcode/laravel-websocketsحالا با استفاده از دستور زیر به کتابخونه اجازه می‌دیم که فایل‌های مورد نیاز خودش شامل فایل تنظیمات و یک فایل میگریشن که برای ذخیره اطلاعات استفاده می‌شه در داخل پروژه ذخیره کنه.php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"و با استفاده از دستور زیر میگریشن‌ها رو اجرا می‌کنیمphp artisan migrate وقتشه که بریم سراغ تنظیمات کتابخونه که بعد از اون بتونیم وب‌سوکت سرور رو راه‌اندازی کنیماگر فایل websockets.php که حالا در دایرکتوری config قرارداره رو باز کنید، می‌تونید قسمت‌های مختلف تنظیمات این کتابخونه رو ببینید. به‌نظرمن و برای شروع فقط دوتا از این آیتم‌‌ها رو باید بشناسیم که در ادامه بهتون می‌گم.اولی یک آرایه به نام dashboard که فقط یک سطر به اسم port داخلش وجود داره و مقدار اون در واقع پورتی هست که قراره سرور روی اون اجرا بشهگزینه دوم هم یک آرایه به نام app که هر سطرش آرایه‌ای از اطلاعات مربوط به یکی از وب‌سایت‌ها یا اپلیکیشن‌های شماست که قراره با این سرور ارتباط داشته باشن. در واقع این سرور قابلیت راه‌اندازی چندین کانال ارتباطی رو داره. هر کدوم از این کانال‌ها (یا اپلیکیشن‌ها) یک شناسه یکتا نیاز دارن که در خونه id ذخیره میشه و همچنین یک اسم، یک کلید و یک رمز احتیاج دارن که به ترتیب در خونه‌های name, key, secret ذخیره میشن. از اونجایی که این سرور قراره جایگزین سرویس‌دهنده pusher باشه میتونید از متغیرها داخل فایل env که به‌طور پیش‌فرض هنگام نصب لاراول اونجا هستن و با پیشوند pusher_ شروع میشن استفاده کنید. این که چه مقادیری برای این متغیرها انتخاب می‌کنید اهمیتی نداره و فقط مهمه که برای هر اپلیکیشن یکتا باشن و قبلا ازشون استفاده نشده باشه و همچنین با متغیرهایی که در مرحله بعدی توضیح می‌دم یکی باشنخوب مجددا میگم چون این کتابخونه قراره جایگزین سرویس‌دهنده pusher باید کتابخونه pusher مخصوص زبان php رو هم به پروژه ضافه کنیم که با دستور زیر به سادگی انجام میشهcomposer require pusher/pusher-php-serverخوب در حال حاضر دو تا کار اساسی دیگه هم باید انجام بشهمورد اول اینکه داخل فایل env مقدار متغیر زیر رو تنظیم کنید. با این‌کار به لاراول می‌فهمونید که می‌خواید از pusher برای ارسال و دریافت اطلاعات در وب‌سوکت‌ها استفاده کنید.BROADCAST_DRIVER=pusherمورد دوم هم انجام تنظیمات مربوط به سرویس‌دهنده pusher در لاراوله که چون ما خودمون این سرور رو راه‌اندازی کردیم همون تنظیمات قبلی رو برای id, name, key و secret قرار می‌دیم و فقط آدرس و پورت دسترسی به سرویس‌دهنده رو بهش اضافه می‌کنیم. این موارد داخل فایل broadcasting.php در دایرکتوری config و در قسمت pusher قرار داره که باید به شکل زیر تنظیم بشه'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' ], ],تا الان تمامی تنظیمات لازم برای راه‌اندازی وب‌سوکت‌سرور رو انجام دادیم و با استفاده از دستور زیر می‌تونیم درخواست شروع به‌کار سرور رو برای لاراول ارسال کنیم.php artisan websockets:serveدر این بخش تونستیم با استفاده از کتابخونه Laravel Websockets یک سرویس‌دهنده مشابه pusher رو در اپلیکشین لاراولی خودمون راه‌اندازی کنیم. می‌دونم هنوز هیچ استفاده‌ای از این وب‌سوکت‌سرور نکردیم ولی در بخش بعدی به طور کامل شرح می‌دم که چطور یک کانال ارتباطی ایجاد کنیم و در سمت کلاینت بوسیله کتابخونه Laravel Echo به اون کانال ارتباطی متصل بشیم. پس در بخش بعدی منتظرتون هستمحتما اگر سوالی دارید یا ابهام و اشتباهی در مطلبی که نوشتم وجود داره از طریق بخش نظرات با من در ارتباط باشید.استفاده از محتوای مطلبی که نوشتم کاملا آزاد و رایگانه و می‌تونید به دلخواه خودتون با هر نامی اون رو منتشر کنید.

چرا من عاشق Inertia.js شدم؟

محسن میرحسینی — Tue, 20 Apr 2021 11:05:02 +0430

چند سالی میشه که به عنوان یک فول استک برای وب برنامه نویسی میکنم. از لاراول به عنوان بک اند پروژه هام و از Vue.js برای پیاده سازی فرانت اند استفاده میکنم. استفاده از Vue.js کمک خیلی زیادی برای پیاده سازی SPA ها به من کرده و باوجود اینکه آبم با جاوااسکریپت توی یک جوی نمیره ولی تونستم به خوبی ازش استفاده کنم. ولی ارتباط با بک اند بوسیله api و axios و ... دردسرهای خودش رو داره. حدودا چندماه پیش بود که وقتی پروژه جدید لاراول رو ایجاد کردم و میخواستم از Jetstream برای پیاده سازی ساز و کار ورود و مدیریت کاربران استفاده کنم متوجه یک اسم عجیب و غریب در فایل package.json شدم. Inertia.js یک کتابخانه جاوااسکریپت که به معنی واقعی کلمه به عنوان یک مبدل یا بقول مستندات خودشون چسب بین بک اند و فرانت اند عمل میکنه.در این مطلب قصد دارم کتابخانه Inertia.js رو معرفی کنم و در مورد سادگی استفاده از اون و همچنین قابلیت های فوق العادش صحبت کنم. خبری از آموزش و کد نویسی نیست ولی باید آشنایی کلی با مفاهیم وب، SPA، فرانت اند و بک اند، فراخونی api ها و ... داشته باشین تا این مطلب به دردتون بخوره.ببینیم Inertia.js چی هست؟خود من از وقتی با لاراول آشنا شدم و البته قبل از اون شیوه کارم به این شکل بود که اطلاعات مورد نیاز رو از پایگاه داده دریافت میکردم، پردازش لازم رو انجام میدادم و در نهایت به وسیله فایل های ویو به کاربر نمایششون میدادم. این ساز و کار رو تمام برنامه نویسان چه با لاراول، چه با Ruby on Rails و چه با Django میدونن و ازش استفاده میکنن. به مراحلی که گفتم تعریف route ها رو هم اضافه کنید. ولی وقتی صحبت از SPA میشه شرایط از یه جایی به بعد یه مقدار فرق میکنه،‌ در واقع اطلاعاتی که از دیتابیس دریافت شده رو از طریق کنترلر باید تبدیل به یک رشته json کنیم تا توسط درخواست ajax که از طرف SPA اومده قابل دریافت باشه. درون خود فریم ورک جاواسکریپتی که برای پیاده سازی ساز و کار SPA ازش استفاده کردیم هم باید در ابتدا route های مورد نیازمون رو تعریف کنیم و بوسیله axios یا کتابخونه های مشابه درخواست ها رو برای بک اند بفرستیم و پاسخ رو دریافت کنیم. Inertia.js به ما کمک میکنه که این دو بخش رو بهم دیگه بچسبونیم. کافیه اطلاعات دریافتی از دیتابیس رو در کنترلر پردازش کنید و بقیه رو به Inertia.js بسپارید تا داخل کامپوننت جاوااسکریپت اطلاعات رو بهتون تحویل بده. لازم نیست route ها رو دوباره تعریف کنید، لازم نیست نگران تبدیل اطلاعات به json باشید، لازم نیست نگران اعتبارسنجی کاربر باشید، خطاهای ولیدیشن به خوبی پردازش میشن و لازم نیست حتی نگران بروزرسانی state ها باشید. تمام پیچیدگی ها رو به Inertia.js بسپرید.چرا باید از Inertia.js استفاده کنیم؟پیچیدگی های SPA: یکی از مشکلات برنامه نویسها برای پیاده سازی SPA ها پیچیدگی مواجه شدن با مدیریت state ها، تعریف route ها، اعتبارسنجی کاربران و ... است که همه اونها توسط Inertia.js مدیریت میشه.پیاده سازی api ها: وقتی از Inertia.js استفاده میکنید نیازی نیست نگران REST یا GraphQL باشید. Inertia.js بهتون کمک میکنه به همون شکل سنتی اطلاعات رو از طریق فریم ورک بک اند برای فرانت ارسال کنید. به راحتی با استفاده از کامپوننت به جای میتونید یک درخواست عادی رو به یک درخواست ajax تبدیل کنید و تمام. بقیه کارها رو به Inertia.js بسپرید. مشکلات مرورگرها: وقتی از Inertia.js استفاده میکنید خیلی از مشکلاتی که هنگام پیاده سازی SPA ها با مرورگر دارید بوسیله سرویس های داخلی Inertia.js حل میشه. مشکلاتی مثل: مدیریت حافظه مرورگر: بوسیله preserveState میتونید مقادیر state های هر کامپوننت رو نگهداری کنید تا در صورتی که کاربر به صفحات قبلی و بعد رفت آمد کرد اطلاعات از دست نره و یا میتونید از preserveScroll استفاده کنید و موقعیت اسکرال صفحه رو برای کاربر حفظ کنید.نشانگر بارگزاری صفحه: از اونجایی که درخواست های Inertia.js در واقع از نوع ajax هستند کتابخانه فوق العاده ای به نام NProgress همراه Inertia.js هست که به شکل یک نوار رنگی باریک در بالای پنجره مرورگر میزان بارگزاری صفحات رو به کاربر نمایش میده.بارگزاری و نسخه بندی فایل ها: Inertia.js حتی حواسش به این مساله هست که اگر فایل های css یا js شما تغییر کردن به جای درخواست به صورت ajax یه درخواست کامل به صورت بارگزاری مجدد صفحه انجام بده تا از نسخه جدید فایل ها استفاده کنه.استفاده از فرم ها: به جای استفاده از فرم های معمولی که باعث میشن صفحه به طور کامل بارگزاری بشه می تونید از فرم های Inertia.js استفاده کنید. به سادگی اطلاعات مورد نیاز رو درون فرم ذخیره میکنید و Inertia.js وظیفه ارسال اطلاعات به سرور رو بر عهده میگیره. از قابلیت های فوق العاده ای هم برخورداره مثل مدیریت خطاها، دریافت نتیجه ارسال اطلاعات به صورت onSuccess و و همچنین اطلاع از میزان ارسال اطلاعات بوسیله form.progress و form.progress.percentageورود کاربر و بررسی سطوح دسترسی: وقتی از Inertia.js استفاده میکنید لازم نیست ساز و کار جداگانه ای برای ورود کاربر پیاده سازی کنید. دقیقا همون ساز و کاری که به همراه فریم ورک بک اند اومده به راحتی قابل استفاده است. در واقع چون از طریق کنترلرها مستقیما با Inertia.js در ارتباط هستید همون ساز و کار session ها برای مدیریت ورود کاربران استفاده میشه. همینطور در خصوص مدیریت سطح دسترسی کاربران میتونید عملیات مجاز توسط کاربر رو به شکل props به کامپوننت ارسال کنید و اونجا ازش استفاده کنید.چه کسانی میتونن از Inertia.js استفاده کنن؟خوشبختانه Inertia.js چندین فریم ورک رو به عنوان بک اند و فرانت اند پشتیبانی میکنه. از بین فریم ورک های بک اند Inertia.js به طور رسمی از لاراول و Ruby on Rails پشتیبانی میکنه و از بین فریم ورک های فرانت اند هم در حال حاضر Vue2، Vue3، React.js و Svelte رو پیشتبانی میکنه. البته چندین کتابخونه هم به طور غیر رسمی برای کار با Django، CakePHP، Symfony و Adonis ارائه شده که میتونید از اونها استفاده کنید.در این مطلب سعی کردم فقط Inertia.js رو بهتون معرفی کنم. حتم دارم مثل من در افزایش سرعت پیاده سازی برنامه هاتون تاثیر زیادی داره. به زودی حتما مطلب دیگه ای مینوسم و سعی میکنم به بهترین شکل در خصوص روش پیاده سازی یک پروژه با بک اند لاراول و فرانت اند Vue.js بوسیله Inertia.js و استفاده از قابلیت های اون براتون صحبت کنم.

پیاده سازی نوتیفیکشن ها با لارول - قسمت دوم

محسن میرحسینی — Sun, 18 Apr 2021 12:09:47 +0430

پیاده سازی نوتیفیکیشن ها با لاراول

محسن میرحسینی — Tue, 06 Oct 2020 08:15:06 +0330