কীভাবে প্রতিক্রিয়া, রেডাক্স, রেডাক্স-সাগা এবং ওয়েব সকেটগুলির সাথে চ্যাট অ্যাপ্লিকেশন তৈরি করবেন

আপনি কি জাভাস্ক্রিপ্ট শিখতে চান? Jshandbook.com এ আমার বিনামূল্যে ই-বুক পান

এই টিউটোরিয়ালে আমি একটি সাধারণ চ্যাট রুম তৈরি করব। সার্ভারের সাথে সংযুক্ত প্রতিটি ব্যবহারকারী সংযোগের সাথে নিবন্ধভুক্ত হয়, একটি ব্যবহারকারীর নাম দেওয়া হয় এবং তারপরে প্রতিটি সংযুক্ত ক্লায়েন্টকে প্রেরিত বার্তা লিখতে পারে।

এই বিষয় এবং নতুন ব্রাউজারের API গুলি সম্পর্কে অনেক কিছু শিখতে হবে। আমি আমার ব্লগে প্রতিদিন ফ্রন্টএন্ড বিকাশের জন্য একটি নতুন টিউটোরিয়াল প্রকাশ করি। মিস করবেন না!

অ্যাপ্লিকেশনটি এমন একটি বিতরণ করা অ্যাপ্লিকেশন যা কোনও নোড.জেএস সার্ভার এবং রিঅ্যাক্টে সংহত একটি ব্রাউজার ক্লায়েন্ট ব্যবহার করে তৈরি করা হয়েছিল। রেডাক্স এবং পার্শ্ব প্রতিক্রিয়াযুক্ত ডেটা রেডাক্স সাগা দিয়ে পরিচালিত হয়।

ক্লায়েন্ট-সার্ভার যোগাযোগ ওয়েবসকেটের মাধ্যমে পরিচালনা করা হয়।

এই অ্যাপ্লিকেশনটির সম্পূর্ণ উত্স কোডটি এখানে উপলভ্য।

তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন শুরু করুন

অ্যাপ্লিকেশনগুলি তৈরি করতে এবং প্রতিক্রিয়া জানাতে দ্রুত লঞ্চার ব্যবহার করে এবং অ্যাপ্লিকেশনগুলি তৈরি করতে এবং প্রতিক্রিয়া জানাতে প্রকল্পটি শুরু করুন

এটি হয়ে গেলে, অ্যাপ ফোল্ডারে সিডি করুন এবং থ্রেডটি শুরু করুন

চ্যাট অ্যাপটির বিন্যাস

আমাদের অ্যাপ্লিকেশনটিতে এই প্রাথমিক লেআউটটি থাকবে যা চ্যাট অ্যাপগুলিতে খুব সাধারণ:

এটি করার জন্য, আমাদের সহজ এইচটিএমএল এবং সিএসএস ব্যবহার করে একটি চ্যাটের স্থির সংস্করণ তৈরি করতে হবে। এটি সিএসএস গ্রিড সহ ন্যূনতম রেট্রো স্টাইলের চ্যাট লেআউট।

কোডটি খুব সহজ:

ফলাফলটি এমন একটি সাইডবার যা ব্যবহারকারীর তালিকা এবং পর্দার নীচে নতুন বার্তা বাক্স সহ একটি প্রধান অঞ্চল রয়েছে:

স্থিতি পরিচালনা করতে Redux যুক্ত করুন

এখন তথ্য সম্পর্কে কথা বলা যাক।

আমরা রেডাক্সের সাথে স্থিতি পরিচালনা করি।

Redux ইনস্টল করুন এবং সুতা দিয়ে প্রতিক্রিয়া হ্রাস করুন। Redux যোগ করুন। প্রতিক্রিয়া হ্রাস করুন। তারপরে আমরা উপরে যোগ করা বেসিক এইচটিএমএল লেআউটটি অনুবাদ করতে পারি এবং আমরা পরে তৈরির উপাদানগুলি পূরণ করতে এটি প্রস্তুত করতে পারি:

