नेक्स्ट.जेएस में रियल-टाइम सुविधाओं को सहजता से एकीकृत करें

Next.js में रीयलटाइम सुविधाएं जोड़ना बेकार है 💀

<पी> मेरा मतलब इन चीज़ों से है:

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

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

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

अपस्टैश रीयलटाइम का लक्ष्य

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

थी

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

<पी> तो हम अपस्टैश रीयलटाइम को वैसा ही बना रहे हैं। किसी भी Next.js ऐप में रीयलटाइम सुविधाएं जोड़ने का सबसे आसान तरीका। सेटअप में 2 मिनट लगते हैं और इसे वर्सेल, क्लाउडफ़ेयर या अन्य पर तैनात किया जा सकता है।

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

<पी> मुझे रीयलटाइम का विचार कंटेंटपोर्ट नामक एक ओपन-सोर्स SaaS के निर्माण से मिला। जब आप कंटेंटपोर्ट के माध्यम से एक ट्वीट पोस्ट करते हैं, तो हम पोस्टिंग लॉजिक को अपस्टैश वर्कफ़्लो में चलाते हैं जो विफलता पर स्वचालित रूप से पुनः प्रयास किया जाता है।

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

<पी> लेकिन क्योंकि यह तर्क पृष्ठभूमि कार्य में चलता है, क्लाइंट और पोस्टिंग तर्क के बीच कोई संबंध नहीं है। दूसरे शब्दों में, क्लाइंट को वर्तमान स्थिति (जैसे 'प्रसंस्करण', 'पोस्टिंग', या 'सफलता') के बारे में बताने का कोई तरीका नहीं है।

<पी>

नेक्स्ट.जेएस में रियल-टाइम सुविधाओं को सहजता से एकीकृत करें

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

<पी> मैं पुशर से बहुत नाखुश था और हमारे मौजूदा नियॉन पोस्टग्रेज़ डेटाबेस को केवल रीयलटाइम सुविधाओं के लिए कॉन्वेक्स पर स्थानांतरित नहीं करना चाहता था। और पता चला, हमारे सबसे परिपक्व उत्पाद, अपस्टैश रेडिस में वह सब कुछ है जो मुझे इस काम को करने के लिए चाहिए था:पब/सब और रेडिस स्ट्रीम।

त्वरित उदाहरण

<पी> आइए एक सरल उदाहरण बनाएं जो सर्वर कार्रवाई से क्लाइंट को रीयलटाइम अपडेट भेजता है।

<पी> सबसे पहले, हम पैकेज स्थापित करते हैं:

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

<पी> किसी भी रूट हैंडलर में ईवेंट भेजें:

रूट.ts

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

<पी> अपने रिएक्ट घटक में घटनाओं की सदस्यता लें:

पेज.tsx

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

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

अस्वीकरण

<पी> अपस्टैश रीयलटाइम का मतलब 1:1 पुशर प्रतिस्थापन नहीं है क्योंकि हम HTTP का उपयोग करते हैं न कि पुशर जैसे सॉकेट का।

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

<पी> लेकिन किसी भी अन्य चीज़ के लिए, जैसे वर्सेल के एआई एसडीके से उच्च-आवृत्ति एआई चंक अपडेट, लाइव डैशबोर्ड या लाइव चैट संदेश, हम अपस्टैश रीयलटाइम का निर्माण कर रहे हैं। <पी> आपको इसे आज़माना चाहिए, इसे शुरू करना बहुत आसान है!

<पी> पढ़ने के लिए धन्यवाद! 🙌 कोई प्रश्न या प्रतिक्रिया है? सीधे मुझसे संपर्क करें @joshtriedcoding.