কম্পিউটার টিউটোরিয়াল

Upstash Kafka, Redis, এবং Next.js-এর সাথে একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করুন

প্রকল্প বিবরণ

এই ব্লগ পোস্টে, আমরা একটি বার্তাপ্রেরণ অ্যাপ্লিকেশন তৈরি করব যা ব্যবহারকারীদের বার্তা ক্লায়েন্ট এবং চ্যাট রুম তৈরি করতে দেয়। উপরন্তু, ব্যবহারকারীরা অতীতের বার্তাগুলি অ্যাক্সেস করতে সক্ষম হবেন৷

প্রকল্পটি দুটি পৃষ্ঠা নিয়ে গঠিত। প্রথম পৃষ্ঠাটি ক্লায়েন্ট নিবন্ধনের জন্য নিবেদিত, যেখানে আপনি অনন্য নামের একাধিক ক্লায়েন্ট তৈরি করতে পারেন।

Upstash Kafka, Redis, এবং Next.js-এর সাথে একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করুন

আপনি যখন একটি ক্লায়েন্টের ব্যবহারকারীর নাম ক্লিক করেন, তখন আপনাকে সেই নির্দিষ্ট ব্যবহারকারীর সাথে যুক্ত চ্যাটরুম ক্লায়েন্টের কাছে নির্দেশিত করা হবে।

Upstash Kafka, Redis, এবং Next.js-এর সাথে একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করুন

চ্যাট অ্যাপ্লিকেশনের যুক্তি নিম্নরূপ:

ব্যবহারকারীরা সূচী পৃষ্ঠায় একাধিক ক্লায়েন্ট তৈরি করতে পারে, প্রতিটিতে একটি অনন্য ব্যবহারকারীর নাম রয়েছে। একটি ক্লায়েন্টের ব্যবহারকারীর নামের উপর ক্লিক করা একটি অনন্য পাথ সহ একটি পৃথক ক্লায়েন্ট সহ একটি নতুন ট্যাব খুলবে৷

প্রতিটি ক্লায়েন্ট একটি WebSocket সংযোগের মাধ্যমে একটি বার্তা সার্ভারের সাথে সংযুক্ত হবে। যখন ক্লায়েন্টে একটি নতুন বার্তা তৈরি করা হয়, তখন এটি সেই ক্লায়েন্টের সাথে যুক্ত বার্তা সার্ভারে পাঠানো হবে।

বার্তা সার্ভারগুলি বার্তা ট্র্যাফিক পরিচালনা করবে। যখন একটি ক্লায়েন্ট WebSocket সংযোগের মাধ্যমে একটি বার্তা পাঠায়, সার্ভার এটি একটি কাফকা ব্রোকারের কাছে নির্দেশ করবে। প্রতিটি বার্তা সার্ভার ইনকামিং বার্তা পরিচালনা করতে একটি NodeJS থ্রেড চালাবে। যখন একটি বার্তা ব্যবহার করা হয়, এটি বিদ্যমান WebSocket সংযোগের মাধ্যমে ক্লায়েন্টদের কাছে পাঠানো হবে। ক্লায়েন্ট-সাইডে ইনকামিং বার্তাগুলি ব্যবহার করতে, আমরা react-use-websocket ব্যবহার করব লাইব্রেরি।

অ্যাপ্লিকেশনটি বার্তার ইতিহাস সংরক্ষণ করতে Upstash Redis ব্যবহার করবে। যখন কাফকার কাছে একটি বার্তা উত্পাদিত হয়, তখন এটি রেডিস ডাটাবেসেও বজায় থাকবে। একটি নতুন ক্লায়েন্ট তৈরি করার পরে, পুরানো বার্তাগুলি Upstash Redis থেকে পুনরুদ্ধার করা হবে এবং চ্যাট ডিসপ্লেতে রেন্ডার করা হবে৷

এখানে অ্যাপ্লিকেশনটির সাধারণ ওভারভিউ রয়েছে:

দ্রষ্টব্য: আমাদের বাস্তবায়নে, আমরা ডেমো উদ্দেশ্যে একক বার্তা সার্ভার তৈরি করব, বার্তা লোড পরিচালনা করার জন্য কেউ সার্ভারের সংখ্যা বাড়াতে পারে৷

Upstash Kafka, Redis, এবং Next.js-এর সাথে একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করুন

ডেমো

আপনি এখানে অ্যাপটির ডেমোতে পৌঁছাতে পারেন। অ্যাপ্লিকেশনটির বর্তমান সংস্করণটি ফ্লাইতে স্থাপন করা হয়েছে৷

শুরু করা

চ্যাট অ্যাপ্লিকেশান তৈরির ধাপগুলি এখানে রয়েছে:

  1. Upstash Redis ডাটাবেস তৈরি করা হচ্ছে
  2. Upstash Kafka ক্লাস্টার তৈরি করা হচ্ছে
  3. পরবর্তী অ্যাপ্লিকেশন তৈরি করা হচ্ছে (ফ্রন্টএন্ড)।
  4. ওয়েবসকেট বার্তা সার্ভার তৈরি করা হচ্ছে।
  5. অ্যাপ্লিকেশনটি Fly.io-তে স্থাপন করা হচ্ছে

Upstash Redis ডাটাবেস তৈরি করা হচ্ছে

Upstash কনসোলে নেভিগেট করুন এবং লগইন করুন, তারপর Redis-এ ট্যাবে, ডেটাবেস তৈরি করুন ক্লিক করুন বোতাম।

Upstash Kafka, Redis, এবং Next.js-এর সাথে একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করুন

ঠিক তেমনই, আমাদের রেডিস ব্যবহারের জন্য প্রস্তুত! আমরা শংসাপত্রের জন্য Redis কনসোলে ফিরে আসব৷

Upstash Kafka ক্লাস্টার তৈরি করা হচ্ছে

এখন, কাফকা-এ স্যুইচ করুন ট্যাব, এবং ক্লাস্টার তৈরি করুন ক্লিক করুন বোতাম ক্লাস্টারের নাম টাইপ করুন এবং এগিয়ে যান। তারপর, কাফকা বিষয় তৈরি করুন এবং নিশ্চিত করুন।

Upstash Kafka, Redis, এবং Next.js-এর সাথে একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করুন

পরবর্তী অ্যাপ তৈরি করা হচ্ছে

প্রথমে, আপনার টার্মিনাল থেকে আপনার অ্যাপ্লিকেশনের রুট ফোল্ডার তৈরি করুন এবং নেভিগেট করুন। আমরা পরবর্তী অ্যাপ এবং সার্ভারটিকে এই ফোল্ডারে রাখব।

mkdir chat-app
cd chat-app

তারপর, আপনার পরবর্তী অ্যাপ তৈরি করুন৷

$ npx create-next-app@latest
 
✔ What is your project named? … next-chat-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … No
✔ Would you like to customize the default import alias? … No

প্রমাণপত্র পরিচালনা করা

আমরা .env নামে একটি ফাইল তৈরি করব শংসাপত্র সংরক্ষণ করতে। আমাদের শংসাপত্রগুলি বারবার অনুলিপি এবং পেস্ট করতে হবে না, আমরা কেবল এই ফাইলটি থেকে আমদানি করব৷

প্রথমে, .env তৈরি করুন ফাইল।

তারপরে, Redis কনসোলে নেভিগেট করুন এবং UPSTASH_REDIS_REST_URL কপি/পেস্ট করুন এবং UPSTASH_REDIS_REST_TOKEN .env-এর শংসাপত্র ফাইল।

Upstash Kafka, Redis, এবং Next.js-এর সাথে একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করুন

অবশেষে, কাফকা কনসোলে স্যুইচ করুন, এবং UPSTASH_KAFKA_REST_URL স্থানান্তর করুন , UPSTASH_KAFKA_REST_USERNAME , UPSTASH_KAFKA_REST_PASSWORD

