ফ্রন্টএন্ড ওয়েব লক API: রিসোর্স সিনক্রোনাইজেশন প্রিমিটিভস

আধুনিক ওয়েব ক্রমবর্ধমানভাবে জটিল হচ্ছে, যেখানে অ্যাপ্লিকেশনগুলি প্রায়শই একাধিক ট্যাব বা উইন্ডোতে কাজ করে। এটি শেয়ার্ড রিসোর্স, যেমন localStorage, IndexedDB-তে সংরক্ষিত ডেটা, বা এমনকি API-এর মাধ্যমে অ্যাক্সেস করা সার্ভার-সাইড রিসোর্সগুলিতে কনকারেন্ট অ্যাক্সেস পরিচালনার চ্যালেঞ্জ তৈরি করে। ওয়েব লক API এই রিসোর্সগুলিতে অ্যাক্সেস সমন্বয় করার জন্য একটি স্ট্যান্ডার্ড পদ্ধতি সরবরাহ করে, যা ডেটা করাপশন রোধ করে এবং ডেটার সামঞ্জস্যতা নিশ্চিত করে।

রিসোর্স সিনক্রোনাইজেশনের প্রয়োজনীয়তা বোঝা

এমন একটি পরিস্থিতি কল্পনা করুন যেখানে একজন ব্যবহারকারী আপনার ওয়েব অ্যাপ্লিকেশনটি দুটি ভিন্ন ট্যাবে খুলে রেখেছেন। উভয় ট্যাবই localStorage-এর একই এন্ট্রি আপডেট করার চেষ্টা করছে। সঠিক সিনক্রোনাইজেশন ছাড়া, একটি ট্যাবের পরিবর্তন অন্যটির পরিবর্তনকে ওভাররাইট করতে পারে, যার ফলে ডেটা নষ্ট বা অসামঞ্জস্যতা দেখা দিতে পারে। এখানেই ওয়েব লক API কাজে আসে।

ঐতিহ্যবাহী ওয়েব ডেভেলপমেন্ট অপটিমিস্টিক লকিং (সংরক্ষণের আগে পরিবর্তন পরীক্ষা করা) বা সার্ভার-সাইড লকিং-এর মতো কৌশলের উপর নির্ভর করে। তবে, এই পদ্ধতিগুলি বাস্তবায়ন করা জটিল হতে পারে এবং সব পরিস্থিতিতে উপযুক্ত নাও হতে পারে। ওয়েব লক API ফ্রন্টএন্ড থেকে কনকারেন্ট অ্যাক্সেস পরিচালনা করার জন্য একটি সহজ, আরও সরাসরি উপায় সরবরাহ করে।

ওয়েব লক API-এর পরিচিতি

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

এক্সক্লুসিভ লক

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

শেয়ার্ড লক

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

ওয়েব লক API ব্যবহার: একটি ব্যবহারিক নির্দেশিকা

ওয়েব লক API navigator.locks প্রপার্টির মাধ্যমে অ্যাক্সেস করা হয়। এই প্রপার্টি request() এবং query() মেথডগুলিতে অ্যাক্সেস সরবরাহ করে।

লকের জন্য অনুরোধ করা

request() মেথডটি একটি লকের অনুরোধ করতে ব্যবহৃত হয়। এটি লকের নাম, একটি ঐচ্ছিক অপশন অবজেক্ট এবং একটি কলব্যাক ফাংশন নেয়। কলব্যাক ফাংশনটি শুধুমাত্র লক সফলভাবে অর্জিত হওয়ার পরেই কার্যকর হয়। অপশন অবজেক্টটি লকের মোড ('exclusive' বা 'shared') এবং একটি ঐচ্ছিক ifAvailable ফ্ল্যাগ নির্দিষ্ট করতে পারে।

এখানে একটি এক্সক্লুসিভ লকের অনুরোধ করার একটি সাধারণ উদাহরণ দেওয়া হলো:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, async lock => {
  try {
    // Perform operations that require exclusive access to the resource
    console.log('Lock acquired!');

    // Simulate an asynchronous operation
    await new Promise(resolve => setTimeout(resolve, 2000));

    console.log('Releasing the lock.');
  } finally {
    // The lock is automatically released when the callback function returns or throws an error
    // But you can also release it manually (although it's generally not necessary).
    // lock.release();
  }
});

            

              
                Copy
              
            
          

