با سلام به همه دوستان من علیرضا شهابی هستم چند سالیه که برنامه نویسی رو به صورت حرفه ای دنبال میکنم و خودم رو یک برنامه نویس علاقمند به زبان Javascript میدونم و این پست درباره اینکه چطوری بتونیم Tab هایی که از یک React Application باز میکنیم رو باهم همگام ( Synchronize ) کنیم.
پس مثل همیشه اگه نکته مثبت یا منفی توی پست هام میبینید حتما حتما کامنت کنید تا منم بتونم پیشرفت کنم و محتوای با کیفیت تری تولید کنم ?.
فقط لازمه که بدونید برای اجرای ریز به ریز موارد پایین نیاز دارین که هم یه دانشی از Hook ها و Protected Routes داشته باشی .
که البته من یک مقاله هم در زمینه ساخت Protected Route ها هم دارم که میتونی اول اون رو ازینجا بخونی و بعدش ادامه رو ازینجا داشته باشی ?.
خوب بخش اول صرفا یه معرفی ساده از خودم و این پست بود ، حالا بریم که یک وب اپلیکیشن توی React ایجاد کنیم که البته من از typescript به عنوان زبان استفاده میکنم ( اگه با این زبان آشنایی ندارین و بخوام یه تعریف ساده بکنم Javascript + Types )
- قبل اینکه بریم تو کار کد ممکنه برای شما سوال بشه که اصن Broadcast Channel چی هست ؟
+ به زبون ساده یک کانال ارتباطی بین Tab های Browser ( مرورگر ) شما میسازه ?.
- یا اینه که ، ینی چی Tab های ما باهم Synchronize ( همگام ) باشه ؟
+ ینی اطلاعات یا عمل هایی که ما روی یک Tab از وب اپلیکشنمون انجام میدیم روی بقیه Tab ها از همون اپلیکیشن هم صورت بگیره .
- یا این اصن به چه درد ما میخوره ؟
+ مثلا در نظر بگیر که یک پنل داری که وقتی از یکی از Tab هاش میای بیرون ( Logout ) از همه Tab ها خود به خود بیای بیرون ( واااااای خداااااا چقد خفنهههه ?)
حالا برای اینکه با این Broadcast Channel بیشتر آشنا بشیم توجه شمارو به این عکس زیر جلب میکنم :
همینطور که میبنید این Tab ( بخش های سبز رنگ ) های مختلف ما هستن و با تابع postMessage از طریق کانال ارتباطی که میسازیم ( بخش آبی رنگ ) میتونیم یک داده رو بین Tab هامون مخابره کنیم و با رخ داد ( event ) تابع میتونیم داده مورد نظرمون رو جا به جا کنیم ( حالا قشنگ کدش رو میبینم ?)
فقط نباید یادمون بره که این API رو میتونید توی بعضی از Browser ها استفاده کنید که من عکس یک لیست رو براتون آماده کردم .
خب حالا بریم قست دوست داشتی ینی دست به کد شدن ( بزن اون دست قشنگه روووو ?)
برای شروع ابتدا از دستور خط npx استفاده میکنم .
npx create-react-app "YOUR_APP_NAME" --typescript
بعدش باید react-router-dom رو نصب کنید .
yarn add react-router-dom @types/react-router-dom
علتی که از types@ استفاده میکنیم اینه که میخوایم تحت Typescript کد بزنیم. ( و البته میخوایم که صفحات مختلفی داشته باشیم و تا بتونیم یه دمو قشنگ تر از کاربردش ببینیم ) .
خوب با این شیوه پایه اپلیکیشن شما ایجاد شده ( و اینکه این اپ هم از Js و Typescript پشتیبانی میکنه ).
قسمت قشنگش اینکه شما برای استفاده ازین API نیاز به هیچ پکیچی نداری ( وااقعا ??)
تنها چیزی که نیاز داری بدونی اینه که اینطوری ازین API استفاده میکنن .
let channel = new window.BroadcastChannel("YOUR_CHANNEL_NAME")
به همین راحتی حالا اون کانال ارتباطی که ما میخوایم ساخته شده ولی چطوری میتونیم توی اپلیکیشن هایی که تحت چارچوب React میسازیم استفاده کنیم رو الان بتون میگم ( ?).
خب شروع کنیم ، اولین چیزی که شما برای این اپلیکیشن نیاز داری بدونی اینه که ما قراره یک اپلیکشن بسازیم که میتونی توش Login , Logout کنی و این Login و یا Logout کردن روی بقیه Tab هایی که اپلیکیشن شما توش بازه هم تاثیر میزاره و همه این ها با کمک Broadcast Channel و React - Router شدنیه .
ساختار اپ به این شکله که ما یک صفحه Home داریم و یک صفحه Admin که این صفحه Admin محافظت شده ( Protected ) هستش .
حالا ما میایم یک Hook که اسمش `useAuth` هست رو میسازیم و ازش توی کامپوننت `ProtectedRoute` استفاده میکنیم .
که این useAuth به ما سه تابع isLogged , Login و Logout رو بهمون برمیگردونه که ما صرفا از isLogged داخل ProtectedRoute استفاده میکنیم.
خوب اگه بخوایم یه نگاهی به ساختار کد useAuth هم بندازیم به این شکله :
و اگه بخوایم یه توضیحی بدیم تابع Login ما یک توکن توی localStrorage ما ذخیره میکنه و کاربر رو به صفحه Admin میبره و تابع Logout کل اطلاعات localStorage مارو پاک میکنه و بعدش مارو به صفحه اصلی میبره و isLogged یه تابعس که به ما میگه کاربر وارد شده یا خیر.
و خب الان می خوایم از این BroadcastChannel توی این Hook استفاده کنیم.
پس میایم و یک کانال ارتباطی میسازیم و بعدش ازون توی useAuth به این شکل استفاده میکنیم :
حالا تابع ما توی توابع Login , Logout یک پیام رو بین Tab های مختلف مخابره میکنه و میگه که کاربر در حال Login کردن و یا Logout شدنه .
حالا داستان اصلی اونجاست که ما تابع syncAllTabs رو نوشتیم که این تابع درواقع یک eventListener هستش که ما میتونیم روی هر Component که خواستیم ازش استفاده کنیم .
مثلا موقعی که پیام LOGIN بین همه Tab ها مخابره بشه این event LOGIN انگار فعال شده و ما میگیم که همه Tab ها سریع Login کنید و برای حالت LOGOUT هم به همین شکله .
و در انتها باید ازین syncAllTabs توی تابع useEffect کامپوننت اصلی ما اجرا بشه :
و حالا کافیه که ما توی یکی از Tab های وب اپلیکیشنمون عملیات Login یا Logout رو انجام بدیم و بعدش متوجه بشیم که توی همه Tab های وب اپلیکیشنمون این اتفاق میوفته ( واااای ?)
در انتها باید بگم اگر خیلی ریز به ریز و به جزییات براتون نزاشتم چون میخواستم هم زود تر بخونیش که حوصلت سر نره و هم اینکه صرفا بهت یک دید داده باشم تا بتونی مسئله رو خودت حل کنی و اعتماد به نفس بیشتری بدست بیاری و هم چنین از یادگیری لذت ببری .
و البته این مقاله بنظرم با یک ویدعو میتونه خیلی قشنگ تر باشه و درک بالاتری بهت بده ، خیلیم دوست دارم هرچه سریع تر یه ویدعو درباره این مقاله بزارم که مطمئن باش آخر همین پست اضافش میکنم.
فقط گفته باشم صرفا خوندن این مقاله کاری نمیتونه برات بکنه یادت نره که حتما دست به کد باشی ?.
اگر از خوندن این مقاله لذت بردی خیلی خوشحال میشم هم نظرتو بنویسی ( که با کدوم بخش یا چه ویژگی ازین مقاله حال کردی ) و هم اینکه به اشتراکش بزاری ممنون .
