نظرسنجی در React – DEV Community

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

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

ما می توانیم نظرسنجی را به عنوان یک رویکرد ساده برای واکشی داده ها از سرور به صورت دوره ای توصیف کنیم. برخلاف تکنیک‌های پیشرفته‌تر مانند WebSocket یا رویدادهای ارسال شده از سرور (SSE)، نظرسنجی به تنظیمات پیچیده یا پیکربندی‌های سمت سرور نیاز ندارد که آن را به روشی قابل اعتماد برای انجام کار تبدیل می‌کند، به خصوص در سناریوهایی که نیاز به بازیابی داده‌ها از یک API شخص ثالث یا یک سیستم قدیمی که از به‌روزرسانی‌های هم‌زمان پشتیبانی نمی‌کند.

یک نمونه خوب که در آن نظرسنجی می تواند مفید باشد:

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

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

بیایید به طور خلاصه به نحوه استفاده از Polling در React نگاه کنیم:

در بیان مسئله، فرض کنید یک برنامه وب داریم که در آن کاربران می‌توانند سروری را راه‌اندازی و متوقف کنند (مثلاً چیزی مانند npm run dev یا python manager.py runserver). ما می خواهیم در مورد وضعیت سرور در حال اجرا، ایجاد یا متوقف شدن، بازخورد بلادرنگ ارائه دهیم. نظرسنجی روشی موثر برای رسیدن به این هدف است.

const pollingFunc = async () => {
   //fetch server data
  const data = await fetchServerData("GET");

  switch (data?.status) {
    case "stopped":
      setStatus({ stopped: true });
      break;

    case "running":
      if (data?.url) {
        setData(data);
        setStatus({ running: true });
        toast.success("Server is running");
      }
      break;

    case "creating":
      setStatus({ creating: true });
      break;

    case "stopping":
      setStatus({ stopping: true });
      break;

    default:
      handleError(data)
    toast.error(`An error occured, ${data.error_message}`)
      break;
  }
};

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

کلید اجرای نظرسنجی در React استفاده از تابع setInterval است که به شما امکان می دهد یک تابع را به طور مکرر در یک بازه زمانی مشخص اجرا کنید. در اینجا مثالی از نحوه استفاده از setInterval برای فراخوانی pollingFunc هر 5 ثانیه آورده شده است:

import React, { useEffect, useRef } from 'react';

const MyComponent = () => {
  const pollingRef = useRef(null);
  useEffect(() => {
    const startPolling = () => {
      pollingRef.current = setInterval(() => {
        pollingFunc();
      }, 5000); // Poll every 5 seconds
    };
    startPolling();

    return () => {
      clearInterval(pollingRef.current);
    };
  }, []);
};

ما از قلاب useRef برای ایجاد یک مرجع قابل تغییر (قابل تغییر) به شناسه بازه زمانی بازگردانده شده توسط setInterval استفاده می کنیم. این به ما این امکان را می دهد که فاصله زمانی را که مؤلفه جدا می شود پاک کنیم و از نشت حافظه جلوگیری کنیم. از قلاب useEffect برای شروع فرآیند نظرسنجی هنگام سوار شدن مؤلفه استفاده می شود. تابع startPolling فاصله را مقدار دهی اولیه می کند و pollingFunc را هر 5 ثانیه فراخوانی می کند. تابع پاکسازی که توسط useEffect برگردانده می‌شود تضمین می‌کند که فاصله زمانی که مؤلفه جدا می‌شود پاک می‌شود.

و این روشی است که نظرسنجی کار می‌کند، بدون هیچ گونه تغییر یا سردرد، اما یکی از نکات مهم هنگام اجرای نظرسنجی در React این است که چگونه وضعیت کامپوننت را به‌روزرسانی کنیم. به‌روزرسانی حالت‌ها در تابع نظرسنجی باعث می‌شود که بپرسید کد من چه مشکلی دارد؟ و این به این دلیل است که setInterval ما در یک حلقه رویداد متفاوت اجرا می شود. پاسخ به تماس setInterval وضعیت زمانی را که ایجاد می‌شود را ثبت می‌کند و به‌روزرسانی‌های بعدی وضعیت را منعکس نمی‌کند، بنابراین در آن نمونه، ایالت ما از هیچ به‌روزرسانی اطلاعی ندارد. برای مدیریت موثر این وضعیت، می‌توان از Ref Hook برای پیگیری آخرین وضعیت استفاده کرد یا به‌روزرسانی‌های حالت را در یک useEffect مدیریت کرد. روش دیگر انتقال وضعیت و تابع setState به عنوان پارامتر به تابع نظرسنجی است.

بیایید مثال بالا خود را به‌روزرسانی کنیم تا حالت توقف را نیز شامل شود:

const pollingFunc = async (stoppingState: boolean) => {

  switch (data?.status) {
    case "stopped":
      setStatus({ stopped: true });
      if (stoppingState) {
        toast.success("Server stopped");
      }
      setStatus({ ...defaultState });
// let's assume we have a defaultState of all possible 
// status to be false here, so we can just spread it
      break;
   // we have the same prev code as earlier
}

//Updating our UseEffect

const MyComponent = () => {
  const pollingRef = useRef(null);
  useEffect(() => {
    const startPolling = (stoppingState) => {
      pollingRef.current = setInterval(() => {
        pollingFunc(stoppingState);
      }, 5000); // Poll every 5 seconds
    };

    startPolling(false);

    return () => {
      clearInterval(pollingRef.current);
    };

  }, []);
};

فقط برای نمایش این در عمل، اجازه دهید یک تابع stopServer ایجاد کنیم

const stopServer = async () => {
  setStatus({ ...status, loading: true });
  await fetchServerData("DELETE");
  setStatus({ ...status, loading: false, stopping: true });
  setData(null);
  startPolling(true);
};

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

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

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

لطفاً نظرات، تجربیات و هر گونه بینش اضافی که ممکن است در مورد اجرای نظرسنجی یا رویکردهای جایگزین برای به روز رسانی داده های بلادرنگ در برنامه های React داشته باشید، به اشتراک بگذارید. همچنین با ما همراه باشید تا ببینیم چگونه نظرسنجی را در Angular پیاده سازی می کنیم.