এই পোস্টে, আমরা আপনার Next.js অ্যাপ্লিকেশনের জন্য একটি ওয়েটিং রুম তৈরি করব Vercel Edge functions এবং Upstash Redis ব্যবহার করে।

আপনি সোর্স কোড এবং ডেমো অ্যাপ চেক করতে পারেন।

ওয়েটিং রুম?

ওয়েটিং রুম উপযোগী যখন আপনি আপনার ওয়েবসাইটে একসাথে সক্রিয় ভিজিটরের সংখ্যা সীমাবদ্ধ করতে চান যাতে আপনার রিসোর্স ওভারলোড না হয়।

আমাদের ইমপ্লিমেন্টেশনে, আপনি সর্বোচ্চ সক্রিয় ভিজিটরের সংখ্যা সেট করতে পারবেন। ট্রাফিক কন্ট্রোল করার জন্য দুটি প্যারামিটার থাকবে:

• ম্যাক্স ওয়েবসাইট ক্যাপাসিটি: একই সময়ে ওয়েবসাইটে সর্বোচ্চ কতজন ভিজিটর থাকতে পারবে?
• ম্যাক্স সেশন টাইমআউট: সর্বোচ্চ কত সেকেন্ড একজন ভিজিটর আইডল থাকতে পারবে

ধাপ ১: প্রোজেক্ট সেটআপ

Next.js অ্যাপ তৈরি করুন:

npx create-next-app@latest --typescript

upstash-redis ইনস্টল করুন:

npm install @upstash/redis

ধাপ ২: ইমপ্লিমেন্টেশন

Vercel Next.js middleware-এর মাধ্যমে Edge functions সাপোর্ট করে। তাই আমরা 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);
  
  // পর্যাপ্ত ক্যাপাসিটি আছে
  if (size < TOTAL_ACTIVE_USERS) {
    return getDefaultResponse(req, userId);
  } else {
    // সাইট ক্যাপাসিটি ফুল
    const user = await redis.get(userId);
    if (user === "1") {
      // ইউজারের ইতিমধ্যে এক্টিভ সেশন আছে
      return getDefaultResponse(req, userId);
    } else {
      // ক্যাপাসিটি ফুল তাই ইউজারকে ওয়েটিং রুমে ফরোয়ার্ড করা হবে
      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) {
  // নিচের অংশটি আনকমেন্ট করুন স্ট্যাটিক HTML কন্টেন্ট দিয়ে ফাংশন টেস্ট করতে
  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 = `
  
  
  
  

    

      
You are now in line.
      
Thanks for your patience.
    
    
We are experiencing a high volume of traffic. Please sit tight and we will let you in soon. 
    
This page will automatically refresh, please do not close your browser.
  
`;

const default_html = `
  
  
  

    

      
Waiting Room Demo
    
    
 Visit this site from a different browser, you will be forwarded to the waiting room when the capacity is full. 
    
 Check this project  to set up a waiting room for your website.
  
`;

আমরা Upstash রেডিসকে স্টেট স্টোর হিসেবে ব্যবহার করছি এক্টিভ ইউজার সেশন রাখতে। এর REST API-এর কারণে, upstash-redis Vercel Edge functions-এর সাথে কম্প্যাটিবল।

আপনাকে Upstash কনসোল থেকে একটি গ্লোবাল ডেটাবেস তৈরি করতে হবে। কনসোল থেকে REST টোকেন এবং REST URL কপি এবং পেস্ট করুন। রেডিস ডেটাবেসটি খালি হওয়া উচিত এবং শুধু এই অ্যাপ্লিকেশন দ্বারা ব্যবহৃত।

আপনার নিজস্ব আবশ্যকতার উপর ভিত্তি করে TOTAL_ACTIVE_USERS এবং SESSION_DURATION_SECONDS সেট করুন।

অ্যাপ্লিকেশন নতুন ভিজিটরের জন্য একটি ইউনিক আইডি তৈরি করে এবং এটিকে কুকি হিসেবে সেট করে এবং রেডিসে পুশ করে। তাই পরবর্তীবার, অ্যাপ্লিকেশন রেডিস চেক করে ভিজিটরের ইতিমধ্যে সেশন আছে কিনা। রেডিসে ইনসার্ট করার সময়, এটি সেশন আইডল টাইমআউট হিসেবে এক্সপিরেশন টাইম সেট করে। যদি সেশন সংখ্যা ম্যাক্স-ক্যাপাসিটি এক্সিড করে, নতুন ইউজারকে ওয়েটিং রুম পেজে ফরোয়ার্ড করা হয়।

আপনি waiting_room_html আপডেট করতে পারেন ওয়েটিং রুম পেজ কাস্টমাইজ করার জন্য।

আপনি getDefaultResponse() মেথড আপডেট করতে পারেন আপনার নিজস্ব পেজে ফরোয়ার্ড করার জন্য NextResponse ব্যবহার করে।

ধাপ ৩: রান এবং ডিপ্লয়

অ্যাপ্লিকেশন লোকালি চালান npm run dev-দিয়ে। আপনি TOTAL_ACTIVE_USERS-এ ১ সেট করতে চাইতে পারেন এবং পেজটি (https://localhost:3000/api/hello) ভিন্ন ব্রাউজারে খুলতে পারেন সহজে ওয়েটিং রুম টেস্ট করার জন্য।

আপনি আপনার অ্যাপ্লিকেশন Vercel-এ ডিপ্লয় করতে পারেন

vercel deploy –prod

Vercel _middleware.ts-কে এজ লোকেশনগুলোতে রান করবে গ্লোবালি লেটেন্সি মিনিমাইজ করার জন্য।

উপসংহার

এই টিউটোরিয়াল দেখাচ্ছে Vercel এবং Upstash-এর অনুগ্রহে এজ-এ ডাইনামিক অ্যাপ্লিকেশন বিল্ড করা কতটা সহজ। আরও উদাহরণের জন্য আমাদের examples চেক করুন।

আপনার ফিডব্যাকের জন্য অপেক্ষা করছি Twitter-এ বা Discord-এ।