Upstash Kafka, Redis, এবং Next.js-এর সাথে একটি রিয়েল-টাইম চ্যাট অ্যাপ তৈরি করুন

এখন, আপনার .env ফাইল অনুরূপ দেখতে হবে

.env
UPSTASH_REDIS_REST_URL=...
UPSTASH_REDIS_REST_TOKEN=...
 
UPSTASH_KAFKA_REST_URL=...
UPSTASH_KAFKA_REST_USERNAME=...
UPSTASH_KAFKA_REST_PASSWORD=...

এখন যেহেতু আমরা শংসাপত্রগুলি কনফিগার করেছি, আমরা অ্যাপ্লিকেশনটির সাথে এগিয়ে যেতে পারি৷

ক্লায়েন্ট রেজিস্ট্রেশন পৃষ্ঠা

ইনডেক্স পেজে ক্লায়েন্ট রেজিস্ট্রেশন/সৃষ্টির ক্রিয়াকলাপ থাকবে। যখন একটি ব্যবহারকারীর নাম জমা দেওয়া হয়, তখন একটি নতুন ক্লায়েন্ট তৈরি করা হবে এবং বর্তমান ক্লায়েন্টদের অধীনে তালিকাভুক্ত করা হবে টেবিল।

pages/index.tsx
import { useState } from "react";
import Link from "next/link";
 
import { Redis } from "@upstash/redis";
 
import styles from "@/styles/Home.module.css";
 
export default function Home() {
 const [usernameInput, setUsernameInput] = useState<string>("");
 const [usernameList, setUsernameList] = useState<string[]>(Array<string>);
 
 const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
 const inputValue: string = e.target.value;
 setUsernameInput(inputValue);
 };
 
 const addUsernameClient = (e: React.FormEvent<HTMLFormElement>): void => {
 e.preventDefault();
 setUsernameList([...usernameList, usernameInput]);
 setUsernameInput("");
 };
 return (
 <div className={styles.container}>
 <div className={styles.welcomeSection}>
 <h1>Welcome to the demo message app!</h1>
 <p>
 This application uses Upstash Kafka for message passing, and Upstash
 Redis for state management.
 <br />
 <br />
 To get started, create several clients by typing in unique usernames to
 the input section below and submitting.
 <br />
 <br />
 The usernames will be added to the list of current clients. Click on a
 username to open a new tab with that client&apos;s message display.
 <br />
 <br />
 You can have multiple sessions open at once.
 </p>
 </div>
 <form className={styles.formSection} onSubmit={addUsernameClient}>
 <input
 type="text"
 className={styles.formInput}
 value={usernameInput}
 onChange={handleInputChange}
 ></input>
 
 <button className={styles.formSubmit} type="submit">
 Create the client!
 </button>
 </form>
 <div className={styles.clientListSection}>
 <p className={styles.clientListHeader}>Current Clients</p>
 <div className={styles.clientList}>
 {usernameList.map((username, i) => {
 return (
 <Link
 href={`/user/${username}`}
 key={`${i}`}
 className={styles.userClient}
 target={"_blank"}
 >
 <p>{username}</p>
 </Link>
 );
 })}
 </div>
 </div>
 </div>
 );
}

আপনি যদি প্রতিবার অ্যাপটি পুনরায় লোড করার সময় চ্যাট ইতিহাস পুনরায় সেট করতে চান তবে আপনি নিম্নলিখিত ফাংশনটি ব্যবহার করতে পারেন:

pages/index.tsx
export async function getServerSideProps() {
 const redis = new Redis({
 url: process.env.UPSTASH_REDIS_REST_URL,
 token: process.env.UPSTASH_REDIS_REST_TOKEN,
 });
 
 await redis.del("messagesList");
 
 return {
 props: {},
 };
}

যে সঙ্গে, সূচী পাতা চালানোর জন্য প্রস্তুত. npm run dev চালান next-chat-app-এ কমান্ড সূচী পাতা লাইভ দেখতে ফোল্ডার.

মেসেজ ক্লায়েন্ট পৃষ্ঠা

