به سفر ما در دنیای پویا برنامه نویسی واکنشی خوش آمدید! این پارادایم جذاب همه چیز در مورد ساخت برنامه های کاربردی پاسخگو، انعطاف پذیر و سازگار است که بدون زحمت حجم عظیمی از داده ها را تقریباً بلافاصله مدیریت می کند.

تصور کنید برنامه‌ای بنویسید که باید فوراً به تغییرات واکنش نشان دهد - اعم از ورودی‌های کاربر، پیام‌های سایر سیستم‌ها یا فیدهای داده زنده. اینجاست که برنامه نویسی واکنشی می درخشد و آن را به سنگ بنای توسعه نرم افزار مدرن، به ویژه برای برنامه های وب و موبایل تبدیل می کند.

بیایید یک موازی ساده با زندگی روزمره ترسیم کنیم تا این مفهوم را به خانه نزدیک کنیم. ایستگاه اتوبوس را در نظر بگیرید، منظره ای آشنا که در آن مردم در صف ایستاده و منتظر سواری خود هستند. ورود هر اتوبوس یک رویداد است و واکنش مسافران - برای سوار شدن به اتوبوس - اقدامی است که توسط این رویداد آغاز می شود.

برنامه نویسی واکنشی نیز به همین صورت عمل می کند. این با جریان های داده (مانند برنامه زمانی اتوبوس های ورودی) و انتشار تغییرات (ورود اتوبوس جدید) سروکار دارد، و برنامه ها را قادر می سازد در زمان واقعی پاسخ دهند (همانطور که مسافران با سوار شدن به اتوبوس واکنش نشان می دهند). آشنا بنظر رسیدن؟

در این مقاله، با تمرکز بر اجرای آن با استفاده از جاوا اسکریپت/تایپ اسکریپت در محیط Node.js، به ماهیت برنامه نویسی واکنشی می پردازیم و در عین حال به یک زمینه جهانی که برای بسیاری از زبان ها و فریم ورک های برنامه نویسی اعمال می شود، توجه می کنیم.

ما با استفاده از زبان ساده و مثال های عملی، همه چیز را ساده و جذاب نگه می داریم. در پایان این راهنما، شما یک پایه محکم در مفاهیم برنامه نویسی واکنشی و تجربه عملی ایجاد یک سیستم اطلاع رسانی بلادرنگ خواهید داشت.

چه در این مفهوم تازه کار باشید و چه به دنبال اصلاح مهارت های خود هستید، این راهنما برای ابهام زدایی از برنامه نویسی واکنشی ساخته شده است و قدرت آن را در عمل به شما نشان می دهد. بیایید با هم این سفر هیجان انگیز را شروع کنیم!

آنچه را پوشش خواهیم داد:

درک جریان ها و قابل مشاهده ها

برنامه نویسی واکنشی در جاوا اسکریپت/تایپ اسکریپت و فراتر از آن

ساخت یک سیستم اعلان بلادرنگ با Node.js
- معرفی سیستم اطلاع رسانی
- راه اندازی پروژه: شروع به کار با Node.js و TypeScript
- نحوه پیاده سازی ویژگی های اصلی

بهترین شیوه ها و دام های رایج

نتیجه

منابع

درک جریان ها و قابل مشاهده ها

بیایید به قلب برنامه نویسی واکنشی شیرجه بزنیم: جریان ها و قابل مشاهده ها. این مفاهیم بلوک‌های سازنده برنامه‌های کاربردی واکنش‌گرا هستند که به آنها امکان می‌دهد داده‌ها را به صورت پویا و واکنش‌گرا پردازش کنند. برای درک اهمیت آنها، بیایید قیاس ایستگاه اتوبوس خود را دوباره مرور کنیم.

تصور کنید ایستگاه اتوبوس مجهز به نمایشگر دیجیتالی است که به‌روزرسانی‌های لحظه‌ای ورود، خروج و تأخیر اتوبوس را نشان می‌دهد. این نمایشگر دائماً داده‌های مربوط به اتوبوس‌ها را دریافت می‌کند - این جریان اطلاعات چیزی است که ما آن را «جریان» می‌نامیم. هر قطعه از داده های جدید (مانند ورود یک اتوبوس) می تواند به عنوان یک "رویداد" در این جریان دیده شود.

جریان ها: جریان داده ها

در برنامه نویسی، جریان مجموعه ای از داده های مداوم است که در طول زمان در دسترس قرار می گیرد. جریان‌ها می‌توانند هر چیزی باشند: حرکت ماوس، فشار دادن کلید، توییت‌ها یا حتی به‌روزرسانی‌های لحظه‌ای بازار سهام. آنها با نمایشگر دیجیتال ایستگاه اتوبوس که جریان مداومی از اطلاعات در مورد اتوبوس ها را دریافت می کند، تفاوت چندانی ندارند.

