ওয়েব অ্যাপ্লিকেশন ব্যবহার করার সময় রিয়েল-টাইম বিজ্ঞপ্তি পাওয়া খুব সাধারণ। বিজ্ঞপ্তি চ্যাটবট, সতর্কতা সিস্টেম থেকে আসতে পারে বা অ্যাপ্লিকেশন দ্বারা এক বা একাধিক ব্যবহারকারীর কাছে পুশ করা একটি ইভেন্ট দ্বারা ট্রিগার হতে পারে। বিজ্ঞপ্তির উৎস যাই হোক, ডেভেলপাররা বিজ্ঞপ্তি সেবা তৈরি করার জন্য Redis ব্যবহার করছেন।
মাইক্রোসার্ভিসেস আর্কিটেকচার দ্বারা চালিত আধুনিক অ্যাপ্লিকেশনগুলিতে, Redis কখনও কখনও একটি সাধারণ ক্যাশ এবং একটি প্রাথমিক ডাটাবেস হিসাবে ব্যবহৃত হয়। কিন্তু এটি Redis Streams দ্বারা संচালিত একটি স্থায়ী মেসেজিং লেয়ার ব্যবহার করে সার্ভিসেসের মধ্যে যোগাযোগের লেয়ার হিসেবেও ব্যবহৃত হয়, যা এর সুপরিচিত Pub/Sub (পাবলিশ/সাবস্ক্রাইব) কমান্ডها ব্যবহার করে একটি হালকা ইভেন্টিং সিস্টেম।
এই ব্লগ পোস্টে, আমরা আপনাকে দেখাবো কিভাবে Redis Pub/Sub ব্যবহার করে একটি ছোট বিজ্ঞপ্তি সেবা তৈরি করা সহজ যা একটি ওয়েব অ্যাপ্লিকেশনে মেসেজ পাঠায়, যা Vue.js, Node.js এবং WebSockets দিয়ে তৈরি।
পূর্বশর্ত
এই ডেমো সেবা ব্যবহার করে:
- Docker
- Redis 5.0.x বা পরবর্তী ভার্সন (এই ডেমো Redis Docker কন্টেইনার ব্যবহার করে)
- Node.js 10.x সাথে Node প্যাকেজ ম্যানেজার (npm)
- nodemon, একটি সহজ টুল যা ডেভেলপমেন্টের সময় আপনার অ্যাপ্লিকেশনটি স্বয়ংক্রিয়ভাবে রিস্টার্ট করে
- Vue CLI
Redis সার্ভার শুরু করা
যদি আপনার पास ইতিমধ্যে একটি চলমান Redis ইনস্ট্যান্স না থাকে, তবে আপনি Docker ব্যবহার করে এটি শুরু করতে পারেন; একটি টার্মিনালে এই কমান্ডটি চালান:
> docker run -it --rm --name redis-server -p 6379:6379 redis
Redis এখন চালু এবং চলমান হওয়া উচিত এবং সংযোগ গ্রহণের জন্য প্রস্তুত।
Node.js দিয়ে WebSocket সার্ভার তৈরি করা
প্রজেক্টটি সঠিক কাঠামোর সাথে কনফিগার করতে, একটি টার্মিনাল খুলুন এবং নিম্নলিখিত কমান্ডগুলি চালান:
npm ব্যবহার করে একটি নতুন Node.js প্রজেক্ট তৈরি করুন (-y প্যারামিটারটি সব মান ডিফল্ট সেট করবে):
উপরোক্ত চূড়ান্ত কমান্ড আপনার প্রজেক্টে WebSocket এবং Redis নির্ভরতা যোগ করে। এখন আপনি কোড লিখতে প্রস্তুত!
WebSocket সার্ভার লিখা
Node.js এর জন্য আপনার প্রিয় কোড এডিটর খুলুন (আমি Visual Studio Code ব্যবহার করি) এবং বর্তমান ডিরেক্টরি খোলার জন্য শুধু “code .” লিখুন। আপনার এডিটরে, server.js নামে একটি নতুন ফাইল তৈরি করুন।
এই সহজ Node.js প্রোগ্রামটি ডেমোstration-এর জন্য সীমাবদ্ধ এবং নিম্নলিখিত বিষয়গুলিতে ফোকাস করে:
- Redis-এ সংযোগ করা (লাইন ৯)
- “app:notifications” চ্যানেল থেকে মেসেজ সাবস্ক্রাইব করা (লাইন ১০)
- WebSocket সার্ভার শুরু করা (লাইন ১৩)
- ব্যবহারকারী ক্লায়েন্ট সংযোগ নিবন্ধন করা (লাইন ১৬)
- Redis সাবস্ক্রাইব ইভেন্ট শোনা (লাইন ১৯)
- এবং সব WebSocket ক্লায়েন্টদের মেসেজ পাঠানো (লাইন ২১)।
লাইন ৫ এবং ৬ কেবল Redis সার্ভারের অবস্থান এবং Web Socket সার্ভারের জন্য ব্যবহার किए जाने वाले পোর্ট কনফিগার করতে ব্যবহৃত হয়। আপনি দেখতে পাচ্ছেন এটি খুব সহজ।
WebSocket সার্ভার চালানো
যদি আপনি এখনও nodemon ইনস্টল না করে থাকেন, তবে এখনই ইনস্টল করুন। তারপর নিম্নলিখিত কমান্ড ব্যবহার করে WebSocket সার্ভার শুরু করুন:
এখন ফ্রন্টএন্ড তৈরি করা যাক যা বিজ্ঞপ্তিগুলি গ্রহণ করবে এবং ব্যবহারকারীদের দেখাবে।
Vue.js দিয়ে ফ্রন্টএন্ড তৈরি করা
একটি নতুন টার্মিনাল খুলুন এবং notifications ডিরেক্টরি থেকে নিম্নলিখিত কমান্ড চালান:
যদি আপনি ইতিমধ্যে Vue CLI টুল ইনস্টল না করে থাকেন, তবে এখনই npm install -g @vue/cli কমান্ড ব্যবহার করে করুন।
এই কমান্ড একটি নতুন Vue প্রজেক্ট তৈরি করে যা এক্সিকিউট এবং এক্সটেন্ড করার জন্য প্রস্তুত।
এই ডেমো üçün একটি শেষ প্যাকেজ ইনস্টল করতে হবে - BootstrapVue, যা জনপ্রিয় Bootstrap ফ্রেমওয়ার্কের CSS লাইব্রেরি এবং কম্পোনেন্টগুলি ব্যবহার করা সহজ করে তোলে।
আপনার প্রিয় কোড এডিটরে web-client ডিরেক্টরি খুলুন, তারপর নতুন তৈরি করা Vue অ্যাপ্লিকেশন শুরু করুন:
চূড়ান্ত কমান্ডটি Vue ডেভেলপমেন্ট সার্ভার শুরু করে যা পৃষ্ঠাগুলি সার্ভ করবে এবং আপনি সেগুলি পরিবর্তন করলে স্বয়ংক্রিয়ভাবে রিলোড করবে।
আপনার ব্রাউজার খুলুন এবং https://localhost:8080-এ যান; যেখানে আপনি ডিফল্ট Vue স্বাগত পৃষ্ঠা দেখতে পাবেন:
ফ্রন্টএন্ডে WebSocket যোগ করা
Vue ফ্রেমওয়ার্ক খুব সহজ, এবং এই পোস্টের জন্য আমরা কোড যতটা সম্ভব সহজ রাখব। তাই দ্রুত ডিরেক্টরি কাঠামো দেখি:
├── README.md ├── babel.config.js ├── node_modules ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── main.js
রুট লেভেলের ফাইলগুলি (babel.config.js, package.json, package-lock.json, node_modules) প্রজেক্ট কনফিগার করতে ব্যবহৃত হয়। সবচেয়ে আকর্ষণীয় অংশ, কমপক্ষে এখনতक, src ডিরেক্টরিতে অবস্থিত:
- main.js ফাইলটি অ্যাপ্লিকেশনের প্রধান জাভাস্ক্রিপ্ট ফাইল, যা সব সাধারণ উপাদান লোড করে এবং App.vue মূল স্ক্রিনটি কল করে। আমরা পরে এটিকে মডিফাই করব Bootstrap সাপোর্ট যোগ করতে।
- App.vue একটি ফাইল যাতে একটি নির্দিষ্ট পৃষ্ঠা বা টেমপ্লেটের HTML, CSS এবং জাভাস্ক্রিপ্ট থাকে। অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট হিসেবে, এই অংশটি ডিফল্টভাবে সব স্ক্রিন দ্বারা শেয়ার করা হয়, তাই এই ফাইলে বিজ্ঞপ্তি-ক্লায়েন্ট পিসটি লেখা একটি ভালো জায়গা।
public/index.html স্ট্যাটিক এন্ট্রি পয়েন্ট যেখানে থেকে DOM লোড হবে। আপনি যদি এটিকে দেখেন তবে একটি <div id=”app”> দেখবেন, যা Vue অ্যাপ্লিকেশন লোড করতে ব্যবহৃত হয়।
এই ডেমো খুব সহজ, এবং আপনাকে শুধু দুটি ফাইল মডিফাই করতে হবে: App.vue এবং main.js ফাইলগুলো। একটি রিয়েল-লাইফ অ্যাপ্লিকেশনে, আপনি সম্ভবত একটি Vue.js কম্পোনেন্ট তৈরি করবেন যা বিভিন্ন জায়গায় পুনরায় ব্যবহার করা যাবে।
App.vue ফাইল আপডেট করে WebSocket মেসেজ দেখানো
আপনার এডিটরে App.vue ফাইলটি খুলুন এবং নিচের তথ্যটি যোগ করুন। পৃষ্ঠার নিচে, ঠিক </div> ট্যাগের আগে, নিম্নলিখিত HTML ব্লকটি যোগ করুন:
{{message}} নোটেশন ব্যবহার করে, আপনি Vue-কে message ভেরিয়েবলের কন্টেন্ট প্রিন্ট করতে বলছেন, যা আপনি পরবর্তী ব্লকে সংজ্ঞায়িত করবেন।
<script> এ, কন্টেন্টটি নিচের কোড দিয়ে প্রতিস্থাপন করুন:
কোডের এই কিছু লাইনটি ব্যবহৃত হয়:
- WebSocket সার্ভারের সাথে সংযোগ করতে (লাইন ১৩)
- সার্ভার থেকে মেসেজ ব্যবহার করে সেগুলি লোকাল message ভেরিয়েবলে পাঠাতে (লাইন ১৩-১৭)
আপনি যদি ধ 뭔 পরিবর্তন হয়েছে তা Aufmerksamkeit দিন, তবে আপনি দেখতে পাবেন আপনি যুক্ত করেছেন:
- একটি data() ফাংশন যা Vue কম্পোনেন্টকে নির্দেশ করে যে আপনি লোকাল ভেরিয়েবল সংজ্ঞায়িত করছেন যা স্ক্রিনের সাথে বাইন্ড করা যেতে পারে (লাইন ৬-১০)
- একটি created() ফাংশন যা Vue কম্পোনেন্ট দ্বারা স্বয়ংক্রিয়ভাবে কল করা হয় যখন এটি ইনিশিয়ালাইজ হয়
Redis থেকে আপনার Vue অ্যাপ্লিকেশনে মেসেজ পাঠানো
WebSocket সার্ভার এবং Vue ফ্রন্টএন্ড এখন চলমান এবং সংযুক্ত থাকা উচিত আপনার যোগ করা জাভাস্ক্রিপ্টের কিছু লাইনের 덕택ে। এখন এটি টেস্ট করার সময়!
Redis CLI বা RedisInsight ব্যবহার করে app:notifications চ্যানেলে কিছু মেসেজ পাবলিশ করুন। উদাহরণস্বরূপ, আপনি যদি Docker ব্যবহার করে Redis শুরু করে থাকেন, তবে নিম্নলিখিত কমান্ড ব্যবহার করে এটিতে সংযোগ করতে পারেন এবং মেসেজ পাবলিশ করা শুরু করতে পারেন:
আপনার ব্রাউজারে অ্যাপ্লিকেশনের নিচে মেসেজটি দেখতে পাবেন:
আপনি দেখতে পাচ্ছেন, WebSocket ব্যবহার করে আপনার ওয়েব ফ্রন্টএন্ডে রিয়েল-টাইমে কন্টেন্ট পুশ করা কতটা সহজ। এখন ডিজাইন উন্নত করি এবং Bootstrap ব্যবহার করে আরও ব্যবহারকারী-বান্ধব ইন্টারফেস যোগ করি।
Bootstrap দিয়ে অ্যালার্ট ব্লক তৈরি করা
এই সেকশনে, আমরা আপনাকে দেখাবো কিভাবে একটি Bootstrap অ্যালার্ট কম্পোনেন্ট ব্যবহার করা যায়, যা একটি নতুন মেসেজ প্রাপ্ত হলে দেখায় এবং একটি সহজ কাউন্টডাউন ব্যবহার করে কয়েক সেকেন্ডের পর স্বয়ংক্রিয়ভাবে লুকায়।
Main.js ফাইল
main.js ফাইলটি খুলুন এবং শেষ ইম্পোর্টের পরে নিম্নলিখিত লাইনগুলি যোগ করুন:
এই চার লাইন আপনার Vue অ্যাপ্লিকেশনে Bootstrap কম্পোনেন্টগুলি ইম্পোর্ট এবং রেজিস্টার করে।
App.js ফাইল
App.vue ফাইলে, আপনি যা আগে যোগ করেছিলেন (দুটি <hr/> ট্যাগ এবং ট্যাগগুলোর মাঝপথের সবকিছু) সেটিকে নিচের কোড দিয়ে প্রতিস্থাপন করুন:
এই কম্পোনেন্টটি বেশ কিছু অ্যাট্রিবিউট ব্যবহার করে:
- id=”notification” হলো এলিমেন্ট আইডি যা JavaScript বা CSS কোডে এলিমেন্টটি রেফারেন্স করতে ব্যবহৃত হয়
- :show=”dismissCountDown” নির্দেশ করে যে কম্পোনেন্টটি তখনই দৃশ্যমান হবে যখন dismissCountDown ভেরিয়েবল null বা ০ নয়
- dismissible অ্যালার্টে একটি ছোট আইকন যোগ করে যাতে ব্যবহারকারী ম্যানুয়ালি এটি বন্ধ করতে পারে
- @dismissed=”dismissCountDown=0″ দেখায় যে অ্যালার্ট বক্সটি বন্ধ হবে যখন dismissCountDown এর মান ০ হবে
- @dismiss-count-down=”countDownChanged” হলো কাউন্টডাউন মেথড
আপনার কাছে কিছু লাইন জাভাস্ক্রিপ্ট যোগ করা যাক অ্যালার্ট কম্পোনেন্ট tarafından ব্যবহৃত ভেরিয়েবল এবং মেথড সংজ্ঞায়িত করতে:
এই সেকশনে আপনি:
- dismissSecs এবং dismissCountDown ভেরিয়েবলগুলিকে data() মেথডে যোগ করেছেন (লাইন ৪-৫) যা অ্যালার্টটি দেখানোর আগে লুকানোর জন্য টайমার কন্ট্রোল করতে ব্যবহৃত হয়
- অ্যালার্ট কম্পোনেন্ট দেখানোর এবং লুকানোর জন্য মেথড তৈরি করেছেন (লাইন ১০-২৬)
- নতুন মেসেজ প্রাপ্ত হলে showAlert() মেথড কল করেছেন (লাইন ১৩)
চলুন চেষ্টা করি!
redis-cli বা Redis Insight-এ ফিরে যান এবং app:notifications চ্যানেলে নতুন মেসেজ পোস্ট করুন।
আপনি দেখতে পাচ্ছেন, আপনার অ্যাপ্লিকেশনের জন্য একটি শক্তিশালী বিজ্ঞপ্তি সেবা তৈরি করতে Redis ব্যবহার করা কতটা সহজ। এই স্যাম্পলটি খুব বেসিক, একটি একক চ্যানেল এবং সার্ভার ব্যবহার করে এবং সব ক্লায়েন্টের কাছে ব্রডকাস্ট করে।
লক্ষ্য ছিল সত্যিই WebSocket এবং Redis Pub/Sub দিয়ে শুরু করার একটি সহজ উপায় প্রদান করা যাতে Redis থেকে একটি ওয়েব অ্যাপ্লিকেশনে মেসেজ পুশ করা যায়। নির্দিষ্ট ক্লায়েন্টদের কাছে বিভিন্ন চ্যানেল ব্যবহার করে মেসেজ ডেলিভার করার, এবং অ্যাপ্লিকেশন স্কেল এবং সিকিউর করার অনেক অপশন রয়েছে।
আপনি WebSocket সার্ভারটিকে অন্য দিকেও ব্যবহার করতে পারেন, মেসেজ কনসাম করার পাশাপাশি ক্লায়েন্টদের কাছে মেসেজ পুশ করতে। কিন্তু এটি একটি বড় টপিক অন্য একটি ব্লগ পোস্টের জন্য। আসলে, আরো ব্লগ পোস্টের জন্য আপডেট থাকুন কিভাবে আপনি Redis Gears ব্যবহার করে সরাসরি Redis ডাটাবেসে ইভেন্ট ক্যাপচার করতে পারেন এবং বিভিন্ন ক্লায়েন্টদের কাছে কিছু ইভেন্ট পুশ করতে পারেন।
আরও তথ্যের জন্য, এই রিসোর্সগুলি দেখুন:
- Redis Microservices for Dummies (ফ্রি ইবুক)
- Introduction to Redis Streams (Redis ডকুমেন্টেশন)
- Redis Pub/Sub (Redis ডকুমেন্টেশন)
- Redis University-এ ফ্রি অনলাইন কোর্স করুন
- Redis Enterprise Cloud চেক আউট করুন
