क्लाउडफ्लेयर वर्कर्स और सर्वरलेस रेडिस के साथ अपनी वेब साइट के लिए अपना स्वयं का प्रतीक्षालय बनाएं

इस ब्लॉग पोस्ट में, हम आपकी वेबसाइट के लिए एक प्रतीक्षालय पृष्ठ लागू करेंगे।

क्यों?

आपकी वेबसाइट पर विज़िटर्स की अधिक संख्या सामान्य तौर पर अच्छी बात है लेकिन हमेशा नहीं। अचानक उच्च ट्रैफ़िक आपके एप्लिकेशन को आसानी से अभिभूत कर सकता है जो आपकी सेवाओं को पूरी तरह से बाधित कर सकता है। प्रतीक्षालय एक समाधान है जो आपको यातायात को नियंत्रित करने और यातायात वृद्धि के दौरान अपने संसाधनों की सुरक्षा करने में मदद करता है। Cloudflare Waiting Room एक अच्छा समाधान है लेकिन यह केवल व्यवसाय और उद्यम खातों के लिए उपलब्ध है। चिंता न करें, इस ब्लॉग में हम क्लाउडफ्लेयर वर्कर्स और अपस्टैश रेडिस का उपयोग करके किसी भी प्रकार की वेब साइट के लिए एक प्रतीक्षालय का निर्माण करेंगे।

कैसे?

प्रतीक्षालय को नियंत्रित करने के लिए दो पैरामीटर हैं।

• अधिकतम सत्र अवधि :कोई आगंतुक वेब साइट पर कब तक निष्क्रिय रह सकता है?
• अधिकतम वेबसाइट क्षमता :वेबसाइट एक ही समय में कितने विज़िटर की अनुमति दे सकती है?

जब कोई आगंतुक हमारी वेबसाइट में प्रवेश करता है, तो हम एक अद्वितीय कुंजी (सत्र कुंजी की तरह) उत्पन्न करेंगे और इसे रेडिस में रखेंगे। हम इस कुंजी को रेडिस में एक समाप्ति समय के साथ रखेंगे जो कि अधिकतम सत्र अवधि . है . किसी विज़िटर को वेबसाइट पर आने देने से पहले, हम Redis के dbsize की जांच करेंगे। यदि आकार **अधिकतम वेबसाइट क्षमता ** से अधिक है, तो हम आगंतुक को प्रतीक्षालय में भेज देंगे। प्रतीक्षालय एक स्थिर HTML है लेकिन हर 30 सेकंड में ताज़ा हो जाता है। यानी, हर 30 सेकंड में एक बार, उपलब्धता होने पर आगंतुक को वेबसाइट में प्रवेश करने की अनुमति दी जा सकती है।

हमारे द्वारा जेनरेट की गई अद्वितीय कुंजी कुकी के रूप में विज़िटर के अनुरोधों पर भी लिखी जाती है। तो उसी आगंतुक के अनुरोधों की एक ही कुंजी होगी। यह जांचने के लिए आवश्यक है कि क्या किसी विज़िटर के पास पहले से ही वेबसाइट के अंदर एक सत्र है जब क्षमता पूरी हो गई है। इसलिए एक आगंतुक के रूप में आपको वेबसाइट में प्रवेश करने की अनुमति है, भले ही क्षमता पूर्ण हो, जब तक कि आपकी कुंजी रेडिस कीस्पेस में मौजूद है। यदि आप अधिकतम सत्र अवधि से अधिक समय तक निष्क्रिय रहते हैं, तो आपकी कुंजी Redis से हटा दी जाएगी। और यदि अनुरोध भेजते समय क्षमता भर जाती है तो आपको प्रतीक्षालय में भेज दिया जाएगा।

हम इस तर्क को क्लाउडफ्लेयर वर्कर्स पर लागू करेंगे। हम Upstash का उपयोग Redis स्टोर के रूप में करेंगे। आइए अब इन तकनीकी निर्णयों की पृष्ठभूमि के बारे में बताते हैं।

क्यों Cloudflare श्रमिक?

प्रतीक्षालय कार्यान्वयन आपकी वेबसाइट के सभी अनुरोधों को रोक देगा। तो इसका प्रदर्शन ओवरहेड न्यूनतम होना चाहिए। क्लाउडफ्लेयर वर्कर्स क्लाउडफ्लेयर एज इंफ्रास्ट्रक्चर का लाभ उठाते हैं, इसलिए यह आपको विश्व स्तर पर न्यूनतम विलंबता प्रदान करता है। साथ ही AWS लैम्ब्डा के विपरीत, इसमें कोल्ड स्टार्ट की समस्या नहीं है। यह एक सर्वर रहित तकनीक है इसलिए मापनीयता भी कोई समस्या नहीं है।

Upstash Redis क्यों?