به طور خلاصه، یک جریان مجموعه ای از مقادیر است که در طول زمان تحت فشار قرار می گیرند، فاصله بین دو مقدار مختلف می تواند کنترل شود (جریان های برنامه ریزی شده) یا تصادفی (ما هرگز نمی دانیم چه زمانی یک نفر برای ما پیامی درست می فرستد؟). جریان ها می توانند سه چیز مختلف منتشر کنند: یک مقدار (از نوع خاصی)، یک خطا، یا یک سیگنال "تکمیل شده". بیایید به یک سیستم اعلان فکر کنیم، به عنوان مثال، از یک طرف ما یک کلاینت (برنامه موبایل، برنامه وب و غیره) داریم که در یک گروه WhatsApp مشترک شده است، هر زمان که یک پیام جدید در آن گروه وجود دارد، برنامه با ارسال یک پیام واکنش نشان می دهد. اعلان فشار به کاربر، اما ما هرگز نمی دانیم که این پیام ها چه زمانی می آیند.

شکل 1 زیر تصویری از آنچه را که می توان به عنوان جریان در نظر گرفت، نشان می دهد، جایی که پس از مدتی، مقدار می تواند تغییر کند، به هر مشتری که در جریان مشترک است اطلاع می دهد که مقدار جدیدی در دسترس است، و به مشتریان این امکان را می دهد که در هر زمانی که خواستند اشتراک خود را لغو کنند. خواستن

همانطور که در تصویر بالا می بینید، از لحظه ای که مشتری لغو اشتراک می کند، دریافت مقادیر جدید از جریان متوقف می شود.

مشاهده پذیرها: واکنش به داده ها

قابل مشاهده نوعی جریان است که می توانید مشاهده کنید و به شما امکان می دهد به داده های دریافتی گوش دهید و به آنها واکنش نشان دهید.

برای نشان دادن، صفحه نمایش دیجیتال در ایستگاه اتوبوس را به عنوان جریان در نظر بگیرید. همانطور که مشتاقانه منتظر می مانید و اطلاعات مربوط به ورود اتوبوس خود را تماشا می کنید، شبیه به یک قابل مشاهده هستید. هنگامی که ورود اتوبوس شما نمایش داده می شود (یک رویداد)، شما با آماده شدن برای سوار شدن به آن واکنش نشان می دهید.

مشاهدات با سه جنبه زیر مشخص می شوند:

چرخه حیات داده: قابل مشاهده یک نوع اولیه است که می تواند حاوی مقادیر صفر یا چندگانه باشد. این مقادیر در هر مدت زمانی تحت فشار قرار می گیرند و چرخه حیات جریان را تعیین می کنند.

قابل لغو: موارد قابل مشاهده را می توان در هر زمان لغو کرد. با اطلاع دادن به سازنده که دیگر نیازی به به‌روزرسانی ندارید، می‌توانید اشتراک یک قابل مشاهده را لغو کنید.

ارزیابی تنبل: قابل مشاهده ها تنبل هستند، به این معنی که تا زمانی که در آنها مشترک نشوید، هیچ عملی را انجام نمی دهند. به طور مشابه، آنها پس از لغو اشتراک، فعالیت خود را متوقف می کنند. این برخلاف Promises است که مشتاق هستند و باید هر بار که فراخوانی می شوند قبل از پردازش بیشتر حل و فصل شوند.

چرا آنها مهم هستند

جریان‌ها و مشاهده‌پذیرها در برنامه‌نویسی واکنشی بسیار مهم هستند، زیرا به برنامه‌ها اجازه می‌دهند تا داده‌هایی را که در طول زمان تغییر می‌کنند مدیریت کنند، درست مانند اطلاعاتی که دائماً به‌روزرسانی می‌شوند در نمایشگر ایستگاه اتوبوس.

آنها این امکان را برای برنامه‌ها فراهم می‌کنند که به داده‌های جدید، از کلیک کاربر روی دکمه گرفته تا دریافت پیام‌ها از یک سرویس وب، فوراً واکنش نشان دهند.

اپراتورها

جریان ها به تنهایی مفید هستند زیرا به چندین ناظر اجازه می دهند برای به روز رسانی های خود در آن مشترک شوند. وقتی می‌خواهید جریانی را دستکاری کنید، همه چیز لذت‌بخش‌تر می‌شود. جریان ها را می توان با استفاده از عملگرها تبدیل و حتی ترکیب کرد.

برای مثال خود RxJS شامل صدها عملگر است که از روش‌های شناخته شده آرایه‌های جاوا اسکریپت الهام گرفته شده‌اند، مانند نقشه، فیلتر، کاهش و غیره.

عملگرها به سادگی توابعی هستند که یک قابل مشاهده را می گیرند و یک قابل مشاهده را با برخی عملیات اعمال شده بر روی آن برمی گرداند.

بیایید به دو عملیات ضروری نگاه کنیم: نقشه برداری و فیلتر کردن . به انیمیشن زیر دقت کنید:

در شکل 2 بالا، برای عملگر map ، زمانی که مشاهده پذیر ورودی یک مقدار منتشر می کند، توسط تابع isEven پردازش می شود و مقدار حاصل به عنوان یک مقدار برای مشاهده خروجی منتشر می شود.