ক্লায়েন্টদের জন্য গতিশীল রাউটিং বাস্তবায়ন করতে, আমরা /pages/user/[username].tsx নামে একটি ফোল্ডার তৈরি করব এই ফোল্ডার কাঠামোটি আমাদের প্রতিটি স্বতন্ত্র ক্লায়েন্টের ব্যবহারকারীর নামের উপর ভিত্তি করে গতিশীল রুট তৈরি করার অনুমতি দেবে৷

এখানে ক্লায়েন্টের প্রধান উপাদান। এই উপাদানটি বার্তাগুলির তালিকা, ব্যবহারকারীর নাম ইত্যাদির রাজ্যগুলিকে ধরে রাখবে৷ আমরা WebSocket থেকে বার্তা, সংযোগ এবং সংযোগ বিচ্ছিন্ন করার ইভেন্টগুলি তৈরি করতে useWebSocket হুক ব্যবহার করছি৷ যখন একটি বার্তা ইভেন্ট নির্গত হয়, তখন বার্তাটি বার্তা তালিকায় যোগ করা হবে এবং MessageDisplay উপাদানটি পুনরায় রেন্ডার করা হবে৷

/pages/user/[username].tsx
import { useState } from "react";
import { useRouter } from "next/router";
 
import { Redis } from "@upstash/redis";
import useWebSocket from "react-use-websocket";
 
import styles from "@/styles/Home.module.css";
 
type Message = {
 id: number;
 sender: string;
 text: string;
};
 
export default function MessageApp(props: { messagesData: Message[] }) {
 const { messagesData } = props;
 const { username } = useRouter().query;
 const [inputText, setInputText] = useState<string>("");
 const [messageList, setMessageList] = useState<Message[]>(messagesData);
 const [messageCounter, setMessageCounter] = useState<number>(0);
 
 const handleMessage = function (message: Message) {
 const nextMessages = [...messageList, message];
 setMessageList(nextMessages);
 };
 
 // handling WebSocket events
 const { sendMessage } = useWebSocket("ws://localhost:8080", {
 share: true,
 filter: () => false,
 onOpen: () => {
 console.log("WebSocket connection!");
 return "connection";
 },
 
 onMessage: (message) => {
 const data = JSON.parse(message.data);
 const { sender, text }: { sender: string; text: string } = data;
 const messageData: Message = {
 id: messageCounter,
 sender: sender,
 text: text,
 };
 setMessageCounter(messageCounter + 1);
 handleMessage(messageData);
 return message;
 },
 
 onClose: () => {
 console.log("WebSocket disconnected!");
 return "disconnected";
 },
 });
 
 function handleSendMessage(messageText: string) {
 const messageData = {
 sender: username,
 text: messageText,
 };
 
 sendMessage(JSON.stringify(messageData));
 }
 
 return (
 <div className={styles.Container}>
 <MessageDisplay messages={messageList} />
 <MessageInput
 inputText={inputText}
 setInputText={setInputText}
 handleSendMessage={handleSendMessage}
 />
 </div>
 );
}

এখানে MessageDisplay এবং MessageInput উপাদান রয়েছে:

/pages/user/[username].tsx
const MessageDisplay = function (props: { messages: Message[] }) {
 const { messages } = props;
 
 return (
 <div className={styles.messageContainer}>
 {messages.map((message) => (
 <MessageBubble
 key={message.id}
 sender={message.sender}
 text={message.text}
 />
 ))}
 </div>
 );
};
 
const MessageInput = (props: {
 inputText: string;
 setInputText: (msg: string) => void;
 handleSendMessage: (msg: string) => void;
}) => {
 const { inputText, setInputText, handleSendMessage } = props;
 
 const handleInputChange = (
 e: React.ChangeEvent<HTMLInputElement>
 ): void => {
 const inputValue: string = e.target.value;
 setInputText(inputValue);
 };
 
 const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
 e.preventDefault();
 handleSendMessage(inputText);
 if (inputText.trim() !== "") {
 setInputText(" ");
 }
 };
 
 return (
 <form className={styles.inputSection} onSubmit={handleSubmit}>
 <input
 className={styles.inputText}
 type="text"
 value={inputText}
 onChange={handleInputChange}
 ></input>
 <button className={styles.inputSendButton} type="submit">
 Send
 </button>
 </form>
 );
};
 
