एज फंक्शंस का उपयोग करके आपके Next.js ऐप के लिए प्रतीक्षालय

इस पोस्ट में, हम Vercel Edge फंक्शन और Upstash Redis का उपयोग करके आपके Next.js एप्लिकेशन के लिए वेटिंग रूम बनाएंगे।

आप सोर्स कोड और डेमो ऐप देख सकते हैं।

वेटिंग रूम?

प्रतीक्षा कक्ष तब उपयोगी होता है जब आप अपनी वेबसाइट पर सक्रिय आगंतुकों की संख्या को सीमित करना चाहते हैं ताकि आपके संसाधनों को अधिभारित न किया जा सके।

हमारे कार्यान्वयन में, आप सक्रिय आगंतुकों की अधिकतम संख्या निर्धारित करने में सक्षम होंगे। ट्रैफ़िक को नियंत्रित करने के लिए दो पैरामीटर होंगे:

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

चरण 1:प्रोजेक्ट सेटअप

एक Next.js ऐप बनाएं:

examples git:(master) ✗ npx create-next-app@latest --typescript

✔ What is your project named? … nextjs-waiting-room

Creating a new Next.js app in /Users/enes/dev/examples/nextjs-waiting-room.

अपस्टैश-रेडिस स्थापित करें:

npm install @upstash/redis

चरण 2:कार्यान्वयन

वर्सेल नेक्स्ट.जेएस मिडलवेयर के जरिए एज फंक्शन को सपोर्ट करता है। इसलिए हम pages/api/ . के अंतर्गत _middleware.ts जोड़ेंगे . मिडलवेयर कोड /api को किए गए सभी अनुरोधों को रोकता है। विभिन्न विन्यासों के लिए यहां देखें।

अपडेट करें pages/api/_middleware.ts नीचे के रूप में:

import { Redis } from "@upstash/redis";
import { NextFetchEvent, NextRequest, NextResponse } from "next/server";

const COOKIE_NAME_ID = "__waiting_room_id";
const COOKIE_NAME_TIME = "__waiting_room_last_update_time";
const UPSTASH_REDIS_REST_TOKEN = "REPLACE_HERE";
const UPSTASH_REDIS_REST_URL = "REPLACE_HERE";
const TOTAL_ACTIVE_USERS = 10;
const SESSION_DURATION_SECONDS = 30;

const redis = new Redis({
  url: UPSTASH_REDIS_REST_URL,
  token: UPSTASH_REDIS_REST_TOKEN,
});

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  const cookies = req.cookies;
  let userId;
  if (cookies[COOKIE_NAME_ID] != null) {
    userId = cookies[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(req, userId);
  } else {
    // site capacity is full
    const user = await redis.get(userId);
    if (user === "1") {
      // the user has already active session
      return getDefaultResponse(req, userId);
    } else {
      // capacity is full so the user is forwarded to waiting room
      return getWaitingRoomResponse();
    }
  }
}

function makeid(length: number) {
  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;
}

async function getDefaultResponse(request: NextRequest, userId: string) {
  // uncomment below to test the function with a static html content
  let newResponse = new NextResponse(default_html);
  newResponse.headers.set("content-type", "text/html;charset=UTF-8");

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

  const cookies = request.cookies;
  const now = Date.now();
  let lastUpdate = cookies[COOKIE_NAME_TIME];
  let lastUpdateTime = 0;
  if (lastUpdate) lastUpdateTime = parseInt(lastUpdate);
  const diff = now - lastUpdateTime;
  const updateInterval = (SESSION_DURATION_SECONDS * 1000) / 2;
  if (diff > updateInterval) {
    await redis.setex(userId, SESSION_DURATION_SECONDS, "1");
    newResponse.cookie(COOKIE_NAME_TIME, now.toString());
  }
  newResponse.cookie(COOKIE_NAME_ID, userId);
  return newResponse;
}

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

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='//github.com/upstash/redis-examples/tree/master/nextjs-waiting-room' style={{"color": "blue"}}>this project </a> to set up a waiting room for your website.</p>
</div>
`;

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

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

अपनी आवश्यकताओं के आधार पर TOTAL_ACTIVE_USERS और SESSION_DURATION_SECONDS भी सेट करें।

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

आप waiting_room_html को अपडेट कर सकते हैं प्रतीक्षालय पृष्ठ को अनुकूलित करने के लिए।

आप getDefaultResponse() को अपडेट कर सकते हैं NextResponse का उपयोग करके अपने स्वयं के पृष्ठ पर अग्रेषित करने की विधि।

चरण 3:भागो और परिनियोजित करें

एप्लिकेशन को स्थानीय रूप से npm run dev . द्वारा चलाएँ . आप 1 को TOTAL_ACTIVE_USERS . पर सेट करना चाह सकते हैं और वेटिंग रूम का आसानी से परीक्षण करने के लिए विभिन्न ब्राउज़रों में पेज (https://localhost:3000/api/hello) खोलें।

आप अपने आवेदन को Vercel में

vercel deploy –prod

वर्सेल विश्व स्तर पर लेटेंसी को कम करने के लिए किनारे के स्थानों में _middleware.ts चलाएगा।

निष्कर्ष

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

Twitter या Discord पर आपकी प्रतिक्रिया की प्रतीक्षा कर रहा है।