برای اپراتور filter ، هنگامی که جریان ورودی یک مقدار را منتشر می کند، به همان تابع داده می شود، که در صورت برآورده شدن شرایط، مقداری را برای خروجی قابل مشاهده منتشر می کند. در غیر این صورت نادیده گرفته می شود. ورودی یک قابل مشاهده است و عملگر قابل مشاهده دیگری را برمی گرداند.

برنامه نویسی واکنشی در جاوا اسکریپت/تایپ اسکریپت و فراتر از آن

در دنیای جاوا اسکریپت و تایپ اسکریپت، به‌ویژه در محیط Node.js، جریان‌ها و مشاهده‌پذیرها هم با ظرافت و هم کارآمد ساخته می‌شوند.

Node.js پشتیبانی داخلی برای استریم ها ارائه می دهد و قابلیت های قدرتمند مدیریت داده را برای برنامه های سمت سرور فراهم می کند. علاوه بر این، کتابخانه‌ها و چارچوب‌هایی که بر روی الگوی برنامه‌نویسی واکنش‌گرا ساخته شده‌اند، مانند RxJS برای جاوا اسکریپت/تایپ اسکریپت، ابزارهای قدرتمندی را برای ایجاد برنامه‌های کاربردی واکنش‌پذیر در اختیار توسعه‌دهندگان قرار می‌دهند.

به عنوان مثال، RxJS یک کتابخانه است که به طور خاص برای برنامه نویسی واکنشی در جاوا اسکریپت/تایپ اسکریپت طراحی شده است. این مجموعه گسترده ای از عملگرها را برای ایجاد، ترکیب و دستکاری قابل مشاهده ها فراهم می کند. با RxJS، توسعه دهندگان به لطف API بصری و مجموعه گسترده اپراتور آن می توانند به راحتی سناریوهای جریان داده پیچیده را مدیریت کنند.

علاوه بر این، برنامه نویسی واکنشی به JavaScript/TypeScript و Node.js محدود نمی شود. بسیاری از زبان های برنامه نویسی دیگر پیاده سازی های خود را از پارادایم ها و کتابخانه های برنامه نویسی واکنشی دارند. به عنوان مثال، زبان هایی مانند جاوا دارای RxJava، Kotlin دارای RxKotlin، و Swift دارای RxSwift هستند. این کتابخانه ها عملکردهای مشابهی را با RxJS ارائه می دهند اما برای اکوسیستم زبان مربوطه خود طراحی شده اند.

صرف نظر از زبان برنامه نویسی که استفاده می کنید، اصول برنامه نویسی واکنشی همچنان قابل اجرا هستند. چه در جاوا اسکریپت، جاوا، کاتلین، سوئیفت یا هر زبان دیگری کار می‌کنید، می‌توانید از برنامه‌نویسی واکنش‌گرا برای ساخت برنامه‌های واکنش‌گرا، مقیاس‌پذیر و قابل نگهداری استفاده کنید.

مفاهیم جریان‌ها، قابل مشاهده‌ها و عملگرها از موانع زبانی فراتر می‌روند و ابزار قدرتمندی را برای مدیریت جریان‌های داده ناهمزمان و ایجاد تجربه‌های پویا برای کاربران در اختیار توسعه‌دهندگان قرار می‌دهند.

همه اش را بگذار کنار هم

تصور کنید که ما در حال توسعه یک ویژگی برای برنامه ایستگاه اتوبوس خود هستیم که به کاربران هنگام نزدیک شدن اتوبوس آنها اطلاع می دهد. با استفاده از RxJS، می‌توانیم یک مشاهده‌پذیر ایجاد کنیم که جریان داده‌های ورود اتوبوس را نشان می‌دهد. هر بار که وضعیت اتوبوس به‌روزرسانی می‌شود - مثلاً وقتی 10 دقیقه با آن فاصله دارد - قابل مشاهده یک رویداد را منتشر می‌کند. برنامه ما می تواند در این رویدادها مشترک شود (آنها را مشاهده کند) و با ارسال یک اعلان به کاربر واکنش نشان دهد: "اتوبوس شما در راه است!"

این سناریو قدرت برنامه نویسی واکنشی را با جریان ها و قابل مشاهده ها نشان می دهد. نه تنها امکان پاسخگویی در زمان واقعی را فراهم می کند، بلکه مدیریت جریان داده های ناهمزمان را نیز ساده می کند و کد ما را تمیزتر و شهودی تر می کند.

این درک اساسی از جریان ها و مشاهده پذیرها اولین قدم شما به دنیای برنامه نویسی واکنشی است. همانطور که به جلو می رویم، صفحه نمایش دیجیتال ایستگاه اتوبوس و نحوه به روز رسانی مداوم آن را به خاطر بسپارید. برنامه های ما، دقیقاً مانند یک مسافر حواسش، باید آماده پاسخگویی به این به روز رسانی ها تا حد امکان موثر باشند.

