Die Grundlagen der Ratenbegrenzung: Wie sie funktioniert und wie man sie nutzt

Ratenbegrenzung ist ein wichtiges Konzept in der Webentwicklung. Es gewährleistet Serverstabilität, effiziente Ressourcenzuweisung und Schutz vor böswilligen Angriffen. In diesem Artikel befassen wir uns mit dem Wesen der Ratenbegrenzung, ihrer Bedeutung, verschiedenen Implementierungsmethoden und praktischen Beispielen, um ihre Funktionalität zu demonstrieren. Lasst uns gleich eintauchen?

Was ist Ratenbegrenzung?

Ratenbegrenzung ist eine Strategie, die verwendet wird, um die Menge eingehender Anfragen oder Datenverkehr an einen Webdienst oder einen Server zu steuern. Es hilft, Ihre Anwendungen vor Missbrauch zu schützen, sorgt für eine faire Ressourcenverteilung und sorgt für die Stabilität des Dienstes.

Warum Ratenbegrenzung verwenden?

Hier sind einige der Gründe, warum Sie eine Ratenbegrenzung verwenden sollten ??

• Missbrauch verhindern: Verhindert, dass Bots oder böswillige Benutzer den Server mit Anfragen überlasten.
• Ressourcenverwaltung: Stellt eine faire Nutzung der Ressourcen für alle Benutzer sicher.
• Sicherheit: Verhindert Brute-Force-Angriffe, indem die Versuche einiger Endpunkte in Ihrer Anwendung begrenzt werden.
• Kostenkontrolle: Hilft, unerwartete Kosten aufgrund übermäßiger API-Aufrufe zu verhindern.
• Leistung: Sorgt dafür, dass Ihr Server reaktionsfähig bleibt und das Risiko von Ausfallzeiten verringert wird.

Arten der Ratenbegrenzung

1. Festes Fenster (oder einfache) Ratenbegrenzung: Diese Methode begrenzt Anfragen innerhalb eines festen Zeitfensters. Beispiel: „100 Anfragen pro Minute.“
2. Sliding Window Rate Limiting: Ein dynamischer Zeitrahmen, der Anfragen über einen aktuellen Zeitraum, beispielsweise die letzten paar Minuten oder Sekunden, verfolgt und begrenzt.
3. Token-Bucket-Algorithmus: Diese Methode verwendet einen mit Tokens gefüllten „Bucket“, um Anfragen zu verwalten. Jede eingehende Anfrage verbraucht ein Token und der Bucket wird in festgelegten Intervallen wieder aufgefüllt. Dieser Ansatz ermöglicht Verkehrsstöße unter Beibehaltung einer allgemeinen Ratenbegrenzung.
4. Leaky-Bucket-Algorithmus: Ähnlich dem Token-Bucket, aber mit einer Wendung. Wenn der Eimer voll ist, „lecken“ überschüssige Anfragen aus oder werden verworfen, wodurch ein stetiger Fluss aufrechterhalten wird.

? Ich werde nicht einmal lügen, denn ich weiß nicht viel über die Algorithmen Token Bucket und Leaky Bucket, da ich sie für meine aktuellen Projekte nicht benötigt habe. Allerdings sind feste Fenster und Schiebefenster die häufigsten Typen, denen Sie begegnen werden. Beispielsweise verwendet GPT-4 von OpenAI eine feste Fensterratenbegrenzung mit abgestuften Grenzwerten – die erste Stufe erlaubt 500 Anfragen pro Minute. Dieser Ansatz kann zu einem Burst-Verkehr führen, da Benutzer möglicherweise ihr Limit erreichen, kurz bevor das Fenster zurückgesetzt wird.

So funktioniert die Ratenbegrenzung

Der Prozess umfasst normalerweise:

1. Tracking: Überwachen, wie viele Anfragen ein Benutzer (hauptsächlich die Benutzer-ID) oder IP innerhalb eines bestimmten Zeitraums gestellt hat.
2. Schwellenwert: Definieren eines Grenzwerts (z. B. 100 Anfragen pro Stunde).
3. Antwort: Senden einer Warnung oder Blockieren weiterer Anfragen, wenn das Limit überschritten wird (normalerweise mit dem HTTP-Statuscode 429 Too Many Requests).

Ratenbegrenzung implementieren: Praktische Beispiele

Da Sie nun ein grundlegendes Verständnis der Ratenbegrenzung und ihrer Funktionsweise haben, machen wir uns die Hände schmutzig, indem wir sie in einem Projekt implementieren, das wir erstellen werden.

Wir erstellen zwei Projekte, die die Ratenbegrenzung demonstrieren:

1. Ein GET-Anfragebeispiel
2. Ein POST-Anfragebeispiel

Tech-Stack

• Frontend: Reagieren (mit Vite)
• Backend: Express (Node.js-Framework)

GET-Anfragebeispiel

Erstellen Sie einen Ordner mit einem beliebigen Namen Ihrer Wahl und öffnen Sie ihn in VS-Code oder einem anderen Code-Editor, den Sie verwenden.

Erstellen Sie in dem von Ihnen erstellten Ordner zwei weitere Ordner mit den Namen „Frontend“ und „Backend“.

Danach gehen Sie in die Backend-Ordner und geben den Befehl npm init -y ein, um eine package.json-Datei zu initialisieren

Danach installieren Sie die folgenden npm-Pakete im Backend-Ordner ??

npm install express cors express-rate-limit

npm install -D nodemon

Was diese bewirken:

• express: Erstellt Ihren Webserver und verwaltet API-Routen
• cors: Ermöglicht dem Frontend die sichere Kommunikation mit dem Backend
• Express-Rate-Limit: Schützt Ihre API vor zu vielen Anfragen
• nodemon: Startet den Server während der Entwicklung automatisch neu (deshalb verwenden wir D)

Danach erstellen Sie eine index.js-Datei (Sie können diese beliebig verwenden), da wir sie zum Einrichten des Ratenbegrenzers verwenden werden.

Nachdem Sie diesen Code kopiert und eingefügt haben, werde ich ihn gleich erklären

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

Hier ist, was jeder Teil bewirkt:

1. Die ersten beiden Zeilen importieren unsere benötigten Pakete
2. app = express() erstellt unseren Server
3. Der Begrenzer ist konfiguriert mit:
   • windowMs: Legt ein 15-minütiges Zeitfenster fest (15 × 60 × 1000 Millisekunden)
   • max: Erlaubt 5 Anfragen pro IP-Adresse in diesem Fenster
   • Nachricht: Die Fehlermeldung, die Benutzern angezeigt wird, wenn sie das Limit überschreiten

Dann:

1. app.use(limiter) wendet unser Ratenlimit auf alle Routen an
2. Wir erstellen eine einfache Testroute unter „/api/data“, die eine Willkommensnachricht sendet
3. Zuletzt starten wir den Server auf Port 5000

Wenn Benutzer innerhalb von 15 Minuten mehr als 100 Mal von derselben IP aus auf Ihre API zugreifen, erhalten sie die Fehlermeldung, anstatt auf die API zuzugreifen.

Da Sie nun wissen, wie es funktioniert, möchten wir den automatischen Neustart durch Hinzufügen zu package.json ??
aktivieren

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

Das ist alles für das Backend.

Es ist Zeit, das Frontend einzurichten.

• Öffnen Sie ein neues Terminal, legen Sie eine CD in den Frontend-Ordner und führen Sie ?? aus.

npm install express cors express-rate-limit

npm install -D nodemon

• Gehen Sie die folgenden Anweisungen durch und ich rate Ihnen, JavaScript auszuwählen, wenn Sie sich mit Typoskript nicht auskennen
• Sie können ein wenig aufräumen, indem Sie einige Dateien entfernen, die Sie nicht benötigen. So sieht meiner aus

• Sobald Sie fertig sind, öffnen Sie App.jsx und fügen Sie diesen Code ein, den ich erläutern werde ??

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

Hier ist, was passiert:

1. Wir importieren useState zum Verwalten von Daten und Axios zum Stellen von API-Anfragen
2. Wir erstellen zwei Zustandsvariablen:
   • Antwort: Speichert erfolgreiche API-Antworten
   • Fehler: Speichert etwaige Fehlermeldungen
3. Die fetchData-Funktion:
   • Wird aufgerufen, wenn auf die Schaltfläche geklickt wird
   • Versucht, Daten von unserer API abzurufen
   • Aktualisiert entweder den Antwort- oder den Fehlerstatus
   • Verwendet try/catch, um Erfolg und Fehler zu verarbeiten
4. Die Benutzeroberfläche zeigt:
   • Ein Titel
   • Eine Schaltfläche zum Auslösen von Anfragen
   • Die API-Antwort (falls erfolgreich)
   • Fehlermeldungen in Rot (wenn die Anfrage fehlschlägt) Wenn Sie innerhalb von 15 Minuten zu oft auf die Schaltfläche klicken, wird aufgrund unserer Backend-Einschränkungen die Fehlermeldung „Ratenbegrenzung“ angezeigt!

Das ist alles über das Beispiel einer GET-Anfrage. Fahren wir mit dem nächsten Beispiel fort

Beispiel für eine POST-Anfrage

Für dieses Beispiel können Sie den Code des ersten Beispiels auskommentieren und diesen Code einfügen ??

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

Sie können sehen, dass die meisten Codes mit dem ersten Beispiel identisch sind, aber hier sind nur einige wichtige Unterschiede?

• BodyParser zur Verarbeitung von Formulardaten hinzugefügt
• Erstellt einen POST-Endpunkt, der Formularübermittlungen verarbeitet

Fügen Sie diesen Code auch im Frontend ein

  npm create vite@latest .

Hier stellen wir einfach über ein Formular eine Anfrage an den Server. Schauen wir uns an, wie sich dies vom GET-Beispiel unterscheidet:

1. Verwendet ein Formular anstelle einer einzelnen Schaltfläche
2. Verwaltet den Formularstatus mit formData
3. Verarbeitet Eingabeänderungen mit handleInputChange
4. Verwendet eine POST-Anfrage anstelle von GET
5. Zeigt die Erfolgsmeldung in Grün an

Das Formular ermöglicht 5 Übermittlungen in 15 Minuten – danach sehen Benutzer die Fehlermeldung zur Ratenbegrenzung.

Abschluss

Okay Leute, herzlichen Glückwunsch, dass ihr am Ende dieses Artikels angelangt seid? Ich hoffe, Sie haben jetzt eine Vorstellung davon, wie die Ratenbegrenzung funktioniert und warum Sie sie bei Ihren Projekten verwenden sollten, insbesondere wenn Sie an größeren Projekten arbeiten, bei denen es um Geld geht. Wenn Sie Fragen haben, können Sie diese gerne im Kommentar stellen. Viel Spaß beim Codieren?

Das obige ist der detaillierte Inhalt vonDie Grundlagen der Ratenbegrenzung: Wie sie funktioniert und wie man sie nutzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!