फुल स्टैक वेब फ्रेमवर्क के रूप में रीमिक्स सामान्य वेब सर्वर उपयोग के मामलों से निपटने के लिए एपीआई प्रदान करता है। यह पोस्ट सत्रों पर ध्यान केंद्रित करेगी और आप उन्हें स्टोर करने के लिए अपस्टैश का उपयोग क्यों और कैसे कर सकते हैं।
सत्र क्या है?
<ब्लॉकक्वॉट>रीमिक्स डॉक्स में सत्रों का बहुत अच्छा परिचय है https://remix.run/docs/en/v1/api/remix#sessions
कुछ शब्दों में - सत्र एक तंत्र है जो सर्वर और क्लाइंट को उपयोगकर्ता डेटा / स्थिति साझा करने की अनुमति देता है। उपयोगकर्ता प्रमाणीकरण स्थिति, शॉपिंग कार्ट की स्थिति, फ़्लैश संदेश आदि को ट्रैक करना सत्र उपयोग के उदाहरण हैं।
Upstash Redis का उपयोग क्यों करें?
सत्र डेटा सर्वर पर संग्रहीत किया जाता है। सर्वर रहित बुनियादी ढांचे या कुछ पास बुनियादी ढांचे (जैसे हेरोकू) पर तैनात करते समय आप सर्वर के फाइल सिस्टम पर डेटा को जारी नहीं रख सकते क्योंकि यह प्रत्येक अनुरोध (सर्वर रहित) या परिनियोजन (पास) पर बदल सकता है। डेटा को बनाए रखने के लिए आपको उपयोगकर्ता डेटा को बाहरी डेटाबेस पर संग्रहीत करना चाहिए। Upstash Redis DB निम्नलिखित कारणों से सत्र डेटा संग्रहीत करने का एक अच्छा समाधान है:
- Redis सत्र के समान, स्वभाव से, एक
key:value. है डेटा संरचना जहां कुंजी सत्र की आईडी है और मूल्य इसका क्रमबद्ध डेटा है। - Redis में एक बिल्ट इन एक्सपायरी मैकेनिज्म है जो एक्सपायर्ड सेशन को साफ करने की आवश्यकता को कम करता है।
- सत्र में संवेदनशील उपयोगकर्ता डेटा हो सकता है और Upstash Redis अपने सभी संग्रहीत डेटा को एन्क्रिप्ट कर सकता है।
- अपस्टैश एक साधारण HTTP REST API का उपयोग कर रहा है। सर्वर रहित अवसंरचना से संचार करने का HTTP सबसे आसान तरीका है।
Redis में एक सत्र प्रदाता के रूप में Upstash का उपयोग कैसे करें
<ब्लॉकक्वॉट>यह पोस्ट मेरे द्वारा लिखे गए Upstash उदाहरण का उपयोग करते हुए Redis सत्र संग्रहण पर आधारित है। बेझिझक रीमिक्स रेपो को क्लोन करें और इसे आजमाएं।
चरण 1 - अपनी Upstash API कुंजियां प्राप्त करें
- https://upstash.com/ पर जाएं और एक नया खाता बनाएं
- नया रेडिस डीबी बनाएं
UPSTASH_REDIS_REST_URLकॉपी करें &UPSTASH_REDIS_REST_TOKENऔर उन्हें.env. नामक फ़ाइल में संग्रहित करें आपके रीमिक्स प्रोजेक्ट के मूल में।- इंस्टॉल करें
dotenv-$ npm install --save-dev dotenv- यह आपको.env. से अपने पर्यावरण चर को इंजेक्ट करने की अनुमति देगा आपके द्वारा अभी बनाई गई फ़ाइल। - अपने पास जाएं
package.jsonफ़ाइल करें औरdevको बदलें स्क्रिप्ट फॉर्मremix devकरने के लिएdotenv/config node_modules/.bin/remix dev।
चरण 2 - कोर को लागू करें createSessionStorage Upstash सत्र कार्यान्वयन बनाने के लिए
रीमिक्स createSessionStorage . का उपयोग करके अपना स्वयं का सत्र एकीकरण बनाने के लिए एक बेहतरीन API प्रदान करता है . Upstash को एकीकृत करने के लिए इस फ़ंक्शन को लागू करते हैं।
// sessions/upstash.server.ts
import * as crypto from "crypto";
import { createSessionStorage } from "remix";
const upstashRedisRestUrl = process.env.UPSTASH_REDIS_REST_URL;
const headers = {
Authorization: `Bearer ${process.env.UPSTASH_REDIS_REST_TOKEN}`,
Accept: "application/json",
"Content-Type": "application/json",
};
const expiresToSeconds = (expires) => {
const now = new Date();
const expiresDate = new Date(expires);
const secondsDelta = expiresDate.getSeconds() - now.getSeconds();
return secondsDelta < 0 ? 0 : secondsDelta;
};
// For more info check https://remix.run/docs/en/v1/api/remix#createsessionstorage
export function createUpstashSessionStorage({ cookie }: any) {
return createSessionStorage({
cookie,
async createData(data, expires) {
// Create a random id - taken from the core `createFileSessionStorage` Remix function.
const randomBytes = crypto.randomBytes(8);
const id = Buffer.from(randomBytes).toString("hex");
// Call Upstash Redis HTTP API. Set expiration according to the cookie `expired property.
// Note the use of the `expiresToSeconds` that converts date to seconds.
await fetch(
`${upstashRedisRestUrl}/set/${id}?EX=${expiresToSeconds(expires)}`,
{
method: "post",
body: JSON.stringify({ data }),
headers,
}
);
return id;
},
async readData(id) {
const response = await fetch(`${upstashRedisRestUrl}/get/${id}`, {
headers,
});
try {
const { result } = await response.json();
return JSON.parse(result).data;
} catch (error) {
return null;
}
},
async updateData(id, data, expires) {
await fetch(
`${upstashRedisRestUrl}/set/${id}?EX=${expiresToSeconds(expires)}`,
{
method: "post",
body: JSON.stringify({ data }),
headers,
}
);
},
async deleteData(id) {
await fetch(`${upstashRedisRestUrl}/del/${id}`, {
method: "post",
headers,
});
},
});
}
आइए बताते हैं कि हमने अभी क्या लिखा है:हमने sessions/upstash.server.ts नाम की एक फाइल बनाई है। . यह फ़ाइल createUpstashSessionStorage . नाम के एक फंक्शन को एक्सपोर्ट करती है .यह फ़ंक्शन एक पैरामीटर के रूप में cookie लेता है (उस पर बाद में) और कोर रीमिक्स का उपयोग करता है createSessionStorage नया सत्र प्रदाता लागू करने के लिए फ़ैक्टरी फ़ंक्शन।
फ़ंक्शन के अंदर हमने createSessionStorage . लागू किया एक नया सत्र बनाने के लिए प्रोटोकॉल (createData ), सत्र मान पढ़ें (readData ), सत्र मान अपडेट करें (updateData ) और सत्र हटाएं (deleteData )।
प्रत्येक फ़ंक्शन REST . का उपयोग करता है Redis डेटाबेस के साथ इंटरैक्ट करने के लिए Upstash API।
ध्यान देने योग्य बातें:
- पास की गई कुकी में
cookie expiration dateहोती हैjs Date. में प्रारूप। हमexpiresToSeconds. का उपयोग करते हैं डेटा को सेकंड में बदलने के लिए कार्य करता है क्योंकि रेडिस यही अपेक्षा करता है। - कुकी सेट करते समय, उसकी समाप्ति तिथि निर्धारित करना न भूलें। समाप्त होने पर Redis स्वचालित रूप से उन सत्रों को हटा देगा।
- हम
cryptoका उपयोग करते हैं एक अद्वितीय सत्र आईडी बनाने के लिए। अद्वितीय आईडी बनाने के लिए आप अन्य विकल्पों का उपयोग कर सकते हैं। मैंने इस विकल्प को चुना है क्योंकि इसका उपयोग कोर में किया जा रहा हैcreateFileSessionStorageसमारोह।
चरण 3 - createSessionStorage का उपयोग करें आपके ऐप पर
अब हमने अपना स्वयं का सत्र संग्रहण कार्यान्वयन बना लिया है, आइए प्रदर्शित करते हैं कि इसका उपयोग कैसे किया जाए।
<ब्लॉकक्वॉट>
ध्यान दें कि अब से Upstash के लिए कुछ खास नहीं है। सभी तर्क sessions/upstash.server.ts . में समाहित हैं फ़ाइल।
// sessions.server.ts
import { createCookie } from "remix";
import { createUpstashSessionStorage } from "~/sessions/upstash.server";
// This will set the length of the session.
// For the example we use a very short duration to easily demonstrate its functionally.
const EXPIRATION_DURATION_IN_SECONDS = 10;
const expires = new Date();
expires.setSeconds(expires.getSeconds() + EXPIRATION_DURATION_IN_SECONDS);
const sessionCookie = createCookie("__session", {
secrets: ["r3m1xr0ck1"],
sameSite: true,
expires,
});
const { getSession, commitSession, destroySession } =
createUpstashSessionStorage({ cookie: sessionCookie });
export { getSession, commitSession, destroySession };
sessions.server.ts . नाम की एक फाइल बनाएं और उपरोक्त कोड पेस्ट करें। यह फ़ाइल 3 कार्यों का निर्यात करती है getSession , commitSession और destroySession . वे फ़ंक्शन ऐप को सत्र के साथ इंटरैक्ट करने की अनुमति देते हैं। हमने क्लाइंट में सत्र के संदर्भ को संग्रहीत करने के लिए एक कुकी भी बनाई है।
अपनी व्यावसायिक आवश्यकताओं के अनुसार समाप्ति अवधि सेट करें। अधिक जानकारी के लिए https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
पढ़ें।रीमिक्स रूट्स में सेशन का उपयोग करना
रीमिक्स का उपयोग करके आप प्रति मार्ग सत्र उपयोग को परिभाषित कर सकते हैं। निम्नलिखित उदाहरण में हम session का उपयोग करते हैं routes/index.tsx . पर . इस उदाहरण ने केवल सत्र एपीआई का उपयोग करने का तरीका दिखाया। सत्र को किसी विशिष्ट व्यावसायिक तर्क से जोड़ना इस पोस्ट के दायरे से बाहर है।
यदि आप प्रमाणीकरण के लिए सत्र का उपयोग करने के बारे में एक उदाहरण की तलाश कर रहे हैं तो देखें https://github.com/remix-run/remix/tree/main/examples/remix-auth-form
// routes/index.tsx
import type { LoaderFunction } from "remix";
import { json, useLoaderData } from "remix";
import { commitSession, getSession } from "~/sessions.server";
export const loader: LoaderFunction = async ({ request }) => {
// Get the session from the cookie
const session = await getSession(request.headers.get("Cookie"));
const myStoredData = session.get("myStoredData");
// If no session found (was never created or was expired) create a new session.
if (!myStoredData) {
session.set("myStoredData", "Some data");
return json(
{
message: "Created new session",
},
{
headers: {
"Set-Cookie": await commitSession(session),
},
}
);
}
// If session was found, present the session info.
return json({
message: `Showing Session info: ${myStoredData}`,
});
};
export default function () {
const data = useLoaderData();
return <div>{data.message}</div>;
}
उदाहरण दर्शाता है कि उपयोगकर्ता सत्र की दो संभावित स्थितियों को कैसे संभालना है (उपयोगकर्ता के पास सत्र है या उपयोगकर्ता के पास सत्र नहीं है)। यदि उपयोगकर्ता के पास सत्र नहीं है, तो ऐप की अनुक्रमणिका फ़ाइल पर नेविगेट करने से एक नया सत्र तैयार होगा और कुछ डमी डेटा संग्रहीत किया जाएगा। यदि उपयोगकर्ता के पास एक वैध (गैर समाप्त) सत्र है, तो मार्ग सत्र का डेटा दिखाएगा।
चरण 4 - परिनियोजित करें
अब जब आपने Upstash का उपयोग करके सत्र को लागू कर दिया है, तो आप अपने द्वारा चुनी गई कोई भी परिनियोजन रणनीति चुनने के लिए स्वतंत्र हैं।
<ब्लॉकक्वॉट>अपने Upstash परिवेश चर सेट करना न भूलें।
परिशिष्ट
createFileSessionStorage का उपयोग करना स्थानीय विकास के लिए और createUpstashSessionStorage मंचन / उत्पादन में
यह संभावना है कि वह ऑफ़लाइन रहते हुए विकसित होने में सक्षम होना चाहेगा। स्थानीय रूप से विकसित करते समय आप createUpstashSessionStorage . को बदल सकते हैं createFileSessionStorage . के साथ वर्तमान NODE_ENV . का पता लगाकर ।
यह जांचने के बाद कि आपका Upstash कार्यान्वयन काम करता है, आप sessions/upstash.server.ts बदलते हैं। फ़ाइल इस प्रकार है:
इस अनुभाग को बदलें:
// from sessions/upstash.server.t
const { getSession, commitSession, destroySession } =
createUpstashSessionStorage({ cookie: sessionCookie });
साथ:
// from sessions/upstash.server.ts
const { getSession, commitSession, destroySession } = (process.env.NODE_ENV === "development") ?
createFileSessionStorage({ cookie: sessionCookie, dir: './sessions' });
: createUpstashSessionStorage({ cookie: sessionCookie });
अब जब आप स्थानीय रूप से विकसित होते हैं तो आप Upstash को कॉल करने के बजाय अपने स्थानीय फ़ाइल सिस्टम का उपयोग करेंगे।
निष्कर्ष
इस पोस्ट में हमने देखा कि अपने सेशन स्टोरेज डेटा को होस्ट करने के लिए Upstash Redis DB का उपयोग कैसे करें। रीमिक्स एपीआई विशिष्ट सत्र भंडारण कार्यान्वयन को वास्तव में अच्छी तरह से समाहित करता है, जिससे एकीकरण आगे बढ़ता है। यदि आप उदाहरण के साथ खेलना चाहते हैं तो आप इसे https://github.com/remix-run/remix/tree/main/examples/redis-upstash-session पर रीमिक्स सोर्स कोड में देख सकते हैं।
आनंद लें।