Next.js-এ রিয়েল-টাইম ফিচার যোগ করা চূড়ান্ত 💀
মানে জিনিসগুলো:
- Vercel AI SDK-এর জন্য রিয়েল-টাইম স্ট্রিম
- লাইভ ড্যাশবোর্ড
- লাইভ নোটিফিকেশন এবং আপডেট
- লাইভ কারসর বা 'কौন অনলাইন' ইন্ডিকেটর
- ফাইল আপলোড বা লং-রানিং টাস্কের জন্য প্রগ্রেস ট্র্যাকিং
এবং এটি কতাল না এই উদ্দেশ্যে ব্যবহার করার জন্য SaaSের অভাবের জন্য। এক্সিস্টিং সার্ভিসগুলো:
- মহান্গা এবং অস্পষ্ট প্রাইসিং (Ably)
- টাইপ-সেফ নয় এবং খারাপ ডেভেলপার এক্সপেরিয়েন্স (Pusher)
- চমৎকার (Convex, Supabase), কিন্তু রিয়েল-টাইম যোগ করা কঠিন আপনার পুরো স্ট্যাক মাইগ্রেট না করলে
Upstash Realtime-এর লক্ষ্য
আমি একটি রিয়েল-টাইম সার্ভিস চেয়েছিলাম যেটা
- ১০০% টাইপ-সেফ ফ্রন্ট-এন্ড এবং ব্যাক-এন্ডে
- Vercel এবং অন্যান্য সার্ভারলেস প্ল্যাটফর্মে ডিপ্লয়েবল
- ইভেন্ট-বেসড প্রাইসিং, কানেকশন টাইম-বেসড নয়
- যেকোনো এক্সিস্টিং ডাটাবেসের সাথে ব্যবহারযোগ্য (Neon, Planetscale, সবকিছু)
তাই আমরা Upstash Realtime বানাচ্ছি ঠিক সেটা হয়ে। যেকোনো Next.js অ্যাপে রিয়েল-টাইম ফিচার যোগ করার সবচেয়ে সহজ উপায়। সেটআপ লাগে ২ মিনিট এবং Vercel, Cloudflare বা অন্যদের ডিপ্লয়েবল।
মुझे 모든 существующие способы это сделать 🤡
আমি Realtime-এর আইডিয়া পেলাম Contentport নামে একটি ওপেন-সোর্স SaaS বানাতে সময়। আপনি Contentport-এ টweet পোস্ট করলে, আমরা পোস্টিং লজিক Upstash Workflow-এ রান করি যা ফেইল হলে অটোমেটিক্যালি রিট্রাই হয়।
এভাবে, যদি Twitter API ডাউন থাকে, আমাদের AI প্রোভাইডারের আউটেজ থাকে, বা অন্য কিছু ভুল হয়, আমরা পোস্ট করার ব্যক্তিকে অত্যন্ত হাই রিলায়েবিলিটি গ্যারান্টি দিতে পারি।
তবে যেহেতু এই লজিক একটি ব্যাকগ্রাউন্ড জবে রান করে, ক্লায়েন্ট এবং পোস্টিং লজিকের মাঝপথে কোনো কানেকশন নেই। অন্য কথায়, ক্লায়েন্টকে কারেন্ট স্ট্যাটাস জানাতে (যেন 'প্রসেসিং', 'পোস্টিং', বা 'সাকসেস') কোনো উপায় নেই।
ক্লায়েন্টকে রিয়েল-টাইমে স্ট্যাটাস আপডেট পাঠাতে, আমাকে যেকোনো মেসেজ ব্রোকার দরকার ছিল।
আমি Pusher-র সাথে খুব অনহ্যাপি ছিলাম এবং আমাদের এক্সিস্টিং Neon Postgres ডাটাবেস Convex-এ মাইগ্রেট করতে চাইনি শুধু রিয়েল-টাইম ফিচারের জন্য। এবং বের হয়েছে, আমাদের সবচেয়ে মেচিউর প্রোডাক্ট, Upstash Redis, সবকিছু ছিল যা আমার দরকার ছিল এটা কাজ করার জন্য: Pub/sub এবং Redis Streams।
দ্রুত উদাহরণ
চলে একটি সিম্পল উদাহরণ বানাই যা সার্ভার অ্যাকশন থেকে ক্লায়েন্টে রিয়েল-টাইম আপডেট পাঠায়।
প্রথমে, প্যাকেজটি ইনস্টল করুন:
npm install @upstash/realtimeতারপর zod ব্যবহার করে ইভেন্ট ডিফাইন করুন:
lib/realtime.ts
import { InferRealtimeEvents, Realtime } from "@upstash/realtime";
import z from "zod/v4";
import { redis } from "./redis";
const schema = {
notification: z.object({
message: z.string(),
}),
};
const realtime = new Realtime({ schema, redis });
export type RealtimeEvents = InferRealtimeEvents<typeof realtime>;যেকোনো রুট হ্যান্ডলারে ইভেন্ট.emit করুন:
route.ts
import { realtime } from "@/lib/realtime";
await realtime.emit("notification", { message: "Hello world!" });আপনার React কম্পোনেন্টে ইভেন্ট সাবস্ক্রাইব করুন:
page.tsx
import { RealtimeEvents } from "@/lib/realtime";
import { useRealtime } from "@upstash/realtime/client";
useRealtime<RealtimeEvents>({
event: "notification",
onData: ({ message }) => {
console.log(message);
},
});এটাই! এখন আমাদের पास ফুলি টাইপ-সেফ রিয়েল-টাইম আপডেট সার্ভার থেকে ক্লায়েন্টে।
Disclaimer
Upstash Realtime একটি ১:১ Pusher রিপ্লেসমেন্ট নয় কারণ আমরা HTTP ব্যবহার করি এবং Pusher-এর মত সকেট নয়।
তবে HTTP সম্ভবত বেশি রিলায়েবল, অত্যন্ত হাই ফ্রিকোয়েন্সি আপডেট (>১৫-২০ পার সেকেন্ড) এর জন্য, আমি Pusher রিকমেন্ড করি তাদের সকেট কানেকশনের জন্য।
তবে অন্য সব কেসের জন্য, যেন হাই-ফ্রিকোয়েন্সি AI চাঙ্ক আপডেট Vercel-এর AI SDK থেকে, লাইভ ড্যাশবোর্ড বা লাইভ চ্যাট মেসেজ, আমরা Upstash Realtime কে গো-টু বানাচ্ছি।
আপনাকে চেষ্টা করা উচিত, এটা সুপার ইজি শুরু করার জন্য!
পড়ার জন্য ধন্যবাদ! 🙌 প্রশ্ন বা ফিডব্যাক থাকলে সরাসরি @joshtriedcoding-এ যোগাযোগ করুন।