const MessageBubble = (props: {
 sender: string;
 text: string;
 key: number;
}) => {
 const { sender, text } = props;
 
 const { username } = useRouter().query;
 
 const isSender = sender === username;
 const senderClass = isSender ? "sender" : "receiver";
 return (
 <div className={`${styles["messageBubble"]} ${styles[senderClass]}`}>
 <div className={styles.messageSender}>
 {isSender ? "You" : sender}
 </div>
 <div className={styles.messageText}>{text}</div>
 </div>
 );
};

ক্লায়েন্টকে চ্যাট ইতিহাস প্রদান করার জন্য, আমরা getServerSideProps() ব্যবহার করব ফাংশন।

/pages/user/[username].tsx
export async function getServerSideProps() {
 const redis = new Redis({
 url: process.env.UPSTASH_REDIS_REST_URL,
 token: process.env.UPSTASH_REDIS_REST_TOKEN,
 });
 
 const messagesData = (await redis.lrange("messagesList", 0, -1)).reverse();
 
 return {
 props: {
 messagesData,
 },
 };
}

আমাদের Next.js অ্যাপ এখন কাজ করছে। পৃষ্ঠাটি রিফ্রেশ করুন, ক্লায়েন্ট তৈরি করুন এবং তাদের মধ্যে একটি নেভিগেট করুন। আপনি ক্লায়েন্ট পৃষ্ঠা দেখতে পাবেন। কিন্তু তবুও, বার্তা প্রবাহ পরিচালনা করার জন্য আমাদের বার্তা সার্ভারের প্রয়োজন৷

মেসেজ সার্ভার তৈরি করা হচ্ছে

সার্ভার এর গঠন বরং সহজ. আমরা এটিকে কাজ করতে Node.js, ws লাইব্রেরি এবং Upstash Kafka ব্যবহার করতে যাচ্ছি। প্রথমে একটি server তৈরি করুন chat-app folder এর ভিতরে ফোল্ডার .

mkdir server
cd server

server এর ভিতরে ফোল্ডারে, আমরা প্রয়োজনীয়তাগুলি ইনস্টল করব এবং ফাইলগুলি কনফিগার করব৷

npm install typescript ws tsc @upstash/kafka @types/ws
tsc --init

তারপর, আমরা /server/message_server.ts-এর ভিতরে WebSocket, Kafka Producer এবং Kafka Consumer ক্লায়েন্ট তৈরি করতে যাচ্ছি ফাইল:

/server/message_server.ts
import * as http from "http";
 
import { Kafka } from "@upstash/kafka";
import { Redis } from "@upstash/redis";
import { WebSocket } from "ws";
 
const server = http.createServer();
const wss = new WebSocket.Server({ server });
 
server.listen(8080, () => {
 console.log("Server is running on port 8080");
});
 
const kafka = new Kafka({
 url: process.env.UPSTASH_KAFKA_REST_URL,
 username: process.env.UPSTASH_KAFKA_REST_USERNAME,
 password: process.env.UPSTASH_KAFKA_REST_PASSWORD,
});
 
const redis = new Redis({
 url: process.env.UPSTASH_REDIS_REST_URL,
 token: process.env.UPSTASH_REDIS_REST_TOKEN,
});
 
const consumer = kafka.consumer();
 
const producer = kafka.producer();
 
const clients = new Set<WebSocket>();

WebSocket এর সাথে ইন্টারঅ্যাক্ট করার জন্য, আমরা connection তৈরি করছি এবং message ঘটনা।

