একটি ওয়েব অ্যাপ্লিকেশনে নেভিগেট করার সময় রিয়েল-টাইম বিজ্ঞপ্তি পাওয়া খুবই সাধারণ। বিজ্ঞপ্তিগুলি একটি চ্যাট বট, একটি সতর্কতা সিস্টেম থেকে আসতে পারে বা এমন একটি ইভেন্ট দ্বারা ট্রিগার হতে পারে যা অ্যাপটি এক বা একাধিক ব্যবহারকারীর কাছে ঠেলে দেয়৷ বিজ্ঞপ্তির উৎস যাই হোক না কেন, ডেভেলপাররা বিজ্ঞপ্তি পরিষেবা তৈরি করতে Redis ব্যবহার করছে।
একটি মাইক্রোসার্ভিসেস আর্কিটেকচার দ্বারা চালিত আধুনিক অ্যাপ্লিকেশনগুলিতে, রেডিস প্রায়শই একটি সাধারণ ক্যাশে এবং একটি প্রাথমিক ডাটাবেস হিসাবে ব্যবহৃত হয়। কিন্তু এটি রেডিস স্ট্রীমস দ্বারা চালিত একটি স্থায়ী মেসেজিং স্তর ব্যবহার করে পরিষেবাগুলির মধ্যে একটি যোগাযোগ স্তর হিসাবেও ব্যবহৃত হয়, এটির সুপরিচিত পাব/সাব (প্রকাশ/সাবস্ক্রাইব) কমান্ড ব্যবহার করে একটি হালকা ইভেন্টিং সিস্টেম৷
এই ব্লগ পোস্টে, আমরা আপনাকে দেখাব যে Vue.js, Node.js, এবং WebSockets-এর সাহায্যে তৈরি একটি ওয়েব অ্যাপ্লিকেশনে বার্তা পাঠানোর জন্য Redis Pub/Sub ব্যবহার করে একটি ছোট বিজ্ঞপ্তি পরিষেবা তৈরি করা কতটা সহজ৷
পূর্বশর্ত
এই ডেমো পরিষেবা ব্যবহার করে:
- ডকার
- Redis 5.0.x বা তার পরে (এই ডেমো রেডিস ডকার কন্টেইনার ব্যবহার করে)
- নোড প্যাকেজ ম্যানেজার (এনপিএম) সহ Node.js 10.x
- নোডেমন, একটি সহজ টুল যা বিকাশের সময় স্বয়ংক্রিয়ভাবে আপনার অ্যাপ্লিকেশন পুনরায় চালু করে
- ভিউ CLI
রিডিস সার্ভার শুরু হচ্ছে
আপনার যদি ইতিমধ্যেই একটি রেডিস ইনস্ট্যান্স চালু না থাকে, আপনি ডকার ব্যবহার করে এটি শুরু করতে পারেন; একটি টার্মিনালে, এই কমান্ডটি চালান:
> docker run -it --rm --name redis-server -p 6379:6379 redis
Redis এখন আপ এবং চলমান এবং সংযোগ গ্রহণ করার জন্য প্রস্তুত হওয়া উচিত।
Node.js দিয়ে WebSocket সার্ভার তৈরি করা হচ্ছে
সঠিক কাঠামোর সাথে প্রকল্পটি কনফিগার করতে, একটি টার্মিনাল খুলুন এবং নিম্নলিখিত কমান্ডগুলি লিখুন:
npm ব্যবহার করে একটি নতুন Node.js প্রজেক্ট তৈরি করুন (-y প্যারামিটার সমস্ত মানকে ডিফল্টে সেট করবে) :
উপরের চূড়ান্ত কমান্ডটি আপনার প্রকল্পে WebSocket এবং Redis নির্ভরতা যোগ করে। আপনি এখন কিছু কোড লিখতে প্রস্তুত!
ওয়েবসকেট সার্ভার লেখা
Node.js এর জন্য আপনার প্রিয় কোড এডিটর খুলুন (আমি ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করি) এবং শুধু কোড লিখুন “code .” বর্তমান ডিরেক্টরি খুলতে। আপনার সম্পাদকে, server.js নামে একটি নতুন ফাইল তৈরি করুন .
এই সাধারণ Node.js প্রোগ্রামটি প্রদর্শনের মধ্যে সীমাবদ্ধ এবং এতে ফোকাস করে:
- রেডিসের সাথে সংযোগ করা হচ্ছে (লাইন 9)
- “app:notifications” থেকে বার্তাগুলিতে সদস্যতা নেওয়া চ্যানেল (লাইন 10)
- একটি WebSocket সার্ভার শুরু করা হচ্ছে (লাইন 13)
- ব্যবহারকারী ক্লায়েন্ট সংযোগ নিবন্ধন (লাইন 16)
- রিডিস সাবস্ক্রাইব ইভেন্টগুলি শোনা (লাইন 19)
- এবং সমস্ত WebSocket ক্লায়েন্টকে বার্তা পাঠানো হচ্ছে (21)।
রেডিস সার্ভার অবস্থান এবং ওয়েব সকেট সার্ভারের জন্য ব্যবহার করার জন্য পোর্ট কনফিগার করতে লাইন 5 এবং 6 ব্যবহার করা হয়। আপনি দেখতে পাচ্ছেন এটি বেশ সহজ৷
৷ওয়েবসকেট সার্ভার চালানো হচ্ছে
আপনি যদি এখনও নোডেমন ইনস্টল না করে থাকেন , এখন ইন্সটল করুন। তারপর নিম্নলিখিত কমান্ড ব্যবহার করে WebSocket সার্ভার শুরু করুন:
আসুন এখন ফ্রন্টএন্ড তৈরি করি যা বিজ্ঞপ্তিগুলি পাবে এবং সেগুলি ব্যবহারকারীকে প্রিন্ট করবে৷
৷Vue.js দিয়ে ফ্রন্টএন্ড তৈরি করা হচ্ছে
একটি নতুন টার্মিনাল খুলুন এবং নোটিফিকেশন থেকে নিম্নলিখিত কমান্ডটি চালান ডিরেক্টরি:
আপনি যদি ইতিমধ্যে Vue CLI টুল ইনস্টল না করে থাকেন, তাহলে npm install -g @vue/cli কমান্ড ব্যবহার করে এখনই তা করুন। .
এই কমান্ডটি একটি নতুন Vue প্রজেক্ট তৈরি করে যা কার্যকর এবং প্রসারিত করার জন্য প্রস্তুত৷
৷এই প্রদর্শনের জন্য ইনস্টল করার জন্য একটি শেষ প্যাকেজ হল BootstrapVue, যা জনপ্রিয় বুটস্ট্র্যাপ ফ্রেমওয়ার্ক থেকে CSS লাইব্রেরি এবং উপাদানগুলি ব্যবহার করা সহজ করে তোলে৷
আপনার প্রিয় কোড এডিটরে ওয়েব-ক্লায়েন্ট ডিরেক্টরি খুলুন, তারপর নতুন তৈরি Vue অ্যাপ্লিকেশন শুরু করুন:
শেষ কমান্ডটি Vue ডেভেলপমেন্ট সার্ভার শুরু করে যা পৃষ্ঠাগুলিকে পরিবেশন করবে এবং আপনি যখন পৃষ্ঠাগুলি পরিবর্তন করবেন তখন স্বয়ংক্রিয়ভাবে পুনরায় লোড হবে৷
আপনার ব্রাউজার খুলুন, এবং https://localhost:8080 এ যান; যেখানে আপনি ডিফল্ট Vue স্বাগতম পৃষ্ঠা দেখতে পাবেন:
ফ্রন্টএন্ডে WebSocket যোগ করা হচ্ছে
Vue ফ্রেমওয়ার্কটি বেশ সহজ, এবং এই পোস্টের জন্য আমরা কোডটি যতটা সম্ভব সহজ রাখব। তাহলে চলুন দ্রুত ডিরেক্টরির কাঠামোটি দেখি:
├── README.md├── babel.config.js├── node_modules├── package-lock.json├── package.json├── package.json├── public─ ├co├i─co─ index.html└── src ├── App.vue ├── সম্পদ │ └── logo.png ├── উপাদান │ └── HelloWorld└─ main.রুট স্তরে ফাইলগুলি (babel.config.js , package.json , package-lock.json , নোড_মডিউল ) প্রকল্পটি কনফিগার করতে ব্যবহৃত হয়। সবচেয়ে আকর্ষণীয় অংশ, অন্তত আপাতত, src-এ অবস্থিত ডিরেক্টরি:
- The main.js ফাইল হল অ্যাপ্লিকেশনটির প্রধান জাভাস্ক্রিপ্ট ফাইল, যা সমস্ত সাধারণ উপাদান লোড করবে এবং App.vue কল করবে। প্রধান পর্দায়. বুটস্ট্র্যাপ সমর্থন যোগ করতে আমরা পরে এটি সংশোধন করব।
- The App.vue একটি ফাইল যা একটি নির্দিষ্ট পৃষ্ঠা বা টেমপ্লেটের জন্য HTML, CSS এবং JavaScript-এ থাকে। অ্যাপ্লিকেশনের জন্য একটি এন্ট্রি পয়েন্ট হিসাবে, এই অংশটি ডিফল্টরূপে সমস্ত স্ক্রীন দ্বারা ভাগ করা হয়, তাই এই ফাইলটিতে বিজ্ঞপ্তি-ক্লায়েন্ট অংশ লেখার জন্য এটি একটি ভাল জায়গা৷
public/index.html হল স্ট্যাটিক এন্ট্রি পয়েন্ট যেখান থেকে DOM লোড করা হবে। আপনি যদি এটি দেখেন তাহলে আপনি একটি
এই প্রদর্শনটি বেশ সহজ, এবং আপনাকে শুধুমাত্র দুটি ফাইল পরিবর্তন করতে হবে:App.vue এবং main.js নথি পত্র. একটি বাস্তব-জীবনের অ্যাপ্লিকেশনে, আপনি সম্ভবত একটি Vue.js উপাদান তৈরি করবেন যা বিভিন্ন জায়গায় পুনরায় ব্যবহার করা হবে।
WebSocket বার্তাগুলি দেখানোর জন্য App.vue ফাইল আপডেট করা হচ্ছে
App.vue খুলুন আপনার সম্পাদকে ফাইল করুন এবং নীচে তালিকাভুক্ত তথ্য যোগ করুন। পৃষ্ঠার নীচে,
{{message}} স্বরলিপি ব্যবহার করে, আপনি বার্তা ভেরিয়েবলের বিষয়বস্তু মুদ্রণের জন্য Vue-কে নির্দেশ করছেন, যা আপনি পরবর্তী ব্লকে সংজ্ঞায়িত করবেন।