با RxJS و مفاهیم استریم‌ها و قابل مشاهده‌ها، ما برای مقابله با این چالش‌ها مجهز شده‌ایم و برنامه‌هایی ایجاد می‌کنیم که نه تنها از نظر پاسخگویی و عملکرد، انتظارات کاربر را برآورده می‌کنند، بلکه از آن فراتر می‌روند.

درگیر شدن با این مفاهیم فقط در مورد درک نظریه نیست - بلکه در مورد دیدن پتانسیل بسیار زیاد آنها برای توسعه برنامه های کاربردی پویا و کاربر محور است. همانطور که ما عمیق‌تر به مثال‌های عملی می‌رویم، قیاس ایستگاه اتوبوس را در ذهن داشته باشید - این به شما کمک می‌کند جنبه‌های پیچیده‌تر برنامه‌نویسی واکنش‌گرا را به روشی مرتبط و ساده درک کنید.

ساخت یک سیستم اعلان بلادرنگ با Node.js

در این بخش، سفری را برای ایجاد یک سیستم اطلاع رسانی بلادرنگ با استفاده از Node.js آغاز خواهیم کرد. سناریویی را تصور کنید که در آن کاربران یک برنامه وب نیاز به دریافت به‌روزرسانی‌های فوری در مورد رویدادهای مختلف مانند پیام‌های جدید، اعلان‌ها یا هشدارهای سیستم دارند.

هدف ما ساختن یک سیستم قوی و کارآمد است که این اعلان‌ها را به صورت یکپارچه در زمان واقعی ارائه کند.

معرفی سیستم اطلاع رسانی

قبل از پرداختن به پیاده سازی فنی، بیایید نحوه عملکرد سیستم اعلان بلادرنگ ما را تصور کنیم. کاربران از طریق یک رابط وب با سیستم تعامل خواهند داشت، جایی که می توانند بر اساس ترجیحات خود در انواع مختلف اعلان ها مشترک شوند.

این اعلان‌ها می‌تواند شامل پیام‌های جدید در اتاق چت، به‌روزرسانی اسناد مشترک یا هشدار برای رویدادهای مهم سیستم باشد. ما سعی خواهیم کرد آن را بسیار ساده نگه داریم، زیرا هدف واقعاً شروع با پارادایم است.

تعاملات کلیدی با سیستم

اشتراک کاربر: کاربران این گزینه را خواهند داشت که در انواع خاصی از اعلان‌ها مشترک شوند و تجربه خود را مطابق با اولویت‌ها و نیازهای خود تنظیم کنند.

تحویل بی‌درنگ: پس از عضویت، کاربران بلافاصله اعلان‌ها را دریافت خواهند کرد و از ارتباط به موقع و پاسخگویی اطمینان حاصل می‌کنند.

اعلان‌های کاربردی: اعلان‌ها قابل اجرا خواهند بود و به کاربران اجازه می‌دهند مستقیماً از رابط با آنها تعامل داشته باشند. به عنوان مثال، با کلیک بر روی یک اعلان ممکن است اتاق گفتگو یا سند مربوطه باز شود.

با در نظر گرفتن این چشم انداز، اجازه دهید پروژه Node.js خود را راه اندازی کنیم و پایه و اساس سیستم اطلاع رسانی بلادرنگ خود را بسازیم. ما با پیکربندی محیط پروژه و نصب وابستگی‌های لازم، از جمله RxJS، برای تقویت پیاده‌سازی برنامه‌نویسی واکنش‌گرا شروع می‌کنیم.

راه اندازی پروژه: شروع به کار با Node.js و TypeScript

قبل از اینکه بتوانیم سیستم اطلاع رسانی بلادرنگ خود را پیاده سازی کنیم، باید محیط پروژه Node.js خود را راه اندازی کنیم. این شامل پیکربندی TypeScript برای تحلیل نوع پیشرفته و فعال کردن RxJS برای مهار قدرت برنامه نویسی واکنشی است.

بیایید مراحل را طی کنیم تا پروژه خود را راه اندازی و اجرا کنیم:

مرحله شماره 1 - یک پروژه Node.js جدید را راه اندازی کنید

با ایجاد یک دایرکتوری جدید برای پروژه خود شروع کنید و به آن بروید:

 $ mkdir real-time-notification-system $ cd real-time-notification-system

سپس، یک پروژه Node.js جدید را با استفاده از npm یا yarn مقداردهی کنید:

 $ npm init -y

یا

 $ yarn init -y

مرحله 2 – Dependencies را نصب کنید

حالا بیایید وابستگی های لازم را برای پروژه خود نصب کنیم. ما به TypeScript برای تحلیل و کامپایل کردن نوع و همچنین RxJS برای برنامه نویسی واکنشی نیاز داریم:

 $ npm install typescript rxjs

یا

 $ yarn add typescript rxjs

مرحله 3 - پیکربندی cript TypeS

