Upstash Redis, Next.js सर्वर एक्शन और Vercel के साथ रियल-टाइम नोटिफिकेशन: चरण-दर-चरण गाइड

इस पोस्ट में, मैं बताता हूं कि कैसे मैंने Upstash Redis, Next.js सर्वर एक्शन और Vercel के साथ सर्वर-सेंट इवेंट्स का उपयोग करके रीयल-टाइम नोटिफिकेशन बनाए। Upstash Redis में मैसेज चैनलों का लाभ उठाने से आपके एप्लिकेशन के संचार आर्किटेक्चर को महत्वपूर्ण रूप से बढ़ाया जा सकता है, जिससे वे अधिक प्रतिक्रियाशील और गतिशील बनते हैं।

डेमो

हम क्या उपयोग करेंगे

• Next.js (फ्रंट-एंड और बैक-एंड)
• Upstash Redis (PUBLISH कमांड के साथ सर्वर-सेंट इवेंट्स)
• Tailwind CSS (स्टाइलिंग)
• Vercel (तैनाती)

आपको क्या चाहिए

• Node.js 18
• एक Upstash खाता
• एक Vercel खाता

Upstash Redis सेटअप करना

एक बार जब आप Upstash खाता बना लेते हैं और लॉग इन हो जाते हैं, तो Redis टैब पर जाएं और एक डेटाबेस बनाएं।

अपना डेटाबेस बनाने के बाद, आप फिर Details टैब पर जाएंगे। नीचे स्क्रॉल करें जब तक आपको Connect your database सेक्शन न मिल जाए। Redis URL कॉपी करें और इसे कहीं सुरक्षित रखें, हम इसे अपने पर्यावरण चर के रूप में UPSTASH_REDIS_URL के रूप में उपयोग करेंगे।

साथ ही, नीचे स्क्रॉल करें जब तक आपको REST API सेक्शन न मिल जाए और .env बटन चुनें। सामग्री को कॉपी करें और इसे कहीं सुरक्षित रखें, हम .env से प्राप्त चर का उपयोग UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN के रूप में करेंगे।

प्रोजेक्ट सेटअप करना

सेटअप करने के लिए, बस ऐप रेपो क्लोन करें और इस ट्यूटोरियल का पालन करके उसमें मौजूद हर चीज को सीखें। प्रोजेक्ट को फोर्क करने के लिए, चलाएं:

git clone https://github.com/rishi-raj-jain/upstash-nextjs-publish-messages-with-sse-example
cd upstash-nextjs-publish-messages-with-sse-example
npm install

एक बार जब आप रेपो क्लोन कर लेते हैं, तो आप एक .env फाइल बनाने जा रहे हैं। आप ऊपर के अनुभागों से सहेजे गए आइटम जोड़ने जा रहे हैं।

यह कुछ इस तरह दिखना चाहिए:

# .env
# ऊपर के चरणों से प्राप्त
# Upstash Redis सीक्रेट्स
UPSTASH_REDIS_URL="rediss://default:...@...-...-...-....upstash.io:..."
UPSTASH_REDIS_REST_URL="https://...-...-...-....upstash.io"
UPSTASH_REDIS_REST_TOKEN="...="

ध्यान दें कि UPSTASH_REDIS_URL वेरिएबल में "rediss" लिखा है न कि "redis", यह TLS/SSL विकल्प का उपयोग करने के लिए है।

इन चरणों के बाद, आप निम्न कमांड का उपयोग करके स्थानीय वातावरण शुरू करने में सक्षम होना चाहिए:

npm run dev

रिपॉजिटरी संरचना

यह प्रोजेक्ट की मुख्य फोल्डर संरचना है। मैंने उन फाइलों को लाल रंग में चिह्नित किया है जिन पर इस पोस्ट में आगे चर्चा की जाएगी जो निम्नलिखित से संबंधित हैं:

• Upstash Redis में मैसेज चैनल को समझना
• Next.js App Router में सर्वर-सेंट इवेंट्स API बनाना
• Upstash Redis के साथ Next.js सर्वर एक्शन सेटअप करना नोटिफिकेशन प्रकाशित करने के लिए
• Next.js फ्रंटएंड सेटअप करना लगातार सुनने और रीयल-टाइम में नोटिफिकेशन प्रदर्शित करने के लिए

Upstash Redis में मैसेज चैनल को समझना

Upstash Redis में, पब्लिश/सब्सक्राइब मॉडल मैसेज चैनल के मूल में है। प्रकाशक नामित चैनलों पर संदेश प्रसारित करते हैं, और ग्राहक विशिष्ट चैनलों से रीयल-टाइम में संदेश प्राप्त करने में सक्षम होते हैं। यह मॉडल एप्लिकेशन के विभिन्न हिस्सों के बीच निर्बाध संचार को सक्षम बनाता है।

यहां बताया गया है कि एज-संगत लाइब्रेरी, @upstash/redis का उपयोग करके चैनल पर संदेश कैसे प्रकाशित किए जा सकते हैं 👇🏻

import { Redis } from '@upstash/redis'
// Upstash Redis इंस्टेंस से कनेक्ट करें
const redis = Redis.fromEnv()
// Upstash Redis इंस्टेंस पर एक संदेश प्रकाशित करें
await redis.publish('posts', JSON.stringify({ date: new Date().toString(), message: "I am a new message." }))

यहां बताया गया है कि Node-संगत लाइब्रेरी, ioredis का उपयोग करके ग्राहक Upstash Redis चैनल (यहां, posts) को कैसे सुन सकते हैं 👇🏻

// Upstash Redis इंस्टेंस की सदस्यता लेने में सक्षम होने के लिए ioredis का उपयोग करें
import Redis from 'ioredis'
// Upstash Redis सब्सक्राइबर इंस्टेंस बनाएं
const redisSubscriber = new Redis(process.env.UPSTASH_REDIS_URL)
// सुनने और संदेश प्रकाशित करने के लिए कुंजी परिभाषित करें
const setKey = 'posts'
// कुंजी: "posts" के लिए Redis अपडेट की सदस्यता लें
// किसी भी त्रुटि के मामले में, बस इसे लॉग करें
redisSubscriber.subscribe(setKey, (err) => {
  if (err) console.log(err)
})
// Redis से नई पोस्ट सुनें
redisSubscriber.on('message', (channel, message) => {
  // डेटा लॉग करें जब चैनल संदेश प्राप्त होता है वही है जो प्रकाशित किया गया है
  if (channel === setKey) console.log(message)
})

एक चैनल पर संदेश प्रकाशित करने पर, सभी ग्राहक तुरंत संदेश प्राप्त करते हैं, जिससे Upstash Redis के भीतर कुशल और रीयल-टाइम संचार की अनुमति मिलती है।

Next.js App Router में सर्वर-सेंट इवेंट्स API बनाना

सर्वर-सेंट इवेंट्स कई क्लाइंट अनुरोधों की आवश्यकता के बिना रीयल-टाइम में नया डेटा भेजने का एक शक्तिशाली तरीका है। पारंपरिक अनुरोध-प्रतिक्रिया तंत्र के विपरीत, SSE एकल, लंबे समय तक चलने वाले HTTP कनेक्शन पर सर्वर से क्लाइंट तक डेटा के एकदिशा प्रवाह को सक्षम बनाता है।

यहां बताया गया है कि आप Next.js App Router में सर्वर-सेंट इवेंट्स कैसे लागू कर सकते हैं 👇🏻

// File: app/api/stream/route.js
// इस रूट की प्रतिक्रिया को Vercel पर कैश होने से रोकता है
export const dynamic = 'force-dynamic'
export async function GET() {
  const encoder = new TextEncoder()
  // एक स्ट्रीमिंग प्रतिक्रिया बनाएं
  const customReadable = new ReadableStream({
    start(controller) {
      const message = 'Hey, I am a message.'
      controller.enqueue(encoder.encode(`data: ${message}\n\n`))
    },
  })
  // स्ट्रीम प्रतिक्रिया वापस करें और कनेक्शन को जीवित रखें
  return new Response(customReadable, {
    // सर्वर-सेंट इवेंट्स (SSE) के लिए हेडर सेट करें
    headers: {
      'Content-Type': 'text/event-stream; charset=utf-8',
      Connection: 'keep-alive',
      'Cache-Control': 'no-cache, no-transform',
      'Content-Encoding': 'none'
    },
  })
}