प्रत्येक नए आगंतुक को अनुमति देने से पहले आपको वेबसाइट के वर्तमान आकार की जांच करनी होगी। क्लाउडफ्लेयर वर्कर्स स्टेटलेस है इसलिए आपको इस जानकारी को बाहरी रूप से रखने की जरूरत है। कम विलंबता के साथ रेडिस सबसे अच्छा विकल्प है। लेकिन रेडिस प्रसाद के लिए टीसीपी आधारित कनेक्शन की आवश्यकता होती है जो क्लाउडफ्लेयर वर्कर्स द्वारा समर्थित नहीं हैं। अपस्टैश एकमात्र रेडिस पेशकश है जिसमें बिल्ट इन आरईएसटी एपीआई है। इसके अलावा वैश्विक प्रतिकृति के लिए धन्यवाद, यह आपको पूरी दुनिया में कम विलंबता देता है।

चरण दर चरण कार्यान्वयन

हम परियोजना को चरण दर चरण नीचे लागू करेंगे। यदि आप परियोजना का क्लोन बनाना चाहते हैं और सीधे अपनी वेब साइट के लिए प्रतीक्षालय स्थापित करना चाहते हैं, तो आप स्रोत कोड के रीडमी में दिए गए चरणों का पालन कर सकते हैं।

1 प्रोजेक्ट सेटअप

रैंगलर का उपयोग करके एक प्रोजेक्ट बनाएं।

wrangler generate waiting-room

फिर निर्भरताएँ स्थापित करें:

npm install cookie upstash@redis

2 wrangler.toml अपडेट करें

प्रकार अपडेट करें:

type = "webpack"

अपना Cloudflare अकाउंट आईडी सेट करें। अपनी खाता आईडी खोजने के लिए इसे जांचें।

account_id = "REPLACE_HERE"

ये चर जोड़ें:

[vars]
UPSTASH_REDIS_REST_TOKEN = "REPLACE_HERE"
UPSTASH_REDIS_REST_URL = "REPLACE_HERE"
TOTAL_ACTIVE_USERS = 10
SESSION_DURATION_SECONDS = 30

आपको Upstash कंसोल से एक ग्लोबल डेटाबेस बनाना होगा। आपको बस कंसोल से REST टोकन और URL को कॉपी और पेस्ट करना होगा। रेडिस डेटाबेस प्रारंभ में खाली होना चाहिए और केवल इस एप्लिकेशन द्वारा उपयोग किया जाना चाहिए।

आपको अपनी आवश्यकताओं के आधार पर TOTAL_ACTIVE_USERS और SESSION_DURATION_SECONDS सेट करने चाहिए।

3 index.js

Index.js क्लाउडफ्लेयर वर्कर्स कार्यान्वयन फ़ाइल है। तो हम इसके अंदर सारा लॉजिक डाल देंगे। इसमें नीचे दिए गए कोड को कॉपी और पेस्ट करें:

import { parse } from "cookie";
import { Redis } from "@upstash/redis/cloudflare";

const redis = Redis.fromEnv();

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (err) => new Response(err.stack, { status: 500 })
    )
  );
});

const COOKIE_NAME_ID = "__waiting_room_id";
const COOKIE_NAME_TIME = "__waiting_room_last_update_time";

const init = {
  headers: {
    Authorization: "Bearer " + UPSTASH_REDIS_REST_TOKEN,
  },
};

async function handleRequest(request) {
  const { pathname } = new URL(request.url);
  if (!pathname.startsWith("/favicon")) {
    const cookie = parse(request.headers.get("Cookie") || "");
    let userId;

    if (cookie[COOKIE_NAME_ID] != null) {
      userId = cookie[COOKIE_NAME_ID];
    } else {
      userId = makeid(8);
    }

    const size = await redis.dbsize();
    console.log("current capacity:" + size);
    // there is enough capacity
    if (size < TOTAL_ACTIVE_USERS) {
      return getDefaultResponse(request, cookie, userId);
    } else {
      // site capacity is full
      const user = await redis.get(userId);
      if (user === "1") {
        // the user has already active session
        return getDefaultResponse(request, cookie, userId);
      } else {
        // capacity is full so the user is forwarded to waiting room
        return getWaitingRoomResponse(userId);
      }
    }
  } else {
    return fetch(request);
  }
}

async function getDefaultResponse(request, cookie, userId) {
  // uncomment below to test the function with a static html content
  // const newResponse = new Response(default_html)
  // newResponse.headers.append('content-type', 'text/html;charset=UTF-8')

  const response = await fetch(request);
  const newResponse = new Response(response.body, response);

  const now = Date.now();
  let lastUpdate = cookie[COOKIE_NAME_TIME];
  if (!lastUpdate) lastUpdate = 0;
  const diff = now - lastUpdate;
  const updateInterval = (SESSION_DURATION_SECONDS * 1000) / 2;
  if (diff > updateInterval) {
    await redis.setex(userId, SESSION_DURATION_SECONDS, 1);
    newResponse.headers.append(
      "Set-Cookie",
      `${COOKIE_NAME_TIME}=${now}; path=/`
    );
  }

  newResponse.headers.append(
    "Set-Cookie",
    `${COOKIE_NAME_ID}=${userId}; path=/`
  );
  return newResponse;
}

