ব্রাউজার সোর্স আপডেটের পর একটি ডোনেশন কেন দুটি অ্যালার্ট তৈরি করে
একটি ডোনেশন কেন দুটি অ্যালার্ট তৈরি করে
ব্রাউজার সোর্স আপডেটের পর পেজটি নতুন করে লোড হয়। স্ক্রিপ্ট আবার সার্ভারের সাথে সংযোগ স্থাপন করে, ইভেন্টে সাবস্ক্রাইব করে এবং নোটিফিকেশন দেখানোর জন্য হ্যান্ডলার তৈরি করে। যদি পুরনো হ্যান্ডলার সরানো না হয় অথবা একই সাথে দুটি সংযোগ কাজ করে, তাহলে একটি ডোনেশন ইভেন্ট একাধিকবার প্রসেস হয়।
আপডেট নিজে থেকেই সমস্যার কারণ হতে হবে এমন নয়। এটি প্রায়ই কেবল সংযোগের লজিকে থাকা ত্রুটি প্রকাশ করে। উদাহরণস্বরূপ, ইনিশিয়ালাইজেশন ফাংশন পেজ লোডের সময় একবার, সংযোগ পুনরুদ্ধারের সময় আরেকবার এবং একটি সার্ভিস মেসেজ পাওয়ার পর আরও একবার চালু হতে পারে। প্রতিটি চালু ডোনেশন ইভেন্টে নতুন একটি সাবস্ক্রিপশন যোগ করে।
ফলস্বরূপ, সার্ভার একটি ডোনেশন অবজেক্ট পাঠায়, কিন্তু ব্রাউজার একই ফাংশন দুবার কল করে। মাঝে মাঝে ডুপ্লিকেশন সার্ভারের দিকে ঘটে: অ্যাপ্লিকেশন নতুন সংযোগকে আলাদা প্রাপক হিসেবে ধরে এবং পুরনো ও নতুন সেশন—দুই জায়গাতেই ইভেন্ট পাঠায়। তাই প্রথমে নির্ধারণ করতে হবে পুনরাবৃত্তি কোথায় তৈরি হচ্ছে: সোর্সে, হ্যান্ডলারে নাকি প্রদর্শনের পর্যায়ে।
ডুপ্লিকেট কোথায় তৈরি হচ্ছে তা কীভাবে খুঁজে বের করবেন
একটি সহজ পরীক্ষা দিয়ে শুরু করুন। ব্রাউজার সোর্সের লিংকটি আলাদা উইন্ডো বা ট্যাবে খুলুন, পেজের কেবল একটি ইনস্ট্যান্স রাখুন এবং একটি টেস্ট ইভেন্ট পাঠান। যদি অ্যালার্ট একবার দেখা যায়, তাহলে কারণ সম্ভবত সিনের সেটিংস বা সোর্সের একাধিক ইনস্ট্যান্সের সাথে সম্পর্কিত। যদি আলাদা ট্যাবেই এটি ডুপ্লিকেট হয়, তাহলে পেজের কোড এবং সাবস্ক্রিপশন ব্যবস্থা পরীক্ষা করুন।
ডোনেশন প্রসেসিংকে কয়েকটি ধাপে ভাগ করা কাজে দেয়: ইভেন্ট গ্রহণ, ইভেন্ট যাচাই, অ্যালার্ট কিউতে রাখা এবং রেন্ডারিং। লগ বা কনসোলে সাময়িকভাবে প্রতিটি ধাপে একটি চিহ্ন আউটপুট করুন। যদি গ্রহণের রেকর্ড দুবার দেখা যায়, সমস্যা ভিজ্যুয়াল লেয়ারের আগেই আছে। যদি ইভেন্ট একবার পাওয়া যায় কিন্তু কিউতে দুটি আইটেম থাকে, তাহলে ত্রুটি হ্যান্ডলারে। যদি কিউতে একটি আইটেম থাকে কিন্তু স্ক্রিনে দুটি অ্যালার্ট দেখা যায়, তাহলে ডিসপ্লে ফাংশন এবং HTML কন্টেইনার পরীক্ষা করুন।
ডায়াগনস্টিকের জন্য প্রতিটি ইভেন্টে তার আইডেন্টিফায়ার যোগ করুন, যদি তা ডোনেশন ডেটাতে পাঠানো হয়। গ্রহণের সময় এবং দেখানোর আগে এই আইডেন্টিফায়ারটি রেকর্ড করুন। দুইটি কলে একই আইডেন্টিফায়ার দেখায় যে একটি ইভেন্ট পুনরায় প্রসেস হয়েছে। দুটি ভিন্ন আইডেন্টিফায়ার বোঝায় দুটি ডেলিভারি, যা আলাদাভাবে বিশ্লেষণ করতে হবে।
শুধু ট্যাবের সংখ্যা পরীক্ষা করবেন না। OBS-এ সিন কপি করার পর, নেস্টেড সিন যোগ করার পর বা একই ঠিকানার ব্রাউজার সোর্স আবার যোগ করার পর দুটি ইনস্ট্যান্স দেখা দিতে পারে। কখনও একটি সোর্স আলাদা লেয়ারে থেকে যায় আর দ্বিতীয়টি তার উপরে যোগ হয়। দেখতে দুটি অ্যালার্ট মনে হলেও ইভেন্ট এসেছে একবার।
পুনরায় সংযোগের পর পুনরায় সাবস্ক্রিপশন
সবচেয়ে সাধারণ কারণ হলো—প্রতিটি সংযোগে হ্যান্ডলার যোগ হয়, কিন্তু সংযোগ বিচ্ছিন্ন হলে তা সরানো হয় না। সরলভাবে সমস্যাটি এমন: ফাংশনটি অ্যালার্ট দেখানোর হ্যান্ডলারসহ socket.on চালু করে, তারপর সংযোগ বিচ্ছিন্ন হয়, অ্যাপ্লিকেশন আবার সংযোগ করে এবং socket.on পুনরাবৃত্তি করে। এরপর একটি আগত ডোনেশন দুটি ফাংশন কল করে। পরবর্তী পুনরায় সংযোগে সেগুলোর সংখ্যা আরও বাড়তে পারে।
একই ভুল সাধারণ addEventListener-এর ক্ষেত্রেও ঘটে। যদি ইনিশিয়ালাইজেশন ফাংশন একাধিকবার কল হয়, ব্রাউজার একই ইভেন্টের জন্য একাধিক লিসেনার যোগ করে। "ইনিশিয়ালাইজেশন ইতিমধ্যে সম্পন্ন" ফ্ল্যাগ চেক সবসময় সাহায্য করে না: সম্পূর্ণ পেজ রিলোডে ভেরিয়েবল রিসেট হয়, কিন্তু একই পেজের ভেতরে পুনরায় সংযোগে সমস্যা থেকে যায়।
সাবস্ক্রিপশন সংযোগের লাইফসাইকলের জন্য একবার তৈরি করতে হবে, এবং নতুনের আগে পুরনো সাবস্ক্রিপশন স্পষ্টভাবে সরাতে হবে। ইভেন্ট হ্যান্ডলারদের জন্য removeEventListener ব্যবহার করুন এবং সংযোগের সময় যে ফাংশন রেফারেন্স পাঠানো হয়েছিল সেটিই ব্যবহার করুন। সকেটলাইব্রেরির জন্য সাধারণত off, unsubscribe বা অনুরূপ বিচ্ছিন্ন করার পদ্ধতি প্রয়োজন।
সকেটের জন্য ন্যূনতম স্কিমা এমন হতে পারে: const onDonation = data => showAlert(data); socket.off('donation', onDonation); socket.on('donation', onDonation); function cleanup() { socket.off('donation', onDonation); window.removeEventListener('beforeunload', cleanup); socket.close(); } window.addEventListener('beforeunload', cleanup);
এখানে নির্দিষ্ট লাইব্রেরি নয়, বরং কাজের ক্রম গুরুত্বপূর্ণ। হ্যান্ডলার একটি ভেরিয়েবলে সংরক্ষিত থাকে, তাই একই রেফারেন্স দিয়ে তা সরানো যায়। নতুন সাবস্ক্রিপশনের আগে পুরনোটি সরানো হয়, এবং পেজ বন্ধ হলে বা সোর্স থামলে cleanup চালানো হয়। যদি প্রতিবার চালুতে নতুন সকেট তৈরি হয়, প্রথমে পুরনোটি বন্ধ করে তারপর নতুনটি তৈরি করতে হবে। নাহলে দুটি সংযোগ একই ডেটা পেতে থাকতে পারে।
পুনরায় সংযোগের সময় পুরনো সংযোগ বন্ধ করুন এবং সংশ্লিষ্ট টাইমার পরিষ্কার করুন। নাহলে পুরনো সকেট ডেটা পেতে থাকতে পারে যখন নতুনটি ইতিমধ্যে কাজ করছে। এটি বিশেষভাবে প্রায়ই ঘটে যখন কোড পূর্ববর্তীটি বাতিল না করেই নতুন পুনঃসংযোগ টাইমার চালু করে।
OBS এবং ব্রাউজার সোর্সে কী পরীক্ষা করবেন
যদি আলাদা উইন্ডোতে অ্যালার্ট একবার দেখা যায়, তাহলে সিনে যান। প্রিভিউ বন্ধ করুন, অতিরিক্ত লেয়ার সাময়িকভাবে সরান এবং একটি ব্রাউজার সোর্স রাখুন। তারপর কাঙ্ক্ষিত সিনে আচরণ পরীক্ষা করুন। সব সিন ও ফিল্টার একসাথে পরীক্ষা করার চেয়ে এই পরীক্ষা দ্রুততর।
- একই পেজ URL-সহ দুটি সোর্স খুঁজুন।
- সিনের কপি এবং নেস্টেড সিন পরীক্ষা করুন যেখানে একই ওভারলে থাকতে পারে।
- নিশ্চিত করুন যে অ্যালার্ট একই সাথে ব্রাউজার সোর্স এবং একই পেজের অন্য লেয়ার দ্বারা দেখানো হচ্ছে না।
- সেটিংস পরিবর্তনের পর শুধু সিন সুইচ করবেন না, সোর্স সম্পূর্ণভাবে পুনরায় চালু করুন।
কখনও কখনও URL বা প্যারামিটার আপডেটের পর OBS-এ ব্রাউজার সোর্সের পুরনো ট্যাব থেকে যায়। সোর্স বন্ধ করে আবার যোগ করা অনুমান যাচাই করতে সাহায্য করে, তবে এটি কোড ঠিক করার বিকল্প নয়। যদি প্রতিটি আপডেটের পর সমস্যা ফিরে আসে, তাহলে হ্যান্ডলারের পুনরায় নিবন্ধন বা দ্বৈত সংযোগ খুঁজুন।
এছাড়াও বিচ্ছিন্ন করার বিলম্ব বিবেচনা করুন। আপডেটের সময় পুরনো সেশন তাৎক্ষণিকভাবে বন্ধ না-ও হতে পারে। যদি সার্ভার কয়েক সেকেন্ডের জন্য এটি সক্রিয় মনে করে, সেই ব্যবধানে আসা ইভেন্ট দুটি সেশনে পৌঁছাতে পারে। স্বাভাবিক সার্ভার লজিকের উচিত নিষ্ক্রিয় সংযোগ সরানো এবং পেজ বন্ধের পর সাবস্ক্রিপশন না রাখা।
একটি ইভেন্টের পুনরায় ডেলিভারি প্রতিরোধ
ব্রাউজার সোর্স সঠিকভাবে কাজ করলেও একটি ইভেন্ট মাঝে মাঝে পুনরায় ডেলিভারি হতে পারে। এটি সংযোগ পুনরুদ্ধার, মেসেজ পুনরায় পাঠানো বা ইভেন্ট গ্রহণ ও তার প্রসেসিং নিশ্চিত করার মধ্যে ব্যর্থতার সময় সম্ভব। তাই অ্যালার্ট হ্যান্ডলারকে পুনরাবৃত্তির প্রতি সহনশীল হতে হবে।
সেরা উপায় হলো ডোনেশনের অনন্য আইডেন্টিফায়ার যাচাই করা। ইভেন্ট কিউতে রাখার আগে এর আইডেন্টিফায়ার ইতিমধ্যে প্রসেস করা ইভেন্টের সেটে সংরক্ষণ করুন। যদি এমন আইডেন্টিফায়ার আগে দেখা হয়ে থাকে, পুনরাবৃত্তিটি বাদ দিতে হবে। তালিকাটি সীমিত সময়ের জন্য রাখা উচিত যাতে এটি অসীমভাবে বাড়তে না পারে।
এর জন্য শুধু পরিমাণ, প্রেরকের নাম বা মেসেজের টেক্সট ব্যবহার করবেন না। দুটি ভিন্ন ডোনেশনের একই ডেটা থাকতে পারে। সময়ের ভিত্তিতে যাচাইও নির্ভরযোগ্য নয়: কয়েকটি ভিন্ন ডোনেশন প্রায় একই সময়ে আসতে পারে। যদি আইডেন্টিফায়ার না থাকে, সাময়িকভাবে ফিল্ডের সমন্বয় ও সময় তুলনা করা যায়, তবে এটি বিকল্প উপায় যা দুটি ইভেন্ট ভুলভাবে একত্রিত করার ঝুঁকি বহন করে।
ডুপ্লিকেট প্রতিরোধ অ্যালার্ট দেখানোর আগে থাকতে হবে, অ্যানিমেশনের ভেতরে নয়। নাহলে দ্বিতীয় কল তবুও পেজে এলিমেন্ট যোগ করবে, সাউন্ড বাজাবে বা কিউতে আরেকটি এন্ট্রি দেবে। কিউ আলাদাভাবে নিয়ন্ত্রণ করুন: একটি ইভেন্ট কেবল একবার যোগ হতে হবে, এবং পুনরায় কল দ্বিতীয় স্বাধীন কিউ চালু করবে না।
যদি ইভেন্ট একাধিক ট্যাব বা কম্পোনেন্টের মধ্যে পাঠানো হয়, তবে একাধিক প্রাপক একই সাথে এটি প্রসেস করছে কি না পরীক্ষা করুন। একটি সাধারণ মেসেজ চ্যানেল একাধিক হ্যান্ডলারের সাথে সংযুক্ত থাকতে পারে। সেক্ষেত্রে হয় একজন গ্রাহক রাখতে হবে, নয়তো স্পষ্টভাবে নির্ধারণ করতে হবে কোন কম্পোনেন্ট অ্যালার্ট দেখানোর জন্য দায়ী।
ক্যাশে পরিষ্কার করলে কেন সবসময় কাজ হয় না
ব্রাউজার সোর্স আপডেটের পর প্রায়ই ক্যাশে পরিষ্কার করার পরামর্শ দেওয়া হয়। এটি পরিস্থিতি ঠিক করতে পারে যদি স্ক্রিপ্টের পুরনো সংস্করণ লোড হয়, কিন্তু ক্যাশে ইতিমধ্যে চলমান পেজের অতিরিক্ত হ্যান্ডলার সরায় না এবং সোর্সের দ্বিতীয় কপি বন্ধ করে না। যদি প্রতিটি পুনরায় সংযোগের পর ডুপ্লিকেট ধারাবাহিকভাবে পুনরাবৃত্তি হয়, কারণ প্রায় নিশ্চিতভাবে সংযোগের লজিক বা সিনের কাঠামোতে।
ফাইলের নতুন সংস্করণ সত্যিই লোড হচ্ছে কি না পরীক্ষা করুন। সাময়িকভাবে রিসোর্সের ঠিকানা পরিবর্তন করুন বা প্রদত্ত আপডেট ব্যবস্থা ব্যবহার করুন, তারপর ব্রাউজার সোর্স পুনরায় চালু করুন। এরপর একটি উইন্ডো এবং সোর্সের একটি ইনস্ট্যান্স দিয়ে আবার পরীক্ষা করুন। লিংকে ধারাবাহিকভাবে এলোমেলো প্যারামিটার যোগ করবেন না: এটি অসংখ্য ক্যাশে বৈচিত্র্য তৈরি করতে পারে এবং ডায়াগনস্টিক জটিল করে তুলতে পারে।
যদি একটি মধ্যবর্তী ক্যাশে বা service worker ব্যবহৃত হয়, সেটিও পুরনো স্ক্রিপ্ট সরবরাহ করতে পারে। সেক্ষেত্রে লোড করা ফাইলের সংস্করণ এবং আপনার প্রত্যাশিত সংস্করণ তুলনা করুন। তবে পুরনো ফাইল হলেও পুনরায় সাবস্ক্রিপশনের কারণ দূর করতে হবে, নাহলে পরবর্তী আপডেটের পর সমস্যা আবার দেখা দেবে।
অ্যালার্ট কোডে কী পরীক্ষা করবেন
প্রথমে সব জায়গা খুঁজুন যেখানে socket.on, addEventListener, সংযোগ ফাংশন এবং কিউ চালু করা হয়। কখনও সমস্যা একটি হ্যান্ডলারে নয়, বরং দুটি ভিন্ন মডিউল স্বাধীনভাবে donation ইভেন্ট শুনে প্রত্যেকে নিজের ডিসপ্লে চালু করে।
তারপর কম্পোনেন্টের লাইফসাইকল পরীক্ষা করুন, যদি অ্যালার্ট কোনো ফ্রেমওয়ার্কের মাধ্যমে দেখানো হয়। সাবস্ক্রিপশন একটি ইফেক্ট বা অনুরূপ ব্লকে রাখা হয় এবং একটি ক্লিনআপ ফাংশন রিটার্ন করে। পূর্ববর্তীটি না সরিয়ে প্রতিটি স্টেট আপডেটে নতুন হ্যান্ডলার তৈরি করা যাবে না। সাধারণ JavaScript-এ সক্রিয় সকেট এবং বর্তমান হ্যান্ডলারের রেফারেন্স সংরক্ষণ করা গুরুত্বপূর্ণ, যাতে পেজ থামলে সেগুলো সঠিকভাবে বন্ধ করা যায়।
পুনঃসংযোগ টাইমার পরীক্ষা করুন। নতুন টাইমার পুরনোটির উপরে চালু হওয়া উচিত নয়। নাহলে কয়েকটি বিচ্ছিন্নতার পর সমান্তরাল সংযোগের প্রচেষ্টা তৈরি হয় এবং তাদের সাথে অতিরিক্ত সাবস্ক্রিপশন। প্রতিটি টাইমারের জন্য clearTimeout বা clearInterval দিয়ে পরিষ্কার করা প্রয়োজন, যদি এটি আর প্রয়োজন না হয়।
আলাদাভাবে অ্যালার্ট দেখানো কোডটি দেখুন। এটি একই সাথে কিউতে এলিমেন্ট যোগ করবে এবং সেই অবজেক্টের জন্য সরাসরি ডিসপ্লে ফাংশন কল করবে—এমন হওয়া উচিত নয়। এছাড়াও পরীক্ষা করুন এলিমেন্টের স্টেট পরিবর্তনের সময় অ্যানিমেশন পুনরায় চালু হচ্ছে কি না। যদি লগে একটি গ্রহণ এবং কিউতে একটি এন্ট্রি থাকে কিন্তু স্ক্রিনে দুটি নোটিফিকেশন দেখা যায়, তাহলে ঠিক এখানেই খুঁজতে হবে।
ডায়াগনস্টিক চেকলিস্ট: ক্রমানুসারে কী করবেন
- আলাদা ট্যাবে ব্রাউজার সোর্সের URL খুলুন এবং একটি টেস্ট ডোনেশন পাঠান। OBS-এর বাইরে ডুপ্লিকেট দেখা যায় কি না তা নোট করুন।
- সিনে সোর্সের কেবল একটি ইনস্ট্যান্স রাখুন। সিনের কপি, নেস্টেড সিন এবং সেই লেয়ারগুলো পরীক্ষা করুন যেখানে একই ঠিকানা থাকতে পারে।
- গ্রহণ, কিউতে রাখা এবং দেখানোর ধাপে ইভেন্ট আইডেন্টিফায়ারসহ লগ যোগ করুন। এতে দেখা যাবে কোথায় অবজেক্টের সংখ্যা বাড়ছে।
- socket.on এবং addEventListener-এর সব কল খুঁজুন। পরীক্ষা করুন পুরনো হ্যান্ডলার socket.off এবং removeEventListener দিয়ে একই ফাংশন রেফারেন্স ব্যবহার করে সরানো হচ্ছে কি না।
- পুনঃসংযোগ পরীক্ষা করুন: পুরনো সকেট বন্ধ হচ্ছে কি, পুরনো টাইমার বাতিল হচ্ছে কি এবং পূর্ববর্তীটির উপরে নতুন সাবস্ক্রিপশন তৈরি হচ্ছে কি না।
- কিউর আগে ডোনেশনের অনন্য আইডেন্টিফায়ার যাচাই যোগ করুন, তারপর সোর্স সম্পূর্ণভাবে পুনরায় চালু করুন এবং একটি ইভেন্ট দিয়ে পরীক্ষা পুনরাবৃত্তি করুন।
যদি আলাদা ট্যাব ইভেন্ট একবার পায় কিন্তু OBS দুটি অ্যালার্ট দেখায়, তাহলে সোর্সের দ্বিতীয় ইনস্ট্যান্স বা সিনে ডুপ্লিকেশন খুঁজুন। যদি আলাদা ট্যাবেই ইভেন্ট দুবার আসে, তাহলে সাবস্ক্রিপশন, সংযোগ এবং সার্ভার ডেলিভারি পরীক্ষা করুন। যদি গ্রহণ এবং কিউ একবার রেকর্ড হয় কিন্তু স্ক্রিনে দুটি নোটিফিকেশন দেখা যায়, সমস্যা ভিজ্যুয়াল লেয়ারে।
Last Articles
ডিজাইন এবং ফাংশনে কী পরিবর্তন হয়েছে আমরা সাইটটি আপডেট করেছি যাতে এটির সাথে কাজ করা দ্রুত এবং আরও সুবিধাজনক হয়। প্রধান পরিবর্তনগুলি ইন্টারফেস, ব্যক্..
Good afternoon, I've collected all the news during this time.: 1. The main news is that prices for twitch viewers have been greatly reduced, while Tw..
1. আমাদের সকল দর্শকের জন্য ১৫% ছাড় পেতে "December2025" প্রোমো কোড ব্যবহার করুন2. আমরা ১ জানুয়ারি পর্যন্ত আমাদের কনফিগারেটর এবং সবচেয়ে সাশ্রয়ী মূল্..
টুইচ পরিষেবাগুলি হল স্থিরভাবে কাজ করা, তাই আমরা স্কোয়াড, রিসেলারদের সাথে সহযোগিতা করতে প্রস্তুত, সেবা মালিকদের, বট মালিকদের, এবং অনেক অন্যদের.টেল..
আমরা আমাদের টুইচ ভিউয়ার পরিষেবাগুলি সম্পূর্ণরূপে আপডেট করেছে এবং তারা এখন স্থিরভাবে কাজ. আমরা শুধুমাত্র দর্শকদের জন্য উচ্চ মানের আইপি ঠিকানা ব্যব..
Hello everyone! Today, we are announcing a new feature—"Twitch Viewer Configurator". Now, you can customize any plan for your Twitch channel. Choo..
Greetings, I have compiled a guide for streamers, which will be very relevant at the moment. Now YouTube and twitch have disabled monetization from vi..
We have finally developed the APINow it will be more convenient for our partner sites to work with us.To update the maximum tariffs for YouTube, an up..
অংশীদারিত্ব পরিষেবা এবং রেফারেল প্রোগ্রামের ব্যাপক জনপ্রিয়তার কারণে, আমরা একটি সহযোগিতা টেবিল তৈরি করেছি। সারমর্মটি খুব সহজ: আরও লাইভ দর্শক - আমাদের ..
স্ট্রিমারদের জন্য আমাদের পরিষেবা
Dlive
Bigo
কন্টেন্ট ক্রিয়েটরদের জন্য আমাদের পরিষেবা
