速率限制的基礎知識：它是如何運作的以及如何使用它

速率限制是網路開發中的重要概念。確保伺服器穩定性、資源有效率分配、防範惡意攻擊。因此，在本文中，我們將深入探討速率限制的本質、重要性、各種實作方法以及實際範例來展示其功能。讓我們開始吧？

什麼是速率限制？

速率限制是一種用於控制 Web 服務或伺服器的傳入請求或流量的策略。它有助於保護您的應用程式免受濫用，確保公平的資源分配並保持服務穩定。

為什麼要使用速率限制？

以下是您應該使用速率限制的一些原因??

• 防止濫用：阻止機器人或惡意使用者用請求淹沒伺服器。
• 資源管理：確保所有使用者公平使用資源。
• 安全性：透過限制應用程式中某些端點的嘗試來幫助防止暴力攻擊。
• 成本控制：有助於防止因過多的 API 呼叫而產生意外費用。
• 效能：保持伺服器回應並降低停機風險。

速率限制的類型

1. 固定視窗（或簡單）速率限制：此方法限制固定時間視窗內的請求。例如，「每分鐘 100 個請求。」
2. 滑動視窗速率限制：動態時間範圍，用於追蹤和限制最近一段時間（例如最後幾分鐘或幾秒鐘）的請求。
3. 令牌桶演算法：此方法使用一個裝滿令牌的「桶」來管理請求。每個傳入請求都會消耗一個令牌，並且桶子會按照設定的時間間隔重新填充。這種方法允許流量突發，同時保持整體速率限制。
4. 漏桶演算法：與令牌桶類似，但有所不同。當桶滿時，多餘的請求會「洩漏」或被丟棄，從而保持穩定的流量。

？ 我甚至不想撒謊，因為我對令牌桶和漏桶演算法了解不多，因為我目前的專案不需要它們。但是，固定視窗和滑動視窗是您會遇到的最常見的類型。例如，OpenAI 的 GPT-4 使用帶有分層限制的固定視窗速率限制 - 第一層允許每分鐘 500 個請求。這種方法可能會導致流量激增，因為使用者可能會在視窗重置之前達到限制。

速率限制的工作原理

過程通常涉及：

1. 追蹤：監控使用者（主要是userId）或IP在特定時間範圍內發出了多少個請求。
2. 閾值：定義限制（例如每小時 100 個請求）。
3. 回應：超出限制時發送警告或阻止進一步的請求（通常帶有 429 Too Many Requests HTTP 狀態碼）。

實施速率限制：實例

現在您已經對速率限制及其工作原理有了基本的了解，讓我們在我們將要創建的專案中實際實現它。

我們將建立兩個項目來示範速率限制：

1. GET 請求範例
2. POST 請求範例

技術堆疊

• 前端：React（使用Vite）
• 後端：Express（Node.js 框架）

GET 請求範例

使用您選擇的任何名稱建立一個資料夾，然後在 VS code 或您使用的任何程式碼編輯器上開啟它。

在您建立的資料夾中，再建立兩個資料夾，分別稱為 frontend 和 backend。

之後，cd 進入後端資料夾並輸入此命令 npm init -y 來初始化 package.json 檔案

之後在後端資料夾中安裝以下 npm 套件??

npm install express cors express-rate-limit

npm install -D nodemon

它們的作用：

• Express：建立您的 Web 伺服器並處理 API 路由
• cors：允許前端與後端安全通訊
• 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");
});

以下是每個部位的作用：

1. 前兩行導入我們需要的套件
2. app = express() 建立我們的伺服器
3. 限制器配置為：
   • windowMs：設定15分鐘的時間視窗（15×60×1000毫秒）
   • 最大：該視窗中每個 IP 位址允許 5 個請求
   • message：使用者超出限制時看到的錯誤訊息

然後：

1. app.use(limiter) 將我們的速率限制應用於所有路由
2. 我們在「/api/data」建立一個簡單的測試路由，發送歡迎訊息
3. 最後，我們在連接埠 5000 上啟動伺服器

當使用者在 15 分鐘內從相同 IP 存取您的 API 超過 100 次時，他們將收到錯誤訊息，而不是存取 API。

現在您知道它是如何運作的，我們希望透過添加到 package.json 來啟用自動重啟??

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

這就是後端的全部。

是時候設定前端了。

• 開啟一個新終端並 cd 進入 frontend 資料夾並運行 ??

npm install express cors express-rate-limit

npm install -D nodemon

• 按照以下說明進行操作，如果您不懂 TypeScript，我建議您選擇 JavaScript
• 您可以透過刪除一些不需要的檔案來進行一些清理。這是我的樣子

• 完成後，打開 App.jsx 並貼上我將解釋的這段程式碼？

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");
});

這是發生的事情：

1. 我們導入 useState 來管理數據，導入 axios 來發出 API 請求
2. 我們建立兩個狀態變數：
   • 回應：儲存成功的 API 回應
   • error：儲存任何錯誤訊息
3. fetchData 函數：
   • 點選按鈕時呼叫
   • 嘗試從我們的 API 取得資料
   • 更新回應或錯誤狀態
   • 使用 try/catch 處理成功與錯誤
4. 使用者介面顯示：
   • 標題
   • 觸發請求的按鈕
   • API 回應（如果成功）
   • 紅色錯誤訊息（如果請求失敗） 當您在 15 分鐘內點擊該按鈕次數過多時，由於我們的後端限制，您將看到速率限制錯誤訊息！

這就是 GET 請求範例的全部內容。讓我們繼續下一個例子

POST 請求範例

對於這個範例，您可以決定註解掉第一個範例的程式碼並貼上此程式碼??

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

您可以看到大部分程式碼與第一個範例相同，但這裡只是一些關鍵區別??

• 新增了 bodyParser 來處理表單資料
• 建立處理表單提交的 POST 端點

也將此程式碼貼到前端

  npm create vite@latest .

在這裡，我們只是透過表單向伺服器發出請求。讓我們看看這與 GET 範例有何不同：

1. 使用表單而不是單一按鈕
2. 使用 formData 管理表單狀態
3. 使用handleInputChange處理輸入更改
4. 使用 POST 請求而不是 GET
5. 以綠色顯示成功訊息

該表單允許在 15 分鐘內提交 5 次 - 之後，使用者會看到速率限制錯誤訊息。

結論

好了，夥伴們，恭喜你們讀完了這篇文章？我希望您現在了解速率限制的工作原理以及為什麼應該在您的專案中使用它，特別是如果您正在從事涉及資金的大型專案。如果您有任何疑問，請隨時在評論中提問。編碼愉快？

以上是速率限制的基礎知識：它是如何運作的以及如何使用它的詳細內容。更多資訊請關注PHP中文網其他相關文章！