async function getWaitingRoomResponse(userId) {
  const newResponse = new Response(waiting_room_html);
  newResponse.headers.set("content-type", "text/html;charset=UTF-8");
  return newResponse;
}

function makeid(length) {
  let result = "";
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  const charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

const waiting_room_html = `
<title>Waiting Room</title>
<meta http-equiv='refresh' content='30' />

<style>*{box-sizing:border-box;margin:0;padding:0}body{line-height:1.4;font-size:1rem;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;padding:2rem;display:grid;place-items:center;min-height:100vh}.container{width:100%;max-width:800px}p{margin-top:.5rem}</style>

<div class='container'>
  <h1>
    <div>You are now in line.</div>
    <div>Thanks for your patience.</div>
  </h1>
  <p>We are experiencing a high volume of traffic. Please sit tight and we will let you in soon. </p>
  <p><b>This page will automatically refresh, please do not close your browser.</b></p>
</div>
`;

const default_html = `
<title>Waiting Room Demo</title>

<style>*{box-sizing:border-box;margin:0;padding:0}body{line-height:1.4;font-size:1rem;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;padding:2rem;display:grid;place-items:center;min-height:100vh}.container{width:100%;max-width:800px}p{margin-top:.5rem}</style>

<div class="container">
  <h1>
    <div>Waiting Room Demo</div>
  </h1>
    <p>
              Visit this site from a different browser, you will be forwarded to the waiting room when the capacity is full.
    </p>
  <p>  Check <a href={"https://github.com/upstash/waiting-room"} style={{"color": "blue"}}>this project </a> to set up a waiting room for your website.</p>
</div>
`;

उपरोक्त कोड में, आप waiting_room_html . को संपादित कर सकते हैं चर। यह प्रतीक्षालय पृष्ठ का स्थिर html है।

आपकी वेबसाइट की उपलब्धता के आधार पर handleRequest विधि या तो getDefaultResponse या getWaitingRoomResponse लौटाती है।

4 स्थानीय रूप से चलाएं

स्थानीय स्तर पर प्रतीक्षालय का परीक्षण करने के लिए, क्षमता को 1, सत्र की अवधि 30 सेकंड पर सेट करना समझदारी हो सकती है। फिर दौड़ें

wrangler dev

अब क्रोम पर https://127.0.0.1:8787/ खोलें, आप देखेंगे:

और फिर उसी यूआरएल को सफारी (या क्रोम गुप्त) पर खोलें, आप देखेंगे:

30 सेकंड से अधिक समय तक प्रतीक्षा करें। आपको देखना चाहिए कि प्रतीक्षा कक्ष में पृष्ठ ताज़ा होगा और वेबसाइट में प्रवेश करेगा।

हमारा लोकल वास्तविक वेबसाइट पर फॉरवर्ड नहीं करता है इसलिए हमें Cloudflare का 404 पेज दिखाई देता है, यह ठीक है।

5 प्रकाशित करें

अपने CF वर्कर्स फंक्शन को इसके साथ परिनियोजित करें:

wrangler publish

यह आपको एक यूआरएल देगा जैसे:https://waiting-room.upsdev.workers.dev/

अब हमारे कार्यकर्ता को आपकी वेबसाइट पर रूट करते हैं। सबसे पहले आपके डोमेन के नेमसर्वर को Cloudflare की ओर इशारा करना चाहिए। इसे देखो। फिर, आपको अपने डोमेन को एक रूट के रूप में जोड़ना होगा और CF वर्कर्स डैशबोर्ड में अपने वर्कर्स फ़ंक्शन का चयन करना होगा।

निष्कर्ष

हमने क्लाउडफ्लेयर वर्कर्स और अपस्टैश रेडिस की बदौलत अपने एप्लिकेशन कोड को छुए बिना सफलतापूर्वक एक प्रतीक्षालय का निर्माण किया है। हमारा मानना ​​है कि यह इस बात का एक और संकेतक है कि Upstash के साथ एज फंक्शन कितने शक्तिशाली हो जाते हैं।

इसमें सुधार करने के लिए चीजें हैं:

• अनुमानित प्रतीक्षा समय:हम औसत प्रतीक्षा समय की गणना और दिखा सकते हैं।
• निष्पक्ष और व्यवस्थित कतार:वर्तमान में प्रतीक्षारत आगंतुक उपलब्धता होने पर साइट पर बेतरतीब ढंग से प्रवेश करते हैं। हम एक कतार रख सकते हैं और आगंतुकों को क्रमबद्ध तरीके से जाने देने का प्रयास कर सकते हैं।

उपरोक्त दोनों सुधारों के लिए अधिक स्थिति रखने और अधिक दूरस्थ कॉल करने की आवश्यकता है। इसलिए हमने उन्हें छोड़ना पसंद किया। यदि आपके उपयोग के मामले में उनकी सख्त आवश्यकता है, तो आप क्लाउडफ्लेयर टीम के उनके उद्यम समाधान पर काम से प्रेरित होने के लिए इस ब्लॉग की जांच कर सकते हैं।

स्रोत कोड की जाँच करें।

हमें Twitter या Discord पर अपने विचार बताएं।