/server/message_server.ts
wss.on("connection", async (connection, req) => {
 clients.add(connection);
 console.log(`New client connected!`);
 
 connection.on("message", async (message) => {
 const jsonMessage = message.toString();
 
 console.log("Received message:", JSON.parse(jsonMessage));
 
 producer.produce("chat", jsonMessage);
 });
 
 connection.on("close", () => {
 console.log(`Client disconnected:`);
 clients.delete(connection);
 });
});

অবশেষে, আমরা থ্রেড তৈরি করব এবং চালাব যা পূর্বনির্ধারিত ব্যবধান সহ বার্তাগুলি ব্যবহার করে:

/server/message_server.ts
async function run() {
 while (true) {
 const messages = await consumer.consume({
 consumerGroupId: "group_1",
 instanceId: "instance_1",
 topics: ["chat"],
 autoOffsetReset: "earliest",
 });
 
 if (messages.length != 0) {
 for (let i = 0; i < messages.length; i++) {
 await redis.lpush("messagesList", messages[i].value);
 console.log(`Message sending: ${messages[i].value}`);
 
 clients.forEach((connection: WebSocket) => {
 connection.send(messages[i].value);
 });
 }
 }
 
 console.log("Run!");
 
 await new Promise((resolve) => setTimeout(resolve, 1000));
 }
}

সবকিছু প্রস্তুত. আমাদের অ্যাপটি এখনই একটি মুগ্ধতার মতো কাজ করা উচিত। আপনি যদি স্থানীয়ভাবে বার্তা সার্ভার চালান এবং ক্লায়েন্ট পৃষ্ঠাটি রিফ্রেশ করেন, আপনি ক্লায়েন্টদের মধ্যে প্রেরিত বার্তাগুলি দেখতে পাবেন। নীচের কমান্ডগুলি টিএস ফাইলটিকে ট্রান্সকম্পাইল করবে এবং সার্ভারকে localhost:8000 এ চালাবে

tsc message_server.ts
node message_server.js

ডিপ্লয়মেন্ট

আমরা স্থাপনার জন্য Fly.io ব্যবহার করব। আমরা শুরু করার আগে অনুগ্রহ করে একটি অ্যাকাউন্ট তৈরি করুন, যদি আপনার কাছে এটি ইতিমধ্যে না থাকে।

মেসেজ সার্ভার স্থাপন করা হচ্ছে

server-এ যান ফোল্ডার এবং flyctl ইনস্টল করুন CLI টুল, এবং শেল এর মাধ্যমে অনুমোদন করুন

npm install flyctl
flyctl auth login

কনফিগারেশন ফাইল তৈরি করতে, flyctl init চালান . এটি একটি fly.toml তৈরি করবে . fly.toml-এ যান এবং WebSocket সংযোগ কনফিগারেশনের জন্য নিম্নলিখিত লাইনগুলি সন্নিবেশ করান:

fly.toml
[[services]]
 internal_port = 8080
 protocol = "tcp"
 
 [services.concurrency]
 hard_limit = 25
 soft_limit = 20
 
 [[services.ports]]
 handlers = ["http"]
 port = "80"
 
 [[services.ports]]
 handlers = ["tls", "http"]
 port = "443"
 
 [[services.tcp_checks]]
 interval = 10000
 timeout = 2000

এখন, সার্ভারের জন্য একটি চূড়ান্ত ধাপ। flyctl deploy চালান , এবং আমরা যেতে প্রস্তুত! যখন স্থাপনা প্রক্রিয়া সম্পন্ন হয়, flyctl আপনার সার্ভারের জন্য একটি শেষ পয়েন্ট প্রদান করবে। অনুগ্রহ করে সেই শেষ পয়েন্টটি অনুলিপি করুন। আমাদের ক্ষেত্রে, শেষ পয়েন্ট হল message-server.fly.dev .

পরবর্তী অ্যাপ্লিকেশন স্থাপন করা হচ্ছে