এই উদাহরণে, request() মেথডটি 'my-resource' নামের একটি এক্সক্লুসিভ লক অর্জন করার চেষ্টা করে। যদি লকটি উপলব্ধ থাকে, তবে কলব্যাক ফাংশনটি কার্যকর করা হয়। কলব্যাকের ভিতরে, আপনি সেইসব অপারেশন করতে পারেন যার জন্য রিসোর্সে এক্সক্লুসিভ অ্যাক্সেস প্রয়োজন। কলব্যাক ফাংশনটি রিটার্ন করলে বা একটি ত্রুটি থ্রো করলে লকটি স্বয়ংক্রিয়ভাবে ছেড়ে দেওয়া হয়। finally ব্লকটি নিশ্চিত করে যে কোনও ত্রুটি ঘটলেও সমস্ত ক্লিনআপ কোড কার্যকর হবে।

`ifAvailable` অপশন ব্যবহার করে একটি উদাহরণ নিচে দেওয়া হলো:

            navigator.locks.request('my-resource', { mode: 'exclusive', ifAvailable: true }, lock => {
  if (lock) {
    console.log('Lock acquired immediately!');
    // Perform operations with the lock

  } else {
    console.log('Lock not immediately available, doing something else.');
    // Perform alternative operations
  }
}).catch(error => {
  console.error('Error requesting lock:', error);
});

            

              
                Copy
              
            
          

যদি `ifAvailable` `true` তে সেট করা থাকে, তাহলে `request` প্রমিসটি অবিলম্বে লক অবজেক্টের সাথে রিজলভ হয় যদি লকটি উপলব্ধ থাকে। যদি লকটি উপলব্ধ না থাকে, তাহলে প্রমিসটি `undefined` এর সাথে রিজলভ হয়। কলব্যাক ফাংশনটি লক অর্জিত হয়েছে কি না তা নির্বিশেষে কার্যকর হয়, যা আপনাকে উভয় পরিস্থিতি পরিচালনা করার সুযোগ দেয়। এটি মনে রাখা গুরুত্বপূর্ণ যে যখন লকটি অনুপলব্ধ থাকে, তখন কলব্যাক ফাংশনে পাস করা লক অবজেক্টটি `null` বা `undefined` হয়।

একটি শেয়ার্ড লকের অনুরোধ করাও একই রকম:

            navigator.locks.request('my-resource', { mode: 'shared' }, async lock => {
  try {
    // Perform read-only operations on the resource
    console.log('Shared lock acquired!');

    // Simulate an asynchronous read operation
    await new Promise(resolve => setTimeout(resolve, 1000));

    console.log('Releasing the shared lock.');
  } finally {
    // Lock is released automatically
  }
});

            

              
                Copy
              
            
          

লকের স্ট্যাটাস পরীক্ষা করা

query() মেথডটি আপনাকে লকের বর্তমান স্ট্যাটাস পরীক্ষা করতে দেয়। এটি একটি প্রমিস রিটার্ন করে যা বর্তমান অরিজিনের জন্য সক্রিয় লকগুলির তথ্যসহ একটি অবজেক্টের সাথে রিজলভ হয়।

            navigator.locks.query().then(lockInfo => {
  console.log('Lock information:', lockInfo);

  if (lockInfo.held) {
    console.log('Locks are currently held:');
    lockInfo.held.forEach(lock => {
      console.log(`  Name: ${lock.name}, Mode: ${lock.mode}`);
    });
  } else {
    console.log('No locks are currently held.');
  }

  if (lockInfo.pending) {
      console.log('Pending lock requests:');
      lockInfo.pending.forEach(request => {
          console.log(` Name: ${request.name}, Mode: ${request.mode}`);
      });
  } else {
      console.log('No pending lock requests.');
  }
});

            

              
                Copy
              
            
          

lockInfo অবজেক্টটিতে দুটি প্রপার্টি রয়েছে: held এবং pending। held প্রপার্টিটি হলো অবজেক্টের একটি অ্যারে, যার প্রতিটি অরিজিনের দ্বারা বর্তমানে ধরে রাখা একটি লককে প্রতিনিধিত্ব করে। প্রতিটি অবজেক্টে লকের name এবং mode থাকে। `pending` প্রপার্টিটি হলো লক অনুরোধের একটি অ্যারে যা মঞ্জুর হওয়ার অপেক্ষায় সারিবদ্ধ রয়েছে।

ত্রুটি পরিচালনা

request() মেথডটি একটি প্রমিস রিটার্ন করে যা ত্রুটি ঘটলে রিজেক্ট হতে পারে। সাধারণ ত্রুটিগুলির মধ্যে রয়েছে:

• AbortError: লকের অনুরোধটি বাতিল করা হয়েছে।
• SecurityError: নিরাপত্তা সংক্রান্ত বিধিনিষেধের কারণে লকের অনুরোধটি প্রত্যাখ্যান করা হয়েছে।

