اصول محدود کردن نرخ: چگونه کار می کند و چگونه از آن استفاده کنید

Summarize this content to 400 words in Persian Lang
محدود کردن نرخ یک مفهوم حیاتی در توسعه وب است. ثبات سرور، تخصیص کارآمد منابع و محافظت در برابر حملات مخرب را تضمین می کند. بنابراین در این مقاله، ما به ماهیت محدودیت نرخ، اهمیت آن، روش‌های مختلف پیاده‌سازی و مثال‌های عملی برای نشان دادن عملکرد آن می‌پردازیم. بیا درست شیرجه بزنیم 😉

Rate Limiting چیست؟

محدود کردن نرخ یک استراتژی است که برای کنترل میزان درخواست های دریافتی یا ترافیک به یک وب سرویس یا یک سرور استفاده می شود. به محافظت از برنامه های شما در برابر سوء استفاده، تضمین توزیع عادلانه منابع و حفظ ثبات سرویس کمک می کند.

چرا از Rate Limiting استفاده کنیم؟

در اینجا برخی از دلایلی وجود دارد که چرا باید از محدودیت نرخ استفاده کنید 👇🏽

جلوگیری از سوء استفاده: ربات ها یا کاربران مخرب را از هجوم درخواست های سرور جلوگیری می کند.

مدیریت منابع: استفاده منصفانه از منابع را در همه کاربران تضمین می کند.

امنیت: با محدود کردن تلاش برای برخی از نقاط پایانی در برنامه شما به جلوگیری از حملات brute-force کمک می کند.

کنترل هزینه: به جلوگیری از هزینه های غیرمنتظره به دلیل تماس های بیش از حد API کمک می کند.

عملکرد: سرور شما را پاسخگو نگه می دارد و خطر خرابی را کاهش می دهد.

انواع محدودیت نرخ

محدودیت نرخ پنجره ثابت (یا ساده).: این روش درخواست ها را در یک پنجره زمانی ثابت محدود می کند. به عنوان مثال، “100 درخواست در دقیقه.”

محدود کردن نرخ پنجره کشویی: یک چارچوب زمانی پویا که درخواست‌ها را در یک دوره اخیر، مانند چند دقیقه یا چند ثانیه آخر، ردیابی و محدود می‌کند.

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

الگوریتم سطل نشتی: شبیه سطل ژتون اما با پیچ و تاب. هنگامی که سطل پر است، درخواست های اضافی “نشت” می کنند یا دور ریخته می شوند و جریان ثابتی را حفظ می کنند.

💡 من حتی قرار نیست دروغ بگویم زیرا در مورد الگوریتم های Token Bucket و Leaky Bucket اطلاعات زیادی ندارم، زیرا برای پروژه های فعلی خود به آنها نیازی نداشته ام. با این حال، پنجره ثابت و پنجره کشویی رایج ترین انواعی هستند که با آن مواجه خواهید شد. به عنوان مثال، GPT-4 OpenAI از محدودیت نرخ پنجره ثابت با محدودیت‌های طبقه‌بندی شده استفاده می‌کند – اولین ردیف آن‌ها اجازه 500 درخواست در دقیقه را می‌دهد.

نحوه عملکرد محدود کردن نرخ

این فرآیند معمولاً شامل موارد زیر است:

ردیابی: نظارت بر تعداد درخواست هایی که یک کاربر (بیشتر userId) یا IP در یک بازه زمانی خاص انجام داده است.

آستانه: تعیین محدودیت (مثلاً 100 درخواست در ساعت).

پاسخ: ارسال اخطار یا مسدود کردن درخواست‌های بیشتر در صورت تجاوز از حد مجاز (معمولاً با a 429 Too Many Requests کد وضعیت HTTP).

پیاده سازی نرخ محدود: مثال های عملی

اکنون که درک اساسی از محدود کردن نرخ و نحوه عملکرد آن دارید، بیایید با اجرای آن در پروژه ای که ایجاد خواهیم کرد، دستمان را کثیف کنیم.

ما دو پروژه ایجاد خواهیم کرد که محدودیت نرخ را نشان می دهد:

الف دریافت کنید نمونه درخواست
الف ارسال کنید نمونه درخواست

پشته فناوری

Frontend: React (با استفاده از Vite)
Backend: Express (چارچوب Node.js)

دریافت کنید نمونه درخواست

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

در داخل پوشه ای که ایجاد کرده اید، دو پوشه دیگر به نام های frontend و backend ایجاد کنید.

پس از آن، cd را در پوشه های Backend وارد کنید و این دستور را وارد کنید npm init -y برای مقداردهی اولیه a package.json فایل

پس از آن بسته های follow npm را در داخل پوشه backend نصب کنید 👇🏽

npm install express cors express-rate-limit

npm install -D nodemon

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینها چه می کنند:

express: وب سرور شما را ایجاد می کند و مسیرهای API را مدیریت می کند

cors: به frontend اجازه می دهد تا به طور ایمن با backend ارتباط برقرار کند

express-rate-limit: از API شما در برابر درخواست های زیاد محافظت می کند

nodemon: سرور را در حین توسعه مجدداً راه اندازی مجدد می کند (به همین دلیل ما از آن استفاده می کنیم D)

پس از آن، یک را ایجاد کنید index.js (شما می توانید هر آنچه را که می خواهید) زیرا ما از آن برای تنظیم محدود کننده نرخ استفاده خواهیم کرد.

بعد از اینکه این کد را کپی و پیست کردید که در ادامه توضیح خواهم داد

const express = require(“express”);
const rateLimit = require(“express-rate-limit”);

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
message: “Too many requests from this IP, please try again later.”,
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get(“/api/data”, (req, res) => {
res.send(“Welcome to the API!”);
});

app.listen(5000, () => {
console.log(“Server running on http://localhost:5000”);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا چیزی است که هر بخش انجام می دهد:

دو خط اول بسته های مورد نیاز ما را وارد می کنند

app = express() سرور ما را ایجاد می کند
را limiter پیکربندی شده است با:

windowMs: یک پنجره زمانی 15 دقیقه ای را تنظیم می کند (15 × 60 × 1000 میلی ثانیه)

max: 5 درخواست به ازای هر آدرس IP در آن پنجره را مجاز می کند

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

سپس:

app.use(limiter) محدودیت نرخ ما را برای همه مسیرها اعمال می کند
ما یک مسیر آزمایشی ساده ایجاد می کنیم ‘/api/data’ که پیام خوشامدگویی می فرستد
در نهایت سرور را روی پورت 5000 راه اندازی می کنیم

هنگامی که کاربران بیش از 100 بار در مدت 15 دقیقه از همان IP به API شما ضربه می زنند، به جای دسترسی به API، پیام خطا را دریافت می کنند.

اکنون که می دانید چگونه کار می کند، می خواهیم با افزودن به، راه اندازی مجدد خودکار را فعال کنیم package.json 👇🏽

{
“scripts”: {
“dev”: “nodemon index.js”
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این همه برای باطن است.

وقت آن است که قسمت جلویی را راه اندازی کنید.

یک ترمینال جدید باز کنید و cd وارد پوشه frontend شده و اجرا کنید 👇🏽

npm create vite@latest .

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

پس از اتمام کار، در را باز کنید App.jsx و این کد رو پیست کنید که توضیح میدم 👇🏽

import { useState } from “react”;
import axios from “axios”;

const App = () => {
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);

const fetchData = async () => {
try {
setError(null); // Reset error state before making a request
const res = await axios.get(“http://localhost:5000/api/data”);
setResponse(res.data.message);
} catch (err) {
setError(err.response?.data || “Error occurred while fetching data”);
}
};

return (
<div className=”App”>
<header className=”App-header”>
<h1>Rate Limiting Test with Expressh1>
<button onClick={fetchData}>Fetch Data from Serverbutton>
{response && <p>Server Response: {response}p>}
{error && <p style={{ color: “red” }}>Error: {error}p>}
header>
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا چیزی است که اتفاق می افتد:

ما وارد می کنیم useState برای مدیریت داده ها و axios برای ایجاد درخواست های API
ما دو متغیر حالت ایجاد می کنیم:

response: پاسخ های موفق API را ذخیره می کند

error: هرگونه پیام خطا را ذخیره می کند

را fetchData تابع:

با کلیک روی دکمه تماس گرفته می شود
سعی می کند داده ها را از API ما واکشی کند
به روز رسانی یا response یا error دولت
استفاده می کند try/catch برای مدیریت موفقیت و خطاها

UI نشان می دهد:

یک عنوان
دکمه ای برای راه اندازی درخواست ها
پاسخ API (در صورت موفقیت آمیز بودن)
پیام های خطا به رنگ قرمز (در صورت عدم موفقیت درخواست) هنگامی که در عرض 15 دقیقه بارها روی دکمه کلیک می کنید، پیام خطای محدودیت نرخ را به دلیل محدودیت های پشتیبان ما مشاهده خواهید کرد!

این همه در مورد مثال درخواست GET است. بیایید به مثال بعدی برویم

نمونه درخواست POST

برای این مثال، می توانید تصمیم بگیرید که کد نمونه اول را کامنت کنید و این کد را Paste کنید 👇🏽

import express from “express”;
import cors from “cors”;
import rateLimit from “express-rate-limit”;
import bodyParser from “body-parser”;

const app = express();

app.use(cors());

app.use(bodyParser.json());

const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 5, // limit each IP to 100 requests per windowMs
message: “Too many requests from this IP, please try again after 15 minutes”,
});

app.post(“/api/submit-form”, limiter, (req, res) => {
const { name, email, message } = req.body;

// Simulate processing form data
console.log(`Received form submission from ${name} (${email}): ${message}`);

res.json({ message: “Form has been submitted successfully!” });
});

app.listen(5000, () => console.log(`Listening on port ${5000}`));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

می بینید که اکثر کدها با مثال اول یکسان هستند، اما در اینجا فقط چند تفاوت کلیدی وجود دارد 👇🏽

اضافه شد bodyParser برای رسیدگی به داده های فرم
یک نقطه پایانی POST ایجاد می کند که ارسال های فرم را پردازش می کند

همچنین این کد را در قسمت جلویی نیز قرار دهید

import { useState } from “react”;
import axios from “axios”;

const App = () => {
const [formData, setFormData] = useState({
name: “”,
email: “”,
message: “”,
});
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({ …formData, [name]: value });
};

const handleSubmit = async (e) => {
e.preventDefault();
try {
setError(null); // Reset error state before making a request
const res = await axios.post(
“http://localhost:5000/api/submit-form”,
formData,
);
setResponse(res.data.message);
} catch (err) {
setError(
err.response?.data || “Error occurred while submitting the form”,
);
}
};

return (
<div className=”App”>
<header className=”App-header”>
<h1>Rate Limiting Form Submission with Expressh1>
<form onSubmit={handleSubmit}>
<div>
<label>Name:label>
<input
type=”text”
name=”name”
value={formData.name}
onChange={handleInputChange}
required
/>
div>
<div>
<label>Email:label>
<input
type=”email”
name=”email”
value={formData.email}
onChange={handleInputChange}
required
/>
div>
<div>
<label>Message:label>
<textarea
name=”message”
value={formData.message}
onChange={handleInputChange}
required
/>
div>
<button type=”submit”>Submitbutton>
form>
{response && (
<p style={{ color: “green” }}>Server Response: {response}p>
)}
{error && <p style={{ color: “red” }}>Error: {error}p>}
header>
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا، ما به سادگی از طریق یک فرم به سرور درخواست می دهیم. بیایید ببینیم که چگونه این با مثال GET متفاوت است:

از یک فرم به جای یک دکمه استفاده می کند
حالت فرم را با formData

تغییرات ورودی را با handleInputChange

از درخواست POST به جای GET استفاده می کند
پیام موفقیت را به رنگ سبز نشان می دهد

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

نتیجه گیری

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

npm install express cors express-rate-limit

npm install -D nodemon

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

  npm create vite@latest .

  import { useState } from "react";
  import axios from "axios";

  const App = () => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState(null);

    const fetchData = async () => {
      try {
        setError(null); // Reset error state before making a request
        const res = await axios.get("http://localhost:5000/api/data");
        setResponse(res.data.message);
      } catch (err) {
        setError(err.response?.data || "Error occurred while fetching data");
      }
    };

    return (
      <div className="App">
        <header className="App-header">
          <h1>Rate Limiting Test with Expressh1>
          <button onClick={fetchData}>Fetch Data from Serverbutton>
          {response && <p>Server Response: {response}p>}
          {error && <p style={{ color: "red" }}>Error: {error}p>}
        header>
      div>
    );
  };

  export default App;

import express from "express";
import cors from "cors";
import rateLimit from "express-rate-limit";
import bodyParser from "body-parser";

const app = express();

app.use(cors());

app.use(bodyParser.json());

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // limit each IP to 100 requests per windowMs
  message: "Too many requests from this IP, please try again after 15 minutes",
});

app.post("/api/submit-form", limiter, (req, res) => {
  const { name, email, message } = req.body;

  // Simulate processing form data
  console.log(`Received form submission from ${name} (${email}): ${message}`);

  res.json({ message: "Form has been submitted successfully!" });
});

app.listen(5000, () => console.log(`Listening on port ${5000}`));

import { useState } from "react";
import axios from "axios";

const App = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setError(null); // Reset error state before making a request
      const res = await axios.post(
        "http://localhost:5000/api/submit-form",
        formData,
      );
      setResponse(res.data.message);
    } catch (err) {
      setError(
        err.response?.data || "Error occurred while submitting the form",
      );
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Rate Limiting Form Submission with Expressh1>
        <form onSubmit={handleSubmit}>
          <div>
            <label>Name:label>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              required
            />
          div>
          <div>
            <label>Email:label>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              required
            />
          div>
          <div>
            <label>Message:label>
            <textarea
              name="message"
              value={formData.message}
              onChange={handleInputChange}
              required
            />
          div>
          <button type="submit">Submitbutton>
        form>
        {response && (
          <p style={{ color: "green" }}>Server Response: {response}p>
        )}
        {error && <p style={{ color: "red" }}>Error: {error}p>}
      header>
    div>
  );
};

export default App;