Next.js में रियल-टाइम फीचर्स को सहजता से एकीकृत करें

Next.js में रियलटाइम फीचर्स जोड़ना बेकार है 💀

मेरा मतलब है चीजें जैसे:

Vercel AI SDK के लिए रियलटाइम स्ट्रीम्स
लाइव डैशबोर्ड्स
लाइव नोटिफिकेशन और अपडेट
लाइव कर्सर या 'कौन ऑनलाइन है' संकेतक
फाइल अपलोड या लंबे समय तक चलने वाले कार्यों के लिए प्रगति ट्रैकिंग

और यह निश्चित रूप से केवल इस उद्देश्य के लिए उपयोग किए जा सकने वाले SaaS की कमी के लिए नहीं है। मौजूदा सेवाएं हैं:

महंगी और अस्पष्ट मूल्य निर्धारण (Ably)
खराब डेवलपर अनुभव के साथ टाइप-सेफ नहीं (Pusher)
बहुत बढ़िया (Convex, Supabase), लेकिन अपने पूरे स्टैक को माइग्रेट किए बिना रियलटाइम जोड़ना कठिन

Upstash Realtime का लक्ष्य

मैं एक रियलटाइम सेवा चाहता था जो

फ्रंट-एंड और बैकएंड में 100% टाइप-सेफ हो
Vercel और अन्य सर्वरलेस प्लेटफॉर्म पर डिप्लॉय करने योग्य हो
कनेक्शन समय के बजाय इवेंट्स के आधार पर मूल्य निर्धारण हो
किसी भी मौजूदा डेटाबेस (Neon, Planetscale, सब कुछ) के साथ उपयोग करने योग्य हो

इसलिए हम Upstash Realtime को ठीक वैसा ही बनाने के लिए बना रहे हैं। किसी भी Next.js ऐप में रियलटाइम फीचर्स जोड़ने का सबसे आसान तरीका। सेटअप में 2 मिनट लगते हैं और Vercel, Cloudflare या अन्य पर डिप्लॉय करने योग्य।

मुझे इसे करने के सभी मौजूदा तरीकों से नफरत थी 🤡

मुझे Realtime का विचार Contentport नामक एक ओपन-सोर्स SaaS बनाते समय मिला। जब आप Contentport के माध्यम से एक ट्वीट पोस्ट करते हैं, तो हम पोस्टिंग लॉजिक को एक Upstash वर्कफ्लो में चलाते हैं जो विफलता पर स्वचालित रूप से पुनः प्रयास करता है।

इस तरह, भले ही Twitter API डाउन हो, हमारे AI प्रदाता का आउटेज हो, या कुछ और गलत हो, हम पोस्ट करने वाले व्यक्ति को अत्यधिक उच्च विश्वसनीयता की गारंटी दे सकते हैं।

लेकिन क्योंकि यह लॉजिक बैकग्राउंड जॉब में चलता है, क्लाइंट और पोस्टिंग लॉजिक के बीच कोई कनेक्शन नहीं है। दूसरे शब्दों में, क्लाइंट को वर्तमान स्थिति (जैसे 'प्रोसेसिंग', 'पोस्टिंग', या 'सफलता') के बारे में बताने का कोई तरीका नहीं है।

Next.js में रियल-टाइम फीचर्स को सहजता से एकीकृत करें

क्लाइंट को रियल-टाइम में स्टेटस अपडेट भेजने के लिए, मुझे किसी प्रकार के मैसेज ब्रोकर की आवश्यकता थी।

मैं 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;

किसी भी रूट हैंडलर में इवेंट्स भेजें:

// 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({
  event: "notification",
  onData: ({ message }) => {
    console.log(message);
  },
});

बस! अब हमारे पास सर्वर से क्लाइंट तक पूरी तरह से टाइप-सेफ रियलटाइम अपडेट हैं।

अस्वीकरण

Upstash Realtime Pusher का 1:1 प्रतिस्थापन नहीं है क्योंकि हम Pusher की तरह सॉकेट्स के बजाय HTTP का उपयोग करते हैं।

इसलिए जबकि HTTP शायद अधिक विश्वसनीय है, अत्यधिक उच्च आवृत्ति अपडेट (>15-20 प्रति सेकंड) के लिए, मैं Pusher की सिफारिश करता हूं क्योंकि उनके सॉकेट कनेक्शन के कारण।

लेकिन बाकी सब चीजों के लिए, जैसे Vercel के AI SDK से हाई-फ्रीक्वेंसी AI चंक अपडेट, लाइव डैशबोर्ड या लाइव चैट मैसेज, हम Upstash Realtime को गो-टू बनाने के लिए बना रहे हैं।

आपको इसे आजमाना चाहिए, शुरू करना सुपर आसान है!

पढ़ने के लिए धन्यवाद! 🙌 प्रश्न या प्रतिक्रिया? सीधे मुझसे @joshtriedcoding पर संपर्क करें।