অপ্রত্যাশিত আচরণ রোধ করতে এই ত্রুটিগুলি পরিচালনা করা গুরুত্বপূর্ণ। আপনি ত্রুটি ধরার জন্য একটি try...catch ব্লক ব্যবহার করতে পারেন:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, lock => {
  // ...
}).catch(error => {
  console.error('Error requesting lock:', error);
  // Handle the error appropriately
});

            

              
                Copy
              
            
          

ব্যবহারের ক্ষেত্র এবং উদাহরণ

ওয়েব লক API শেয়ার্ড রিসোর্সে কনকারেন্ট অ্যাক্সেস পরিচালনা করতে বিভিন্ন পরিস্থিতিতে ব্যবহার করা যেতে পারে। এখানে কিছু উদাহরণ দেওয়া হলো:

কনকারেন্ট ফর্ম সাবমিশন প্রতিরোধ করা

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

            async function submitForm(formData) {
  try {
    await navigator.locks.request('form-submission', { mode: 'exclusive' }, async lock => {
      console.log('Submitting form...');
      // Simulate form submission
      await new Promise(resolve => setTimeout(resolve, 3000));
      console.log('Form submitted successfully!');
    });
  } catch (error) {
    console.error('Error submitting form:', error);
  }
}

// Attach the submitForm function to the form's submit event
const form = document.getElementById('myForm');
form.addEventListener('submit', async (event) => {
  event.preventDefault(); // Prevent default form submission
  const formData = new FormData(form);
  await submitForm(formData);
});

            

              
                Copy
              
            
          

localStorage-এ ডেটা পরিচালনা করা

আগেই উল্লেখ করা হয়েছে, যখন একাধিক ট্যাব বা উইন্ডো localStorage-এ একই ডেটা অ্যাক্সেস করছে তখন ডেটা করাপশন প্রতিরোধ করতে ওয়েব লক API ব্যবহার করা যেতে পারে। এখানে একটি এক্সক্লুসিভ লক ব্যবহার করে localStorage-এ একটি মান আপডেট করার উদাহরণ দেওয়া হলো:

            async function updateLocalStorage(key, newValue) {
  try {
    await navigator.locks.request(key, { mode: 'exclusive' }, async lock => {
      console.log(`Updating localStorage key '${key}' to '${newValue}'...`);
      localStorage.setItem(key, newValue);
      console.log(`localStorage key '${key}' updated successfully!`);
    });
  } catch (error) {
    console.error(`Error updating localStorage key '${key}':`, error);
  }
}

// Example usage:
updateLocalStorage('my-data', 'new value');

            

              
                Copy
              
            
          

সার্ভার-সাইড রিসোর্সে অ্যাক্সেস সমন্বয় করা

