অনায়াসে Next.js-এ রিয়েল-টাইম বৈশিষ্ট্য একত্রিত করুন

Next.js-এ রিয়েলটাইম ফিচার যোগ করা খারাপ 💀

আমি কিছু বলতে চাইছি:

Vercel AI SDK-এর জন্য রিয়েলটাইম স্ট্রীম
লাইভ ড্যাশবোর্ড
লাইভ বিজ্ঞপ্তি এবং আপডেট
লাইভ কার্সার বা 'কে অনলাইন আছে' সূচক
ফাইল আপলোড বা দীর্ঘ-চলমান কাজের জন্য অগ্রগতি ট্র্যাকিং

এবং এটি অবশ্যই SaaS এর অভাবের জন্য নয় যা আপনি এই উদ্দেশ্যে ব্যবহার করতে পারেন। বিদ্যমান পরিষেবাগুলি হল:

ব্যয় এবং অস্পষ্ট মূল্য আছে (Ably)
খারাপ ডেভেলপার অভিজ্ঞতার (Pusher) সাথে টাইপ-নিরাপদ নয়
অসাধারণ (উত্তল, সুপাবেস), কিন্তু আপনার সম্পূর্ণ স্ট্যাক স্থানান্তর না করে রিয়েলটাইম যোগ করা কঠিন

Upstash রিয়েলটাইমের লক্ষ্য

আমি একটি রিয়েলটাইম পরিষেবা চেয়েছিলাম যেটি ছিল

সামনে এবং ব্যাকএন্ডে 100% টাইপ-নিরাপদ
ভার্সেল এবং অন্যান্য সার্ভারহীন প্ল্যাটফর্মে স্থাপনযোগ্য
ইভেন্টের উপর ভিত্তি করে দাম, সংযোগের সময় নয়
যেকোনো বিদ্যমান ডাটাবেসের সাথে ব্যবহারযোগ্য (নিয়ন, প্ল্যানেটস্কেল, সবকিছু)

তাই আমরা আপস্ট্যাশ রিয়েলটাইম তৈরি করছি যা ঠিক সেরকম। যেকোনো Next.js অ্যাপে রিয়েলটাইম ফিচার যোগ করার সবচেয়ে সহজ উপায়। সেটআপে 2 মিনিট সময় লাগে এবং ভার্সেল, ক্লাউডফ্লেয়ার বা অন্যদের কাজে লাগানো যায়।

আমি এটি করার সমস্ত বিদ্যমান উপায় ঘৃণা করি 🤡

আমি Contentport নামে একটি ওপেন-সোর্স SaaS তৈরি থেকে রিয়েলটাইমের ধারণা পেয়েছি। আপনি যখন কনটেন্টপোর্টের মাধ্যমে একটি টুইট পোস্ট করেন, তখন আমরা একটি আপস্ট্যাশ ওয়ার্কফ্লোতে পোস্টিং লজিক চালাই যা ব্যর্থ হলে স্বয়ংক্রিয়ভাবে পুনরায় চেষ্টা করা হয়।

এইভাবে, এমনকি Twitter API বন্ধ থাকলেও, আমাদের AI প্রদানকারীর একটি বিভ্রাট বা অন্য কিছু ভুল হয়, আমরা পোস্ট করা ব্যক্তির জন্য অত্যন্ত উচ্চ নির্ভরযোগ্যতার গ্যারান্টি দিতে পারি।

কিন্তু যেহেতু এই যুক্তিটি একটি ব্যাকগ্রাউন্ড কাজের মধ্যে চলে, তাই ক্লায়েন্ট এবং পোস্টিং লজিকের মধ্যে কোন সংযোগ নেই। অন্য কথায়, বর্তমান অবস্থা সম্পর্কে ক্লায়েন্টকে বলার কোনো উপায় নেই (যেমন 'প্রসেসিং', 'পোস্টিং', বা 'সাফল্য')।

অনায়াসে Next.js-এ রিয়েল-টাইম বৈশিষ্ট্য একত্রিত করুন

ক্লায়েন্টকে রিয়েল-টাইমে স্ট্যাটাস আপডেট পাঠাতে, আমার কিছু বার্তা ব্রোকার দরকার ছিল।

আমি পুশারের সাথে খুব অসন্তুষ্ট ছিলাম এবং রিয়েলটাইম বৈশিষ্ট্যের জন্য আমাদের বিদ্যমান নিয়ন পোস্টগ্রেস ডাটাবেসকে উত্তল-এ স্থানান্তর করতে চাইনি। এবং দেখা যাচ্ছে, আমাদের সবচেয়ে পরিপক্ক পণ্য, Upstash Redis-এ এই কাজটি করার জন্য আমার যা যা প্রয়োজন তা রয়েছে:পাব/সাব এবং রেডিস স্ট্রিম।

দ্রুত উদাহরণ

আসুন একটি সাধারণ উদাহরণ তৈরি করি যা একটি সার্ভার অ্যাকশন থেকে ক্লায়েন্টকে রিয়েলটাইম আপডেট পাঠায়৷

৷

প্রথমে, আমরা প্যাকেজটি ইনস্টল করি:

npm install @upstash/realtime

তারপর আমরা জোড ব্যবহার করে ইভেন্ট সংজ্ঞায়িত করি:

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>;

যেকোনো রুট হ্যান্ডলারে ইভেন্ট পাঠান:

route.ts

import { realtime } from "@/lib/realtime";
 
await realtime.emit("notification", { message: "Hello world!" });

আপনার প্রতিক্রিয়া উপাদানের ইভেন্টগুলিতে সদস্যতা নিন:

page.tsx

import { RealtimeEvents } from "@/lib/realtime";
import { useRealtime } from "@upstash/realtime/client";
 
useRealtime<RealtimeEvents>({
 event: "notification",
 onData: ({ message }) => {
 console.log(message);
 },
});

তাই তো! আমাদের কাছে এখন সার্ভার থেকে ক্লায়েন্ট পর্যন্ত সম্পূর্ণ টাইপ-নিরাপদ রিয়েলটাইম আপডেট রয়েছে।

অস্বীকৃতি

আপস্ট্যাশ রিয়েলটাইমকে 1:1 পুশার প্রতিস্থাপন হিসাবে বোঝানো হয় না কারণ আমরা HTTP ব্যবহার করি এবং পুশারের মতো সকেট ব্যবহার করি না।

তাই যদিও HTTP সম্ভবত আরও নির্ভরযোগ্য, অত্যন্ত উচ্চ ফ্রিকোয়েন্সি আপডেটের জন্য (>15-20 প্রতি সেকেন্ড), আমি তাদের সকেট সংযোগের কারণে পুশারকে সুপারিশ করি৷

কিন্তু অন্য যেকোন কিছুর জন্য, যেমন Vercel-এর AI SDK থেকে উচ্চ-ফ্রিকোয়েন্সি AI খণ্ড আপডেট, লাইভ ড্যাশবোর্ড বা লাইভ চ্যাট বার্তা, আমরা উপস্থাপক রিয়েলটাইম তৈরি করছি যা যেতে পারে৷

আপনার এটি চেষ্টা করা উচিত, এটি শুরু করা খুবই সহজ!

পড়ার জন্য ধন্যবাদ! 🙌 প্রশ্ন বা প্রতিক্রিয়া আছে? সরাসরি আমার সাথে যোগাযোগ করুন @joshtriedcoding.