আমরা সাইডবার, বার্তা তালিকা এবং অ্যাডম্যাসেজ উপাদানগুলি ধারণ করে।

তাদের সকলের রয়েছে:

  • একটি উপস্থাপনা উপাদান যা ব্যবহারকারী ইন্টারফেস পরিচালনা করে
  • একটি ধারক উপাদান যা তার আচরণ এবং উপস্থাপনা উপাদানটি প্রদর্শন করে এমন ডেটা পরিচালনা করে

অ্যাপ্লিকেশনটির প্রধান ফাইল সূচি সম্পাদনা করুন। Redux আরম্ভ করার জন্য। তারপরে চ্যাট রিডিউসার আমদানি করুন এবং স্টোর তৈরি করুন।

রিঅ্যাক্টডোম পরিচালনার পরিবর্তে, রেন্ডার করতে, সরবরাহকারীর প্রবেশ করুন, যা স্টোরটিকে স্পষ্টভাবে না দিয়েই অ্যাপের সমস্ত উপাদানগুলিতে উপলব্ধ করে।

তারপর কর্ম।

অ্যাকশনটিপস.জেএস ফাইলটিতে অ্যাকশন ধ্রুবকগুলি প্রবেশ করান যাতে আমরা সহজেই তাদের অন্যান্য ফাইলে রেফারেন্স করতে পারি:

এই ফাইলটিতে চারটি ক্রিয়া রয়েছে যা আমাদের চ্যাটকে চালিত করে। আপনি আড্ডায় একটি নতুন বার্তা যুক্ত করতে এবং একটি নতুন ব্যবহারকারী যুক্ত করতে পারেন। একটি নতুন বার্তা প্রেরণ করা যেতে পারে, এবং সার্ভার ব্যবহারকারী তালিকায় আপডেট পাঠায় যখন কেউ যোগদান করে বা চ্যাট শেষ করে।

যখন কোনও নতুন বার্তা তৈরি হয়, আমি এখন লেখকের নামটিকে "I" তে বাধ্য করি। ব্যবহারকারীর নামগুলি পরে যুক্ত করা হবে।

হ্রাসকারীরা নিশ্চিত করে যে কোনও ক্রিয়াকলাপ শুরু হলে একটি নতুন স্থিতি তৈরি হয়। বিশেষত:

  • যখন কোনও বার্তা আমাদের দ্বারা যুক্ত হয়, আমরা বার্তাগুলির (স্থানীয়) তালিকায় এটি যুক্ত করি
  • যখন আমরা সার্ভার থেকে কোনও বার্তা পাই, আমরা এটি আমাদের বার্তা তালিকায় যুক্ত করি
  • যখন আমরা কোনও ব্যবহারকারীকে (নিজেরাই) যুক্ত করি তখন আমরা তাদের ব্যবহারকারীর তালিকায় যুক্ত করি
  • যদি আমরা সার্ভার থেকে একটি আপডেট হওয়া ব্যবহারকারী তালিকা পাই তবে আমরা আপডেট হব

আসুন এই ডেটা রেন্ডার করে এমন উপাদানগুলিতে ডুব দিন এবং অ্যাডম্যাসেজ দিয়ে শুরু করে ক্রিয়াগুলি ট্রিগার করুন:

এই কার্যকরী উপাদানটি খুব সহজ এবং বিভাগ # নতুন-বার্তায় একটি ইনপুট ক্ষেত্র তৈরি করে। এন্টার কী টিপে গেলে অ্যাডম্যাসেজ ক্রিয়াটি ট্রিগার করা হয় এবং ইনপুট ক্ষেত্রের মানটি পাস হয়ে যায়।

উপরে: সংবাদ উপাদান। এটি বিন্যাস লেখকটিতে একটি একক চ্যাট বার্তাকে রেন্ডার করে: বার্তা:

এটি বার্তাগুলির তালিকার উপরে পুনরাবৃত্তি হওয়া বার্তাগুলি তালিকা উপাদান দ্বারা উপস্থাপিত হয়েছে:

পরিবর্তে, সাইডবার উপাদান প্রতিটি ব্যবহারকারীর মাধ্যমে পুনরাবৃত্তি করে এবং চ্যাটটিতে যোগ দেওয়া প্রতিটি ব্যবহারকারীর জন্য ব্যবহারকারীর নাম আউটপুট দেয়:

আমরা প্রতিক্রিয়া-রিডেক্স থেকে সংযুক্ত () ফাংশনটি ব্যবহার করে উপরের উপস্থাপনা উপাদানগুলির জন্য ধারক উপাদানগুলি তৈরি করি:

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

আমাদের ব্যবহারকারী তালিকায় যোগ করুন

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

পরীক্ষা

আসুন সমস্ত কিছু সঠিকভাবে কাজ করে তা নিশ্চিত করার জন্য স্বয়ংক্রিয় পরীক্ষাগুলি যুক্ত করুন এবং আমরা আরও বৈশিষ্ট্য যুক্ত করার সাথে সাথে সঠিকভাবে কাজ চালিয়ে যাব।

যেহেতু আমি তৈরি করুন প্রতিক্রিয়া অ্যাপ্লিকেশনটি ব্যবহার করছি, জাস্ট ইতিমধ্যে উপলব্ধ এবং আমি কেবল পরীক্ষা যোগ করতে শুরু করতে পারি। সরলতার জন্য, আমি টেস্ট ফাইলটি ফোল্ডারে পেস্ট করেছি যাতে পরীক্ষার জন্য ফাইলটি থাকে।

আমরা আমাদের ক্রিয়া পরীক্ষা করতে শুরু করি:

এবং আমরা আমাদের হ্রাসও পরীক্ষা করতে পারি:

আমরা আমাদের উপস্থাপনা উপাদানগুলির জন্য কিছু প্রাথমিক পরীক্ষাও যুক্ত করি:

একটি সার্ভারের পাশের অংশ যুক্ত করুন

স্থানীয় এবং নেটওয়ার্কের সাথে যোগাযোগ করে না এমন একটি চ্যাট খোলামেলাভাবে সময় ব্যয় করার খুব আকর্ষণীয় জায়গা নয়। আসুন একটি কেন্দ্রীয় সার্ভার তৈরি করুন যেখানে ব্যবহারকারীরা লগ ইন করতে এবং একে অপরের সাথে যোগাযোগ করতে পারে।

আমি ব্রাউজারে নেটিভ ওয়েবস্কট অবজেক্টটি ব্যবহার করি, যা ব্যাপকভাবে সমর্থিত, এবং ডাব্লুএস ওয়েবসকেট লাইব্রেরি নোড.জেএস সার্ভারে।

সার্ভার দিয়ে শুরু করা যাক, যা খুব সহজ:

ক্লায়েন্টের সংযোগ হওয়ার সাথে সাথে ইভেন্টগুলি ADD_USER এবং ADD_MESSAGE শোনানো হবে। যখন ক্লায়েন্ট সংযুক্ত হয়, এটি একটি ADD_USER ইভেন্ট প্রেরণ করে। আমরা এটি সার্ভারের পাশের ব্যবহারকারী তালিকায় যুক্ত করব এবং সমস্ত সংযুক্ত ক্লায়েন্টকে একটি সম্প্রচার পাঠাব।

যখন একটি ADD_MESSAGE ইভেন্ট প্রেরণ করা হয়, আমরা এটি সমস্ত সংযুক্ত ক্লায়েন্টকে প্রেরণ করি।

সংযোগটি বন্ধ হয়ে গেলে ব্যবহারকারীর নাম তালিকা থেকে সরানো হয় এবং নতুন ব্যবহারকারীর তালিকা প্রেরণ করা হয়।