ওয়েব লক API সার্ভার-সাইড রিসোর্সে অ্যাক্সেস সমন্বয় করতেও ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, সার্ভারে ডেটা পরিবর্তন করে এমন একটি API অনুরোধ করার আগে আপনি একটি লক অর্জন করতে পারেন। এটি রেস কন্ডিশন প্রতিরোধ করতে এবং ডেটার সামঞ্জস্যতা নিশ্চিত করতে পারে। আপনি একটি শেয়ার্ড ডাটাবেস রেকর্ডে লেখার কার্যক্রমগুলিকে সিরিয়ালাইজ করতে এটি প্রয়োগ করতে পারেন।

            async function updateServerData(data) {
  try {
    await navigator.locks.request('server-update', { mode: 'exclusive' }, async lock => {
      console.log('Updating server data...');
      const response = await fetch('/api/update-data', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      if (!response.ok) {
        throw new Error('Failed to update server data');
      }
      console.log('Server data updated successfully!');
    });
  } catch (error) {
    console.error('Error updating server data:', error);
  }
}

// Example usage:
updateServerData({ value: 'updated value' });

            

              
                Copy
              
            
          

ব্রাউজার সামঞ্জস্যতা

২০২৩ সালের শেষের দিকে, ওয়েব লক API-এর আধুনিক ব্রাউজার যেমন ক্রোম, ফায়ারফক্স, সাফারি এবং এজ-এ ভালো ব্রাউজার সমর্থন রয়েছে। তবে, প্রোডাকশনে API ব্যবহার করার আগে Can I use...-এর মতো রিসোর্স থেকে সর্বশেষ ব্রাউজার সামঞ্জস্যতার তথ্য পরীক্ষা করা সর্বদা একটি ভালো অভ্যাস।

ব্যবহারকারীর ব্রাউজারে ওয়েব লক API সমর্থিত কিনা তা পরীক্ষা করতে আপনি ফিচার ডিটেকশন ব্যবহার করতে পারেন:

            if ('locks' in navigator) {
  // Web Lock API is supported
  console.log('Web Lock API is supported!');
} else {
  // Web Lock API is not supported
  console.warn('Web Lock API is not supported in this browser.');
}

            

              
                Copy
              
            
          

ওয়েব লক API ব্যবহারের সুবিধা

• উন্নত ডেটা সামঞ্জস্যতা: ডেটা করাপশন প্রতিরোধ করে এবং একাধিক ট্যাব বা উইন্ডো জুড়ে ডেটা সামঞ্জস্যপূর্ণ তা নিশ্চিত করে।
• সরলীকৃত কনকারেন্সি ম্যানেজমেন্ট: শেয়ার্ড রিসোর্সে কনকারেন্ট অ্যাক্সেস পরিচালনার জন্য একটি সহজ এবং স্ট্যান্ডার্ড পদ্ধতি সরবরাহ করে।
• জটিলতা হ্রাস: জটিল কাস্টম সিনক্রোনাইজেশন পদ্ধতির প্রয়োজনীয়তা দূর করে।
• উন্নত ব্যবহারকারীর অভিজ্ঞতা: অপ্রত্যাশিত আচরণ প্রতিরোধ করে এবং সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

সীমাবদ্ধতা এবং বিবেচ্য বিষয়

• অরিজিন স্কোপ: লকগুলি অরিজিনের মধ্যে সীমাবদ্ধ, যার অর্থ তারা কেবল একই ডোমেন, প্রোটোকল এবং পোর্ট থেকে আসা ট্যাব বা উইন্ডোগুলির জন্য প্রযোজ্য।
• ডেডলকের সম্ভাবনা: অন্যান্য সিনক্রোনাইজেশন প্রিমিটিভের তুলনায় কম প্রবণ হলেও, সাবধানে পরিচালনা না করলে ডেডলক পরিস্থিতি তৈরি করা এখনও সম্ভব। লক অর্জন এবং মুক্তির যুক্তি সাবধানে গঠন করুন।
• ব্রাউজারে সীমাবদ্ধ: লকগুলি ব্রাউজারের মধ্যে রাখা হয় এবং বিভিন্ন ব্রাউজার বা ডিভাইস জুড়ে সিনক্রোনাইজেশন সরবরাহ করে না। সার্ভার-সাইড রিসোর্সের জন্য, সার্ভারকেও লকিং পদ্ধতি প্রয়োগ করতে হবে।
• অ্যাসিঙ্ক্রোনাস প্রকৃতি: এই API অ্যাসিঙ্ক্রোনাস, যার জন্য প্রমিস এবং কলব্যাকগুলির সতর্ক পরিচালনার প্রয়োজন।

সেরা অনুশীলন

• লক সংক্ষিপ্ত রাখুন: একটি লক ধরে রাখার সময়কাল যতটা সম্ভব কমিয়ে দিন যাতে সংঘাতের সম্ভাবনা কমে যায়।
• নির্দিষ্ট লকের নাম ব্যবহার করুন: আপনার অ্যাপ্লিকেশনের অন্যান্য অংশ বা তৃতীয় পক্ষের লাইব্রেরির সাথে দ্বন্দ্ব এড়াতে বর্ণনামূলক এবং নির্দিষ্ট লকের নাম ব্যবহার করুন।
• ত্রুটি পরিচালনা করুন: অপ্রত্যাশিত আচরণ রোধ করতে ত্রুটিগুলি সঠিকভাবে পরিচালনা করুন।
• বিকল্প বিবেচনা করুন: আপনার নির্দিষ্ট ব্যবহারের ক্ষেত্রে ওয়েব লক API সেরা সমাধান কিনা তা মূল্যায়ন করুন। কিছু ক্ষেত্রে, অপটিমিস্টিক লকিং বা সার্ভার-সাইড লকিং-এর মতো অন্যান্য কৌশলগুলি আরও উপযুক্ত হতে পারে।
• পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন: আপনার কোডটি কনকারেন্ট অ্যাক্সেস সঠিকভাবে পরিচালনা করে কিনা তা নিশ্চিত করতে পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন। কনকারেন্ট ব্যবহার অনুকরণ করতে একাধিক ব্রাউজার ট্যাব এবং উইন্ডো ব্যবহার করুন।

উপসংহার

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

এই নির্দেশিকায় বর্ণিত ধারণা এবং কৌশলগুলি বোঝার মাধ্যমে, আপনি আধুনিক ওয়েবের চাহিদা সামলাতে সক্ষম এমন শক্তিশালী এবং নির্ভরযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করতে ওয়েব লক API কার্যকরভাবে ব্যবহার করতে পারেন।