Next.js सर्वर एक्शन का उपयोग करके Upstash Redis पर संदेश प्रकाशित करना

Next.js सर्वर एक्शन आपको Next.js में अपने फ्रंटएंड कोड के भीतर सीधे सर्वर-साइड लॉजिक को परिभाषित करने की अनुमति देते हैं। यह मैन्युअल रूप से API रूट बनाने और फॉर्म सबमिशन स्टेटस को सबमिट और ट्रैक करने की परेशानी को बचाता है।

use server को फ़ंक्शन के शीर्ष पर रखकर, हम यह सुनिश्चित कर सकते हैं कि फ़ंक्शन केवल सर्वर-साइड चलता है। हमारे फॉर्म सबमिशन सर्वर एक्शन के अंदर, हम फॉर्म से message मान निकालते हैं, उपयोगकर्ता के देश को प्राप्त करने के लिए Vercel हेडर का उपयोग करते हैं, और जानकारी को posts Upstash Redis मैसेज चैनल पर एक संदेश के रूप में प्रकाशित करते हैं।

// File: app/actions.jsx
'use server'
import { Redis } from '@upstash/redis'
import { headers } from 'next/headers'
// वह फ़ंक्शन जो Vercel हेडर से देश कोड प्राप्त करने का ख्याल रखता है
// और वर्तमान टाइमस्टैम्प के साथ Upstash Redis डेटाबेस पर संदेश प्रकाशित करता है
export async function publishNotification(formData) {
  'use server'
  const redis = Redis.fromEnv()
  // सबमिट किए गए फॉर्म में संदेश निकालें
  const message = formData.get('message')
  // Vercel के x-vercel-ip-country हेडर का उपयोग करके उपयोगकर्ता का देश प्राप्त करें
  const headersList = headers()
  const country = headersList.get('x-vercel-ip-country')
  // "posts" चैनल पर Upstash Redis में संदेश प्रकाशित करें
  await redis.publish(
    'posts',
    JSON.stringify({ message, country, date: new Date().toString(), })
  )
}

इस सर्वर एक्शन को फॉर्म सबमिट होने पर आह्वान करने के लिए, हम इसे फॉर्म action इवेंट के हैंडलर के रूप में पास करते हैं।

// File: app/page.jsx
// सर्वर एक्शन आयात करें
import { publishNotification } from './actions'
const Home = () => {
  return (
    <>
      <div>
        <form /* फॉर्म सबमिट होने पर सर्वर एक्शन को आह्वान करने के लिए सेट करें */ action={publishNotification} >
          {/* यहां क्लाइंट-साइड फॉर्म घटक रखें */}
        </form>
      </div>
    </>
  )
}
export default Home

React के useFormStatus हुक का उपयोग करके फॉर्म सबमिशन के दौरान पेंडिंग स्टेट प्रदर्शित करने के लिए Next.js फ्रंटएंड सेटअप करना

निम्न कोड एक Next.js फॉर्म क्लाइंट-साइड घटक के सेटअप को दर्शाता है जो फॉर्म सबमिशन को संभालता है और React के useFormStatus हुक का उपयोग करके pending स्टेट प्रदर्शित करता है। आइए कोड के प्रमुख तत्वों को तोड़ दें:

• हाल ही में जारी useFormStatus हुक को React से आयात करना (https://react.dev/reference/react-dom/hooks/useFormStatus), जो आपको अंतिम फॉर्म सबमिशन की स्थिति जानकारी देता है।
• pending स्टेट प्रतिक्रियाशील वेरिएबल का उपयोग करना जो इंगित करता है कि फॉर्म सबमिशन प्रगति पर है।
• यदि सबमिशन पेंडिंग नहीं है, तो reset फॉर्म करें।
• pending बूलियन का उपयोग करके फॉर्म की सशर्त स्थिति दिखाएं।

'use client'
import { useEffect } from 'react'
import { useFormStatus } from 'react-dom'
const Form = () => {
  // फॉर्म सबमिशन स्टेट का पता लगाने के लिए React के useFormStatus हुक का उपयोग करें
  const { pending } = useFormStatus()
  useEffect(() => {
    // यदि फॉर्म पेंडिंग नहीं है, तो फॉर्म रीसेट करें
    if (!pending) document.getElementById('publish-form').reset()
  }, [pending])
  return (
    <>
      <input placeholder="Your message" className="border rounded px-3 outline-none focus:border-black/50 py-2" type="text" name="message" required />
      <button /* फॉर्म सबमिशन पेंडिंग होने पर बटन क्लिक अक्षम करें */ disabled={pending} className="hover:border-black/50 max-w-max border rounded py-1 px-3" type="submit" >
        {/* "पेंडिंग" स्टेट प्लेसहोल्डर प्रदर्शित करें */}
        {pending ? (
          <div className="flex flex-row gap-x-2 items-center">
            <div className="animate-spin border border-gray-800 rounded-full h-[15px] w-[15px]"></div>
            <span>Publishing</span>
          </div>
        ) : (
          <>Publish Notification &rarr;</>
        )}
      </button>
    </>
  )
}
export default Form

लगातार सर्वर-सेंट इवेंट्स सुनने के लिए Next.js फ्रंटएंड सेटअप करना

इस खंड में, हम सर्वर-सेंट इवेंट्स API संदेशों को सुनने के लिए एक न्यूनतम श्रोता सेटअप करना सीखेंगे, और SSE API से कनेक्शन को बनाए रखने का एक दृष्टिकोण।

React फ्रंटएंड में सर्वर-सेंट इवेंट्स API सुनना

React में हमारे क्लाइंट-साइड घटक में SSE API को सुनने के लिए, हम useEffect हुक का उपयोग करते हैं। SSE API से कनेक्शन स्थापित करने के लिए, /api/stream एंडपॉइंट को इंगित करते हुए एक नया EventSource इंस्टेंस बनाएं। फिर message इवेंट के लिए एक इवेंट श्रोता संलग्न करें, जहां स्ट्रीम से आने वाला डेटा JSON के रूप में पार्स किया जाता है और घटक में आगे संसाधित या प्रदर्शित किया जाता है।

अंत में, कोड में एक क्लीनअप फ़ंक्शन शामिल है जब घटक अनमाउंट होता है तो SSE कनेक्शन को बंद करने के लिए, संभावित मेमोरी लीक को रोकता है।

import { useEffect, useState } from 'react'
const ClientSideComponent = () => {
  useEffect(() => {
    // SSE API से कनेक्ट करने के लिए पहली कॉल आरंभ करें
    const eventSource = new EventSource('/api/stream')
    eventSource.addEventListener('message', (event) => {
      // स्ट्रीम से प्राप्त डेटा को JSON में पार्स करें
      // इसे पेज पर देखे गए संदेशों की सूची में जोड़ें
      const tmp = JSON.parse(event.data)
      // प्राप्त संदेश के साथ कुछ करें
    })
    // जैसे ही घटक अनमाउंट होता है, SSE API से श्रोता बंद करें
    return () => { eventSource.close() }
  }, [])
  return <></>
}
export default ClientSideComponent

React फ्रंटएंड में सर्वर-सेंट इवेंट्स API से कनेक्शन बनाए रखना

React घटक के उन्नत संस्करण में, हमने त्रुटियों को संभालकर और स्वचालित रूप से पुन: कनेक्ट करके SSE API के साथ निरंतर और लगातार कनेक्शन सुनिश्चित करने के लिए एक तंत्र लागू किया है।

यह connectToStream फ़ंक्शन के माध्यम से प्राप्त किया जाता है जो SSE API से कनेक्शन स्थापित करने और बनाए रखने के लिए जिम्मेदार है।

इसकी कार्यक्षमताओं का विवरण यहां दिया गया है 👇🏻

1. प्रारंभिक कनेक्शन और संदेश संचालन:

फ़ंक्शन /api/stream एंडपॉइंट से कनेक्ट होने वाला एक नया EventSource इंस्टेंस बनाता है।

// फ़ंक्शन SSE API से प्रारंभिक कनेक्शन का ख्याल रखता है
// साथ ही, जैसे ही यह बंद होता है SSE API से पुन: कनेक्ट करता है
// यह माइक्रो सेकंड देरी के साथ हमेशा के लिए कनेक्शन को जीवित रखता है
const connectToStream = () => {
  // SSE API स्रोत के रूप में /api/stream से कनेक्ट करें
  const eventSource = new EventSource('/api/stream')
  // .. }

इसके अलावा, यह message इवेंट के लिए एक इवेंट श्रोता सेट करता है, जहां स्ट्रीम से आने वाला डेटा JSON के रूप में पार्स किया जाता है। पार्स किए गए डेटा को तब React घटक में संसाधित या प्रदर्शित किया जा सकता है।

const connectToStream = () => {
  // ...
  eventSource.addEventListener('message', (event) => {
    // स्ट्रीम से प्राप्त डेटा को JSON में पार्स करें
    // इसे पेज पर देखे गए संदेशों की सूची में जोड़ें
    const tmp = JSON.parse(event.data)
    setPosts((prevPosts) => [...prevPosts, tmp])
  })
  // ... }

1. त्रुटि संचालन और स्वचालित पुन: कनेक्शन:

error इवेंट के लिए एक अतिरिक्त इवेंट श्रोता सेट किया जाता है। किसी भी त्रुटि के मामले में, जैसे कनेक्शन विफलता, इवेंट स्रोत बंद हो जाता है।

बंद होने के बाद, फ़ंक्शन न्यूनतम 1 मिलीसेकंड की देरी के बाद पुन: कनेक्शन को ट्रिगर करने के लिए setTimeout का उपयोग करता है। यह छोटी देरी सर्वर पर तेजी से कनेक्शन प्रयासों को भारी किए बिना एक आसान और निरंतर पुन: कनेक्शन प्रक्रिया बनाने में मदद करती है।

// किसी भी त्रुटि के मामले में, इवेंट स्रोत बंद करें
// ताकि यह फिर से कनेक्ट करने का प्रयास करे
eventSource.addEventListener('error', () => {
  eventSource.close()
  setTimeout(connectToStream, 1)
})

1. SSE API स्रोत बंद होने को संभालना:

onclose इवेंट का उपयोग यह पता लगाने के लिए किया जाता है कि SSE API स्रोत कब बंद होता है। बंद होने पर, फ़ंक्शन संक्षिप्त देरी के बाद स्ट्रीम से कनेक्ट करने का एक और प्रयास शेड्यूल करता है।

// जैसे ही SSE API स्रोत बंद होता है, पुन: कनेक्ट करने का प्रयास करें
eventSource.onclose = () => {
  setTimeout(connectToStream, 1)
}

इन रणनीतियों को संयोजित करके, फ़ंक्शन यह सुनिश्चित करता है कि SSE API से कनेक्शन लगातार बना रहे। त्रुटियों या बंद होने की स्थिति में भी, React घटक न्यूनतम देरी के साथ पुन: कनेक्ट करने का प्रयास करता रहेगा, प्रभावी रूप से एक निरंतर कनेक्शन बनाए रखता है।

Vercel पर तैनात करें

रिपॉजिटरी Vercel पर तैनात करने के लिए तैयार है। नीचे दिए गए चरणों का पालन करके Vercel के साथ निर्बाध रूप से तैनात करें 👇🏻

• ऐप कोड के साथ एक GitHub Repository बनाएं
• Vercel डैशबोर्ड में एक New Project बनाएं
• बनाए गए GitHub Repository को अपने नए प्रोजेक्ट के रूप में लिंक करें
• नीचे स्क्रॉल करें और स्थानीय .env से Environment Variables अपडेट करें
• तैनात करें! 🚀

संदर्भ