ক্লায়েন্টের পক্ষ থেকে, আমাদের চ্যাটের সাথে সংযোগ স্থাপন করার সময় আমাদের ওয়েবস্কট অবজেক্টটি আরম্ভ করতে হবে এবং একটি ADD_USER ইভেন্ট পাঠাতে হবে। তারপরে আমরা সার্ভার থেকে প্রেরিত ADD_USER এবং ADD_MESSAGE ইভেন্টগুলির জন্য অপেক্ষা করি:

আমরা মুখ্য সূচক.জেএস ফাইল থেকে সেটআপসকেট () আমদানি করব।

ব্যবহারকারীদের কোনও বার্তা প্রবেশ করার সময় আমাদের কোডে পার্শ্ব প্রতিক্রিয়া মোকাবেলার এবং একটি ওয়েবস্কট ইভেন্ট তৈরি করার জন্য আমাদের এখন একটি উপায় প্রবর্তন করতে হবে যাতে এটি সমস্ত সংযুক্ত ক্লায়েন্টকে প্রেরণ করা যায়।

এই প্রক্রিয়াটি সুন্দরভাবে করতে, আমরা রেডাক্স কাহিনী, একটি লাইব্রেরি ব্যবহার করি যা রেডাক্স / প্রতিক্রিয়াতে পার্শ্ব প্রতিক্রিয়া মোকাবেলার জন্য দুর্দান্ত উপায় প্রদান করে।

রেডাক্স সাগা সুতা যোগ করে শুরু করুন

আমরা রেডাক্স সাগা মিডলওয়্যারটি আরম্ভ করি এবং আমাদের সাগাকে লিঙ্ক করতে এটি Redux স্টোরের সাথে সংযুক্ত করি:

রেডাক্স-সাগা একটি রেডাক্স মিডলওয়্যার, তাই স্টোরটি তৈরি করার সময় আমাদের এটিকে আরম্ভ করতে হবে। এটি সম্পন্ন হওয়ার সাথে সাথে আমরা মিডওয়্যারটি চালাচ্ছি এবং ব্যবহারকারীর নাম এবং শিপিংয়ের কাজটি হস্তান্তর করব। আমরা সকেটটি আগে থেকেই শুরু করেছিলাম যাতে আমরা এটি সাগায় রেফারেন্স করতে পারি।

ব্যবহারকারীকে "আমি" বলা হত, তবে প্রতিটি ব্যবহারকারী নিজেকে "আমি" বললে ভাল লাগে না। সুতরাং আমি চান্স.জেএস সহ একটি গতিশীল ব্যবহারকারী নাম জেনারেটর যুক্ত করেছি। প্রতিবার যখন আমরা লগ ইন করি তখন ব্যবহার / নাম আমদানি করা আমাদের জন্য একটি অনন্য নাম উত্পন্ন করে:

এখন আমাদের কাহিনীতে ডুব দিন:

ধারণাগতভাবে এটি খুব সহজ। আমরা ADD_MESSAGE প্রকারের সমস্ত ক্রিয়া করি। যখন এই ক্রিয়াটি করা হয়, আমরা অ্যাকশন সহ ওয়েবস্ককে একটি বার্তা এবং কিছু বিবরণ প্রেরণ করি। আমাদের ব্যবহারকারীর দ্বারা প্রেরিত চ্যাট বার্তাটি সার্ভার থেকে সমস্ত সংযুক্ত ক্লায়েন্টকে প্রেরণ করা যেতে পারে।

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

যত তাড়াতাড়ি আমরা চলে যাব, আমাদের ব্যবহারকারীর নাম মুছে ফেলা হবে এবং চ্যাটের অন্যান্য ব্যক্তিরা চ্যাট চালিয়ে যেতে পারেন।

আপনি কি জাভাস্ক্রিপ্ট শিখতে চান? Jshandbook.com এ আমার বিনামূল্যে ই-বুক পান