Next.js অ্যাপ্লিকেশনটি স্থাপন করার আগে, আমাদের বার্তা সার্ভারের স্থাপনার শেষ পয়েন্ট এমবেড করতে হবে। অনুগ্রহ করে pages/user/[username].tsx-এ WebSocket URL প্রতিস্থাপন করুন ws://localhost:8080 থেকে ফাইল flyctl থেকে শেষ বিন্দুতে , wss:// এর সাথে মিলিত উপসর্গ আমাদের ক্ষেত্রে, এটি হল wss://message-server.fly.dev .

তারপর, next-chat-app-এ ফোল্ডার, server হিসাবে অভিন্ন কমান্ড চালান . এইবার, আমাদের fly.toml সম্পাদনা করতে হবে না ফাইল, তাই আমরা সেই পদক্ষেপ ছাড়াই এগিয়ে যেতে পারি।

flyctl init
flyctl deploy

আমরা শেষ! আপনি যদি flyctl open চালান কমান্ড, আপনাকে আপনার নিয়োজিত প্রকল্পে নেভিগেট করা হবে।

উপসংহার এবং পরামর্শ

অনুসরণ করার জন্য আপনাকে ধন্যবাদ!

আপনি এখানে প্রকল্পের Github সংগ্রহস্থল খুঁজে পেতে পারেন.

আপনি যদি প্রকল্পে কাজ চালিয়ে যেতে চান তবে এখানে কিছু পরামর্শ দেওয়া হল:

  • বর্তমানে, যখনই পৃষ্ঠাটি পুনরায় লোড করা হয়, Upstash Redis-এ সমস্ত সঞ্চিত বার্তাগুলি ফ্লাশ করা হচ্ছে৷ এই আচরণটি pages/index.tsx-এর কোড দ্বারা নিয়ন্ত্রিত হয় ফাইল, বিশেষ করে getServerSideProps এর মধ্যে ফাংশন যাইহোক, একটি জটিল সমস্যা দেখা দেয় যখন একজন ব্যবহারকারী পৃষ্ঠাটি পুনরায় লোড করার সিদ্ধান্ত নেয়, এর ফলে চ্যাটরুমের সমস্ত অংশগ্রহণকারীদের জন্য চ্যাট ইতিহাস মুছে ফেলা হয়।
    এই সমস্যাটি সমাধান করার জন্য, একটি প্রস্তাবিত সমাধানের মধ্যে প্রতিবার একটি বার্তা পাঠানো হলে চ্যাট ইতিহাসের জন্য TTL-এর একটি এক্সটেনশন প্রয়োগ করা জড়িত৷ এই উন্নতি নিশ্চিত করবে যে চ্যাট ইতিহাস পৃষ্ঠা পুনরায় লোড হওয়ার পরেও অ্যাক্সেসযোগ্য এবং সংরক্ষিত থাকবে৷

  • আপনি একাধিক চ্যাটরুম বৈশিষ্ট্য বাস্তবায়ন করতে পারে. এটি অর্জন করতে, আপনি প্রতিটি চ্যাটরুমের জন্য অনন্য নাম সহ একাধিক কাফকা বিষয় তৈরি করতে পারেন। আরেকটি উপায় হল সঠিক ডেটা স্ট্রাকচার ব্যবহার করে মেসেজ সার্ভারে এটি পরিচালনা করা।

  • আপনি একাধিক বার্তা সার্ভার প্রয়োগ করতে পারেন, এবং সেরা সিস্টেম ডিজাইন অনুশীলনগুলি প্রয়োগ করতে একটি লোড ব্যালেন্সার৷

আপনার কোন প্রশ্ন থাকলে, আপনি fahreddin@upstash.com

এ আমার সাথে যোগাযোগ করতে পারেন
  1. ম্যাটপ্লটলিবে এন, বিন এবং প্যাচগুলি কী কী?

  2. শীর্ষ 5টি কারণ কেন RedisInsight Redis বিকাশকারীদের জন্য একটি নিখুঁত টুল

  3. অ্যান্ড্রয়েডে টেক্সটভিউয়ের জন্য সাদা স্থানগুলি কীভাবে সরিয়ে ফেলা যায়?

  4. CSS মিডিয়ার ধরন এবং প্রশ্ন বোঝা