ساخت اپلیکیشن فوتبال من تا قبل از شروع روز مسابقات عالی کار میکرد
ساخت یک اپلیکیشن فوتبال در ابتدا آسان به نظر میرسید.
قصد داشتم مسابقات را واکشی کنم، تیمها و نتایج را نمایش دهم و هر چند ثانیه یکبار اطلاعات را بهروزرسانی کنم. در مرحله تست، همه چیز خوب کار میکرد. از دو تب و چند مسابقه نمونه استفاده کردم. همه چیز درست به نظر میرسید.
سپس اولین روز مسابقات پرمشغله فرا رسید.
صدها کاربر همزمان اپلیکیشن را باز کردند. درخواستها با هم تداخل پیدا کردند. به نظر میرسید برخی نتایج به عقب برمیگردند. اپلیکیشن برای هر بازدیدکننده، همان دادهها را به صورت جداگانه واکشی میکرد.
یاد گرفتم که یک اپلیکیشن زنده (live) صرفاً یک وبسایت متصل به یک API نیست، بلکه یک سیستم همگامسازی دادهها است.
در اینجا اشتباهاتی که مرتکب شدم و نحوه رفع آنها را آوردهام:
از polling صرفاً در سمت کلاینت خودداری کنید در نسخه اول من، هر مرورگر هر پنج ثانیه یکبار درخواست داده میداد. ۱ کاربر = ۱۲ درخواست در دقیقه. ۱,۰۰۰ کاربر = ۱۲,۰۰۰ درخواست در دقیقه. بیشتر درخواستها دقیقاً همان دادههای یکسان را میخواستند.
از درخواستهای سمت سرور استفاده کنید من فراخوانیهای API را به سمت سرور منتقل کردم. این کار به شما کنترل روی موارد زیر را میدهد: • اعتبارنامههای API (API credentials) • کش کردن (Caching) • محدودسازی نرخ درخواست (Rate limiting) • مدیریت خطا (Error handling) • قالببندی پاسخ (Response formatting)
هرگز از کلیدها (keys) در کدهای سمت کلاینت استفاده نکنید. اگر کسی کلید شما را سرقت کند، این کار ناامن و پرهزینه خواهد بود.
ایجاد یک لایه نگاشت (mapping layer) من ارسال مستقیم دادههای خام API به کامپوننتهایم را متوقف کردم. اگر ارائهدهنده (provider) نام یک فیلد را تغییر میداد، رابط کاربری (UI) من از کار میافتاد. اکنون، ابتدا دادههای ارائهدهنده را به فرمت داخلی خودم نگاشت میکنم. این کار باعث پایداری رابط کاربری من میشود.
استفاده از Server Components برای سرعت بیشتر به جای نمایش صفحه در حال بارگذاری (loading screen)، مسابقات اولیه را در سمت سرور بارگذاری میکنم. کاربر بلافاصله محتوا را مشاهده میکند.
پیادهسازی polling هوشمند اگر مسابقهای در جریان نیست، اپلیکیشن نباید بهروزرسانی شود. من بررسیای اضافه کردم تا وقتی مسابقات تمام میشوند، polling متوقف شود. این کار منابع بسیار زیادی از سرور را ذخیره میکند.
رفع شرایط رقابتی (race conditions) گاهی اوقات درخواست B قبل از درخواست A پاسخ میدهد. این باعث میشود نتایج به نظر برسد که به عقب برمیگردند. من از یک
AbortControllerاستفاده میکنم تا درخواستهای قدیمی را قبل از شروع درخواستهای جدید لغو کنم.مدیریت مناسب خطاها اگر بهروزرسانی با شکست مواجه شد، صفحه خالی نشان ندهید. آخرین دادههای موفق را نمایش دهید. یک نتیجه ۱۵ ثانیه قدیمی بهتر از نبودِ نتیجه است.
یک نسخه دموی ساده فقط نیاز به نمایش دادهها دارد. یک محصول واقعی باید کش، امنیت و وضعیت (state) را مدیریت کند.
آیا تا به حال یک اپلیکیشن زنده ساختهاید؟ وقتی کاربران واقعی آمدند، چه چیزی از کار افتاد؟
منبع: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59