अपस्टैश रेडिस, नेक्स्ट.जेएस सर्वर एक्शन और वर्सेल के साथ रीयल-टाइम सूचनाएं:एक चरण-दर-चरण मार्गदर्शिका

डेमो

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

• Next.js (फ्रंट-एंड और बैक-एंड)
• अपस्टैश रेडिस (पब्लिश कमांड के साथ सर्वर द्वारा भेजे गए इवेंट)
• टेलविंड सीएसएस (स्टाइलिंग)
• वर्सेल (तैनाती)

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

• Node.js 18
• एक अपस्टैश खाता
• एक वर्सेल खाता

अपस्टैश रेडिस की स्थापना

प्रोजेक्ट की स्थापना

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
 
# Obtained from the steps as above
 
# Upstash Redis Secrets
UPSTASH_REDIS_URL="rediss://default:...@...-...-...-....upstash.io:..."
UPSTASH_REDIS_REST_URL="https://...-...-...-....upstash.io"
UPSTASH_REDIS_REST_TOKEN="...="

npm run dev

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

• अपस्टैश रेडिस में संदेश चैनलों को समझना
• नेक्स्ट.जेएस ऐप राउटर में सर्वर-सेंटेड इवेंट एपीआई बनाना
• सूचनाएं प्रकाशित करने के लिए अपस्टैश रेडिस के साथ नेक्स्ट.जेएस सर्वर एक्शन सेटअप करें
• वास्तविक समय में सूचनाएं लगातार सुनने और प्रदर्शित करने के लिए Next.js फ्रंटएंड सेटअप करें

अपस्टैश रेडिस में संदेश चैनलों को समझना

import { Redis } from '@upstash/redis'
 
// Connect to an Upstash Redis instance
const redis = Redis.fromEnv()
 
// Publish a message to the Upstash Redis instance
await redis.publish('posts', JSON.stringify({ date: new Date().toString(), message: "I am a new message." }))

// Use ioredis to be able to subscribe to an Upstash Redis instance
import Redis from 'ioredis'
 
// Create an Upstash Redis Subscriber instance
const redisSubscriber = new Redis(process.env.UPSTASH_REDIS_URL)
 
// Define the key to listen and publish messages to
const setKey = 'posts'
 
// Subscribe to Redis updates for the key: "posts"
// In case of any error, just log it
redisSubscriber.subscribe(setKey, (err) => {
 if (err) console.log(err)
})
 
// Listen for new posts from Redis
redisSubscriber.on('message', (channel, message) => {
 // Log the data when the channel message is received is same as the message is published to
 if (channel === setKey) console.log(mesage)
})

नेक्स्ट.जेएस ऐप राउटर में सर्वर-सेंटेड इवेंट एपीआई बनाना

// File: app/api/stream/route.js
 
// Prevents this route's response from being cached on Vercel
export const dynamic = 'force-dynamic'
 
export async function GET() {
 const encoder = new TextEncoder()
 // Create a streaming response
 const customReadable = new ReadableStream({
 start(controller) {
 const message = 'Hey, I am a message.'
 controller.enqueue(encoder.encode(`data: ${message}\n\n`))
 },
 })
 // Return the stream response and keep the connection alive
 return new Response(customReadable, {
 // Set the headers for Server-Sent Events (SSE)
 headers: {
 'Content-Type': 'text/event-stream; charset=utf-8',
 Connection: 'keep-alive',
 'Cache-Control': 'no-cache, no-transform',
 'Content-Encoding': 'none'
 },
 })
}

Next.js सर्वर क्रियाओं का उपयोग करके अपस्टैश रेडिस पर संदेश प्रकाशित करना

// File: app/actions.jsx
 
'use server'
 
import { Redis } from '@upstash/redis'
import { headers } from 'next/headers'
 
// The function that takes care of obtaining the country code from Vercel headers
// And publishing messages to the Upstash Redis database with the current timestamp
export async function publishNotification(formData) {
 'use server'
 const redis = Redis.fromEnv()
 
 // Extract the message in the form submitted
 const message = formData.get('message')
 
 // Obtain country of the user using Vercel's x-vercel-ip-country header
 const headersList = headers()
 const country = headersList.get('x-vercel-ip-country')
 
 // Publish the message to the "posts" channel in Upstash Redis
 await redis.publish(
 'posts',
 JSON.stringify({
 message,
 country,
 date: new Date().toString(),
 }))
}

// File: app/page.jsx
 
// Import the server action
import { publishNotification } from './actions'
 
const Home = () => {
 return (
 <>
 <div>
 <form
 
 /* set the server action to invoked as form is submitted */
 action={publishNotification}
 
 >
 {/* Place a client side form component here */}
 </form>
 </div>
 </>
 )
}
 
export default Home

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

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

'use client'
 
import { useEffect } from 'react'
import { useFormStatus } from 'react-dom'
 
const Form = () => {
 
 // Use React's useFormStatus hook to detect form submission state
 const { pending } = useFormStatus()
 
 useEffect(() => {
 // If the form is not pending, reset the form
 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
 /* Disable button click while the form submission is pending */
 disabled={pending}
 className="hover:border-black/50 max-w-max border rounded py-1 px-3" type="submit"
 >
 {/* Display "pending" state placeholder */}
 {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 फ्रंटएंड सेटअप करें

रिएक्ट फ्रंटएंड में सर्वर-भेजे गए इवेंट एपीआई को सुनना

import { useEffect, useState } from 'react'
 
const ClientSideComponent = () => {
 
 useEffect(() => {
 
 // Initiate the first call to connect to SSE API
 const eventSource = new EventSource('/api/stream')
 
 eventSource.addEventListener('message', (event) => {
 // Parse the data received from the stream into JSON
 // Add it the list of messages seen on the page
 const tmp = JSON.parse(event.data)
 // Do something with the obtained message
 })
 
 // As the component unmounts, close listener to SSE API
 return () => {
 eventSource.close()
 }
 
 }, [])
 
 return <></>
}
 
export default ClientSideComponent

रिएक्ट फ्रंटएंड में सर्वर-भेजे गए इवेंट एपीआई से कनेक्शन जारी रखना

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

// Function to take care of initial connect to the SSE API
// Also, it reconnects to the SSE API as soon as it shuts down
// This keeps the connection alive - forever with micro second delays
const connectToStream = () => {
 // Connect to /api/stream as the SSE API source
 const eventSource = new EventSource('/api/stream')
 // ..
}

const connectToStream = () => {
 // ...
 eventSource.addEventListener('message', (event) => {
 // Parse the data received from the stream into JSON
 // Add it the list of messages seen on the page
 const tmp = JSON.parse(event.data)
 setPosts((prevPosts) => [...prevPosts, tmp])
 })
 // ...
}

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

// In case of any error, close the event source
// So that it attempts to connect again
eventSource.addEventListener('error', () => {
 eventSource.close()
 setTimeout(connectToStream, 1)
})

1. एसएसई एपीआई स्रोत क्लोजर को संभालना:

// As soon as SSE API source is closed, attempt to reconnect
eventSource.onclose = () => {
 setTimeout(connectToStream, 1)
}

वर्सेल में तैनात करें

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

संदर्भ