یک فایل tsconfig.json در ریشه پروژه خود برای پیکربندی TypeScript ایجاد کنید:

 { "compilerOptions": { "target": "ESNext", "module": "CommonJS", "outDir": "./dist", "strict": true}, "include": ["src/**/*"] }

این پیکربندی هدف کامپایل را روی ESNext تنظیم می‌کند، تحلیل دقیق نوع را فعال می‌کند و فهرست خروجی را برای فایل‌های TypeScript کامپایل شده مشخص می‌کند.

مرحله چهارم - ساختار پروژه را تنظیم کنید

یک دایرکتوری src برای ذخیره فایل های منبع TypeScript خود ایجاد کنید:

 $ mkdir src

ساختار پروژه شما اکنون باید به شکل زیر باشد:

 real-time-notification-system/ ├── src/ ├── node_modules/ ├── package.json └── tsconfig.json

اکنون، یک نمونه فایل TypeScript در دایرکتوری src ایجاد کنید تا تحلیل کنید که TypeScript به درستی کار می کند:

 // src/index.ts const message: string = 'Hello, world!'; console.log(message);

برای اجرای فایل، می توانید از Node یا هر زمان اجرای JS دیگری مانند Bun با استفاده از دستور زیر استفاده کنید:

 # make sure bun is installed with bun -v command # then run $ bun run src/index.ts

قبل از اینکه به مرحله بعدی بروید، مطمئن شوید که "Hello, world" را در کنسول دریافت کرده اید

مرحله 5 - TypeScript را کامپایل کنید

کد TypeScript خود را با اجرای:

 # then compile the project $ npx tsc

این فایل‌های جاوا اسکریپت را در دایرکتوری dist مطابق با پیکربندی مشخص‌شده در tsconfig.json تولید می‌کند.

با راه‌اندازی پروژه و پیکربندی TypeScript، ما آماده شروع پیاده‌سازی آپشن های اصلی سیستم اعلان بلادرنگ خود هستیم.

بیایید به ایجاد موارد مشاهده‌پذیر، اعمال عملگرها و مدیریت اعلان‌های بلادرنگ در برنامه‌مان ادامه دهیم.

نحوه پیاده سازی ویژگی های اصلی: ساختن یک سیستم اعلان بلادرنگ

اکنون بیایید به پیاده سازی ویژگی های اصلی سیستم اطلاع رسانی بلادرنگ خود بپردازیم. ما قابل مشاهده‌ها را برای نمایش انواع مختلف رویدادها ایجاد می‌کنیم، اپراتورها را برای فیلتر کردن و تبدیل این جریان‌های رویداد اعمال می‌کنیم، و در نهایت در این موارد مشاهده‌پذیر مشترک می‌شویم تا اعلان‌های بلادرنگ را به‌طور مؤثر مدیریت کنیم.

نحوه ایجاد موارد مشاهده‌پذیر – مدل‌سازی جریان‌های رویداد

در سیستم اعلان ما، جریان‌های رویداد مختلفی خواهیم داشت که نشان‌دهنده انواع مختلف اعلان‌ها هستند. این موارد می تواند شامل پیام های جدید، اشاره های کاربر، هشدارهای سیستم و موارد دیگر باشد.

به یاد داشته باشید، همه چیز قابل مشاهده است، زیرا این در هنگام ساخت برنامه های واکنشی بسیار مهم است. با استفاده از RxJS ( https://rxjs.dev/guide/overview )، می توانید هر نوع جریانی را به روشی قابل مشاهده دستکاری کنید.

قبل از شروع، بیایید ببینیم منظور من از آن چیست.

با توجه به دکمه ای که به یک رویداد کلیک گوش می دهد، جاوا اسکریپت می توانید رویداد را به شکل زیر ثبت کنید:

 <button id='btn'>Click Me</button> // in js file const btn = document.getElementById("btn"); btn.addEventListener("click", (event) => { console.log('Button clicked'); });

در حالی که این کاملاً خوب کار می کند، واکنشی نیست. اگر بخواهید رویداد کلیک را با رویداد دیگری ترکیب کنید، مانند یک تایمر یا یک درخواست HTTP چه؟ اینجاست که برنامه نویسی واکنشی وارد می شود.

با برنامه نویسی واکنشی، می توانید همه این رویدادها را به عنوان جریانی از داده ها در نظر بگیرید و آنها را به روشی اعلامی و قابل ترکیب ترکیب کنید.

سناریویی را تصور کنید که در آن هنگام دو رویداد کلیک که در فاصله زمانی 5 ثانیه اتفاق می‌افتند، باید پیامی را چاپ کنیم، یا پیامی را با آرایه‌ای از موقعیت‌هایی که ماوس در مرورگر بین دو رویداد کلیک اشغال کرده است، چاپ کنیم. یا برای چاپ پیامی که کاربر روی دکمه و کلمه کلیدی enter در فاصله زمانی 2 ثانیه کلیک می کند.

همه این سناریوها با برنامه‌نویسی ضروری معمولی امکان‌پذیر هستند، اما ممکن است به کد پیچیده‌تری نیاز داشته باشند، و تفکر واکنشی ممکن است ضروری باشد.

بیایید سعی کنیم اولین سناریو را به روشی معمولی بسازیم، سپس خواهیم دید که چگونه برنامه نویسی واکنشی می تواند به ما کمک کند تا آن را خواناتر و قابل نگهداری تر کنیم.

 const btn = document.getElementById("btn"); let clickCount = 0; let lastClickTime = 0; btn.addEventListener("click", (event) => { clickCount++; if (clickCount === 1) { lastClickTime = new Date().getTime(); } else if (clickCount === 2) { if (new Date().getTime() - lastClickTime < 5000) { console.log('Two clicks in less than 5 seconds'); } clickCount = 0; } });

حال بیایید ببینیم چگونه می توانیم با استفاده از یک رویکرد برنامه نویسی واکنشی با rxjs در قطعه کد زیر به همان نتیجه برسیم:

 import { fromEvent } from 'rxjs'; import { buffer, debounceTime, filter } from 'rxjs/operators'; const btn = document.getElementById("btn"); const btnClick$ = fromEvent(btn, 'click'); btnClick$.pipe( buffer(btnClick$.pipe(debounceTime(5000))), filter(clickArray => clickArray.length === 2) ).subscribe(() => { console.log('Two clicks in less than 5 seconds'); });

در کد بالا، ما از تابع fromEvent از rxjs ( https://rxjs.dev/api/index/function/fromEventPattern ) برای ایجاد یک قابل مشاهده از رویداد کلیک روی دکمه استفاده کردیم. سپس از عملگرهای buffer و debounceTime برای بافر کردن رویدادهای کلیک و فیلتر کردن مواردی که در عرض 5 ثانیه رخ داده اند استفاده کردیم.

این به ما این امکان را می‌دهد که به راحتی سناریوی دو کلیک را که در عرض 5 ثانیه اتفاق می‌افتد، به روشی اعلامی و قابل ترکیب کنترل کنیم. نماد $ یک نماد رایج برای شناسایی یک جریان است، در حالی که کاملا اختیاری است، ممکن است لازم باشد هنگام کار روی یک پروژه مشترک از آن استفاده کنید، زیرا دیدن آن بسیار معمول است.

همانطور که می بینید، رویکرد برنامه نویسی واکنشی بسیار واضح تر و قابل ترکیب تر است، شاید هنگام استفاده از آن برای اولین بار شهودی نباشد، اما درک و نگهداری آن را آسان تر می کند. این یک مثال بسیار ابتدایی است، اما قدرت برنامه نویسی واکنشی را هنگام برخورد با ترکیبات پیچیده رویداد نشان می دهد.

برنامه نویسی واکنشی به شما این امکان را می دهد که همه رویدادها را به عنوان جریانی از داده ها در نظر بگیرید و آنها را به روشی اعلامی و قابل ترکیب دستکاری کنید و مدیریت سناریوهای پیچیده و کدهای قابل نگهداری را آسان تر می کند.

⚒️ تمرین دستی: برای آشنایی بیشتر، سعی کنید سناریوی دوم را با استفاده از هر دو روش بسازید و ببینید که چگونه می توانید مدیریت رویداد پیچیده را با استفاده از خطوط بسیار کمی از کد انجام دهید.

اکنون که ایده ای دارید که چگونه می توانید تقریباً هر چیزی را به یک قابل مشاهده تبدیل کنید، بیایید دستمان را کثیف کنیم و سیستم اعلان نمونه خود را کدگذاری کنیم. این یک مثال بسیار اساسی خواهد بود، هدف این است که نشان دهد چگونه می توانید از برنامه نویسی واکنشی در هنگام برخورد با ترکیب پیچیده ای از رویدادها یا جریانی از داده های فشرده در برنامه های آینده خود بهره مند شوید.

بیایید با ایجاد قابل مشاهده‌ها برای نمایش این جریان‌های رویداد شروع کنیم:

 // src/observables.ts import { Observable } from 'rxjs'; // Observable for new messages export const newMessage$ = new Observable<string>((subscriber) => { // Simulate receiving new messages setInterval(() => { subscriber.next('New message received'); }, 3000); }); // Observable for user mentions export const userMentions$ = new Observable<string>((subscriber) => { // Simulate user mentions setInterval(() => { subscriber.next('You were mentioned in a message'); }, 5000); }); // Observable for system alerts export const systemAlerts$ = new Observable<string>((subscriber) => { // Simulate system alerts setInterval(() => { subscriber.next('System alert: Server down'); }, 10000); });

در کد بالا، ما با استفاده از کلاس Observable از rxjs ( https://rxjs.dev/guide/observable )، سه مشاهده‌پذیر ایجاد کرده‌ایم: newMessage$ ، userMentions$ و systemAlerts$ .

هر یک از این قابل مشاهده ها مقدار جدیدی را در فواصل زمانی مختلف منتشر می کنند. newMessage$ observable هر 3 ثانیه یک پیام جدید، userMentions$ observable هر 5 ثانیه یک پیام جدید و systemAlerts$ observable هر 10 ثانیه یک پیام جدید منتشر می کند. اکنون که مشاهده‌پذیرهای خود را تنظیم کرده‌ایم، می‌توانیم در آنها مشترک شویم و مقادیر منتشر شده را در برنامه خود مدیریت کنیم.

نحوه اعمال اپراتورها – تبدیل جریان رویداد

در مرحله بعد، اجازه دهید از اپراتورها برای فیلتر کردن و تبدیل جریان رویدادهایمان برای تولید اعلان‌های کاربردی استفاده کنیم. ما از اپراتورهایی مانند filter ، map و merge برای پردازش جریان‌های داده ورودی و تولید اعلان‌های معنادار استفاده خواهیم کرد:

 // src/operators.ts import { newMessage$, userMentions$, systemAlerts$ } from './observables'; import { merge, map, filter } from 'rxjs'; // Combine multiple event streams into one export const combinedNotifications$ = merge( newMessage$.pipe(map(message => `New message: ${message}`)), userMentions$.pipe(map(mention => `You were mentioned: ${mention}`)), systemAlerts$.pipe(map(alert => `System alert: ${alert}`)) ); // Filter notifications based on user preferences export const filteredNotifications$ = combinedNotifications$.pipe( filter(notification => notification.startsWith('New message')) );

در کد بالا، ما سه قابل مشاهده ایجاد کرده‌ایم: newMessage$ ، userMentions$ و systemAlerts$ . هر یک از این قابل مشاهده ها مقدار جدیدی را در فواصل زمانی مختلف منتشر می کنند. newMessage$ observable هر 3 ثانیه یک پیام جدید، userMentions$ observable هر 5 ثانیه یک پیام جدید و systemAlerts$ observable هر 10 ثانیه یک پیام جدید منتشر می کند.

نحوه مدیریت اعلان‌های بلادرنگ – اشتراک در Observables

در نهایت، بیایید در مشاهدات خود مشترک شویم تا اعلان های بلادرنگ را در برنامه خود مدیریت کنیم. ما در جریان ترکیبی اعلان‌ها مشترک می‌شویم و اعلان‌ها را در یک رابط مشتری شبیه‌سازی شده به کاربر نمایش می‌دهیم:

 // src/index.ts import { combinedNotifications$, filteredNotifications$ } from './operators'; // Subscribe to combined notifications and display them in the UI combinedNotifications$.subscribe(notification => { // Simulate displaying notifications in the UI console.log('Displaying notification:', notification); }); // Subscribe to filtered notifications based on user preferences filteredNotifications$.subscribe(notification => { // Simulate displaying filtered notifications in the UI console.log('Displaying filtered notification:', notification); });

در قطعه کد بالا، ما دو قابل مشاهده ایجاد کردیم: combinedNotifications$ و filteredNotifications$ . اولین مورد با استفاده از عملگر ادغام، چندین جریان رویداد را در یک جریان ترکیب می کند. مورد دوم اعلان ها را بر اساس ترجیحات کاربر با استفاده از عملگر فیلتر فیلتر می کند. سپس در این مشاهده پذیرها مشترک می شویم و اعلان ها را در رابط کاربری نمایش می دهیم.

بیایید دوباره چیزها را با استفاده از bun آزمایش کنیم:

 $ bun run src/index.ts

شما باید خروجی زیر را داشته باشید:

همانطور که می بینید، نوتیفیکیشن ها همانطور که پیش بینی می شود در رابط کاربری نمایش داده می شوند و با انتشار رویدادهای جدید، تا زمانی که برنامه متوقف شود، همچنان وارد می شوند.

یکی دیگر از راه‌های توقف دریافت اعلان‌ها لغو اشتراک از مشاهده‌پذیرها، اضافه کردن یک شرط است که بلوک زیر را اجرا می‌کند:

 combinedNotifications$.unsubscribe();

⚒️ تقدیم به شما:
با خیال راحت با کد تعامل داشته باشید و نحوه کارکرد مشاهده پذیرها و اپراتورها را برای مدیریت موثر اعلان های بلادرنگ تحلیل کنید. با جریان‌ها و فیلترهای رویدادهای مختلف آزمایش کنید تا اعلان‌ها را مطابق با اولویت‌های خود تنظیم کنید، مطمئن شوید که تا حد امکان از اپراتورهای RxJS بیشتری استفاده می‌کنید. در حین کدنویسی، موارد استفاده در دنیای واقعی و نحوه اعمال این سیستم اعلان برای برنامه های مختلف را در نظر بگیرید.

می‌توانید کد منبع کامل این مقاله را در مخزن GitHub زیر بیابید: https://github.com/pacyL2K19/rx-programming-real-time-sample . اگر آن را مفید می دانید، لطفاً یک ستاره بگذارید.

بهترین شیوه ها و دام های رایج

برنامه نویسی واکنشی یک پارادایم قدرتمند است، اما مجموعه ای از بهترین شیوه ها و مشکلات بالقوه خود را دارد.

بیایید برخی از ملاحظات کلیدی را هنگام کار با برنامه نویسی واکنشی در برنامه های کاربردی دنیای واقعی تحلیل کنیم:

بهترین شیوه ها:

در اینجا برخی از بهترین شیوه هایی که باید هنگام ساخت برنامه به روش واکنشی دنبال کنید آورده شده است:

Declarative و Composable: از ماهیت اعلامی و ترکیبی برنامه نویسی واکنشی برای مدیریت جریان های رویداد پیچیده و جریان های داده استفاده کنید. از عملگرها برای تبدیل و ترکیب مشاهده پذیرها به روشی واضح و قابل نگهداری استفاده کنید.

مدیریت خطا: مکانیسم‌های مدیریت خطا را برای مدیریت استثناها یا خرابی‌ها در جریان رویداد خود پیاده‌سازی کنید. از عملگرهایی مانند catchError ( https://rxjs.dev/api/operators/catchError ) یا retryWhen ( https://rxjs.dev/api/index/function/retryWhen ) استفاده کنید تا خطاها را به خوبی مدیریت کنید.

مدیریت حافظه: هنگام کار با قابل مشاهده ها مراقب مدیریت حافظه باشید. برای جلوگیری از نشت حافظه و مصرف غیرضروری منابع، زمانی که دیگر به آن‌ها نیازی ندارید، اشتراک آن‌ها را لغو کنید.

آزمایش: تست‌های واحد جامعی را برای مشاهده‌پذیرها و اپراتورهای خود بنویسید تا مطمئن شوید که مطابق انتظار رفتار می‌کنند. از کتابخانه های آزمایشی مانند Jest یا Mocha برای آزمایش کد واکنشی خود استفاده کنید.

مشکلات رایج:

استفاده بیش از حد از اپراتورها: از استفاده بیش از حد از اپراتورها، به خصوص در جریان رویدادهای پیچیده خودداری کنید. در حالی که مدیریت جریان‌های پیچیده داده/رویداد می‌تواند منجر به استفاده از بیش از یک اپراتور شود، استفاده بیش از حد از اپراتورها می‌تواند منجر به کدهایی شود که درک و نگهداری آن دشوار است، همیشه به دنبال استفاده بهینه از اپراتورها باشید.

پیچیدگی: مراقب جریان‌های رویداد بیش از حد پیچیده و جریان‌های داده باشید. سعی کنید پایگاه کد واکنشی خود را ساده و بصری نگه دارید تا از سردرگمی و اشکالات جلوگیری کنید.

عملکرد: هنگام کار با برنامه نویسی واکنشی مراقب عملکرد باشید. پردازش داده‌های فشرده و ترکیب‌های رویداد پیچیده می‌تواند بر عملکرد تأثیر بگذارد، اگر به دقت مدیریت نشود، به‌ویژه دانستن زمان اشتراک و زمان لغو اشتراک از موارد مشاهده‌پذیر، اطمینان از استفاده بهینه از منابع.

با پیروی از بهترین شیوه ها و آگاهی از مشکلات رایج، می توانید از پتانسیل کامل برنامه نویسی واکنشی استفاده کنید و در عین حال از قابلیت نگهداری و عملکرد برنامه های خود اطمینان حاصل کنید.

نتیجه

برنامه نویسی واکنشی یک الگوی تحول آفرین است که توسعه دهندگان را قادر می سازد تا برنامه های کاربردی پاسخگو، مقیاس پذیر و کارآمد بسازند. توسعه دهندگان با استفاده از اصول جریان ها، قابل مشاهده ها و اپراتورها می توانند جریان های داده پیچیده و عملیات ناهمزمان را به راحتی مدیریت کنند.

چه در حال ساخت داشبوردهای بلادرنگ، برنامه های کاربردی اینترنت اشیا یا پلتفرم های تجارت مالی باشید، برنامه نویسی واکنشی ابزاری همه کاره و قدرتمند برای مدیریت جریان های داده پویا فراهم می کند. همانطور که به سفر خود با برنامه نویسی واکنشی ادامه می دهید، مفاهیم اصلی جریان ها و قابل مشاهده ها را به خاطر بسپارید.

ماهیت اعلانی و ترکیبی برنامه نویسی واکنشی را بپذیرید و مجموعه وسیعی از عملگرهای موجود برای تبدیل و ترکیب مشاهده پذیرها را کشف کنید. با انجام این کار، پتانسیل کامل برنامه نویسی واکنشی را باز می کنید و برنامه هایی ایجاد می کنید که نیازهای توسعه نرم افزار مدرن را برآورده می کنند.

منابع

برنامه نویسی واکنشی و تأثیر آن بر عملکرد و فرآیند توسعه اثر گوستاو هوچبرگ

مقدمه ای برای برنامه نویسی واکنشی که شما از دست داده اید توسط آندره استالتز

مبارزه برای اجرا توسط آرنه لیمبورگ

مقدمه ای بر برنامه نویسی واکنشی توسط IBM

خبرکاو