कंक्रीट वेब वर्कर के इस्तेमाल का उदाहरण

पिछले मॉड्यूल में, वेब वर्कर के बारे में खास जानकारी दी गई थी. वेब वर्कर यह कर सकते हैं JavaScript को मुख्य थ्रेड से बाहर ले जाकर वेब वर्कर थ्रेड को अलग-अलग करते हैं, जिससे आपकी वेबसाइट का इंटरैक्शन बेहतर बनाने में मदद मिलती है से संपर्क करें मुख्य थ्रेड. हालांकि, सिर्फ़ खास जानकारी ही काफ़ी नहीं है. इस मॉड्यूल में, वेब वर्कर के लिए सीधे तौर पर इस्तेमाल का उदाहरण उपलब्ध कराया जाता है.

ऐसा ही एक उदाहरण कोई ऐसी वेबसाइट हो सकती है जिसके लिए Exif मेटाडेटा को इमेज—यह कोई बहुत पुराना कॉन्सेप्ट नहीं है. असल में, Flickr जैसी वेबसाइटें आपको अपने का इस्तेमाल करने वालों को Exif मेटाडेटा देखने की सुविधा दे सकते हैं, ताकि ऐसी इमेज जिन्हें वे होस्ट करते हों. जैसे, रंग की गहराई, कैमरे का मेक और मॉडल वगैरह डेटा शामिल है.

हालांकि, इमेज को फ़ेच करके, उसे ArrayBuffer में बदलने का लॉजिक, और Exif मेटाडेटा को निकालने की प्रक्रिया पूरी करने पर खर्च हो सकता है मुख्य थ्रेड पर. अच्छी बात यह है कि वेब वर्कर के दायरे में आने वाला यह काम अब भी किया जा सकता है मुख्य थ्रेड के बाहर आएँ. इसके बाद, वेब वर्कर की मैसेजिंग पाइपलाइन का इस्तेमाल करके, Exif मेटाडेटा को वापस मुख्य थ्रेड में एक एचटीएमएल स्ट्रिंग के तौर पर भेजा जाता है और उपयोगकर्ता को दिखाया जाता है.

वेब वर्कर के बिना मुख्य थ्रेड कैसा दिखता है

सबसे पहले, यह देखें कि जब हम बिना किसी शुल्क के यह काम करते हैं, तो मुख्य थ्रेड कैसा दिखता है: वेब वर्कर. ऐसा करने के लिए, नीचे दिया गया तरीका अपनाएं:

  1. Chrome में एक नया टैब खोलें और इसका DevTools खोलें.
  2. परफ़ॉर्मेंस पैनल खोलें.
  3. https://exif-worker.glitch.me/without-worker.html पर जाएं.
  4. परफ़ॉर्मेंस पैनल में, इसके ऊपर दाएं कोने में रिकॉर्ड करें पर क्लिक करें DevTools पैनल में.
  5. इस इमेज के लिंक को या अपनी पसंद का कोई दूसरा लिंक चिपकाएं, जिसमें Exif शामिल है मेटाडेटा—फ़ील्ड में जाकर वह JPEG वर्शन पाएं! बटन क्लिक करें.
  6. इंटरफ़ेस में Exif मेटाडेटा भरने के बाद, रिकॉर्ड करें पर दोबारा क्लिक करके रिकॉर्डिंग बंद करें.
परफ़ॉर्मेंस प्रोफ़ाइलर, इमेज के मेटाडेटा के बारे में जानकारी इकट्ठा करने वाले ऐप्लिकेशन की गतिविधि को पूरी तरह से मुख्य थ्रेड पर दिखा रहा है. इसमें दो लंबे टास्क हैं. पहला, अनुरोध की गई इमेज को फ़ेच करके उसे डिकोड करना और दूसरा, इमेज से मेटाडेटा की जानकारी हासिल करना.
इमेज मेटाडेटा इकट्ठा करने वाले ऐप्लिकेशन में मुख्य थ्रेड से जुड़ी गतिविधि. ध्यान दें कि सभी मुख्य थ्रेड पर गतिविधि होती है.

ध्यान दें—हो सकता है कि मौजूद अन्य थ्रेड के अलावा, जैसे कि रास्टराइज़र थ्रेड वगैरह के लिए—ऐप्लिकेशन में हर चीज़ मुख्य थ्रेड पर होती है. मुख्य पर थ्रेड के लिए, ये काम किए जाते हैं:

  1. शुरुआती जानकारी पाने के लिए, यह फ़ॉर्म इनपुट लेता है और fetch का अनुरोध भेजता है Exif मेटाडेटा वाली इमेज का हिस्सा.
  2. इमेज डेटा को ArrayBuffer में बदल दिया जाता है.
  3. exif-reader स्क्रिप्ट का इस्तेमाल, इमेज.
  4. एचटीएमएल स्ट्रिंग बनाने के लिए, मेटाडेटा को स्क्रैप किया जाता है. इसके बाद, यह मेटाडेटा व्यूअर.

इसके बाद, इसके उलट समान व्यवहार को लागू करने के बाद, यानी कि वेब का इस्तेमाल करके ऐसा किया जा सकता है. कर्मचारी!

वेब वर्कर के साथ मुख्य थ्रेड कैसा दिखता है

अब आपने देख लिया है कि Exif मेटाडेटा को एक्सट्रैक्ट करने के लिए चीज़ें कैसी दिखती हैं JPEG फ़ाइल फ़ॉर्मैट करते हैं, तो देखें कि वेब पर यह कैसा दिखता है कर्मचारी इस मिक्स में है:

  1. Chrome में एक और टैब खोलें और उसका DevTools खोलें.
  2. परफ़ॉर्मेंस पैनल खोलें.
  3. https://exif-worker.glitch.me/with-worker.html पर जाएं.
  4. परफ़ॉर्मेंस पैनल में, सबसे ऊपर दाईं ओर मौजूद 'रिकॉर्ड करें' बटन पर क्लिक करें DevTools पैनल के कोने में मौजूद होनी चाहिए.
  5. फ़ील्ड में इस इमेज का लिंक चिपकाएं और वह JPEG वर्शन पाएं! बटन पर क्लिक करें.
  6. इंटरफ़ेस में Exif मेटाडेटा भरने के बाद, 'रिकॉर्ड करें' बटन पर क्लिक करें रिकॉर्ड करना बंद कर दें.
परफ़ॉर्मेंस प्रोफ़ाइलर, इमेज के मेटाडेटा इकट्ठा करने वाले ऐप्लिकेशन की मुख्य थ्रेड और वेब वर्कर थ्रेड, दोनों पर होने वाली गतिविधि को दिखाता है. मुख्य थ्रेड पर अब भी लंबे टास्क होते हैं, लेकिन वे काफ़ी छोटे होते हैं. इमेज फ़ेच करने/डिकोड करने और मेटाडेटा निकालने की प्रक्रिया पूरी तरह से वेब वर्कर थ्रेड पर होती है. मुख्य थ्रेड के काम में सिर्फ़ वेब वर्कर को डेटा भेजना और उससे डेटा पास करना शामिल होता है.
इमेज मेटाडेटा इकट्ठा करने वाले ऐप्लिकेशन में मुख्य थ्रेड से जुड़ी गतिविधि. ध्यान दें कि एक और वेब वर्कर थ्रेड, जहां ज़्यादातर काम पूरा होता है.

यह वेब वर्कर की ताकत है. मुख्य रूप से सब कुछ करने के बजाय थ्रेड में, मेटाडेटा व्यूअर को HTML के साथ पॉप्युलेट करने के अलावा सबकुछ थ्रेड को अलग कर सकते हैं. इसका मतलब है कि मुख्य थ्रेड को अन्य काम करने के लिए खाली छोड़ दिया गया है.

इस ऐप्लिकेशन का सबसे बड़ा फ़ायदा यह है कि यह ऐप्लिकेशन के इस वर्शन से अलग है वेब वर्कर का इस्तेमाल नहीं करता, क्योंकि exif-reader स्क्रिप्ट मुख्य साइट पर लोड नहीं होती है की बजाय वेब वर्कर थ्रेड पर. इसका मतलब है कि exif-reader स्क्रिप्ट को डाउनलोड, पार्स, और कंपाइल करने पर, मुख्य थ्रेड.

अब उस वेब वर्कर कोड के बारे में ज़्यादा जानें जिसकी मदद से यह सब मुमकिन हो पाता है!

वेब वर्कर कोड पर एक नज़र

यह देखना काफ़ी नहीं है कि वेब वर्कर में कितना फ़र्क़ है. इसकी मदद से समझें—कम से कम इस मामले में—यह कोड कैसा दिखता है, ताकि आपको पता रहे कि में मदद मिलती है.

मुख्य थ्रेड कोड से शुरू करें जो वेब वर्कर के काम करने से पहले होना चाहिए तस्वीर डालें:

// scripts.js

// Register the Exif reader web worker:
const exifWorker = new Worker('/js/with-worker/exif-worker.js');

// We have to send image requests through this proxy due to CORS limitations:
const imageFetchPrefix = 'https://res.cloudinary.com/demo/image/fetch/';

// Necessary elements we need to select:
const imageFetchPanel = document.getElementById('image-fetch');
const imageExifDataPanel = document.getElementById('image-exif-data');
const exifDataPanel = document.getElementById('exif-data');
const imageInput = document.getElementById('image-url');

// What to do when the form is submitted.
document.getElementById('image-form').addEventListener('submit', event => {
  // Don't let the form submit by default:
  event.preventDefault();

  // Send the image URL to the web worker on submit:
  exifWorker.postMessage(`${imageFetchPrefix}${imageInput.value}`);
});

// This listens for the Exif metadata to come back from the web worker:
exifWorker.addEventListener('message', ({ data }) => {
  // This populates the Exif metadata viewer:
  exifDataPanel.innerHTML = data.message;
  imageFetchPanel.style.display = 'none';
  imageExifDataPanel.style.display = 'block';
});

यह कोड मुख्य थ्रेड पर चलता है और फ़ॉर्म सेट अप करता है, ताकि इमेज का यूआरएल भेजा जा सके वेब वर्कर. वहां से, वेब वर्कर कोड importScripts से शुरू होता है स्टेटमेंट जो बाहरी exif-reader स्क्रिप्ट को लोड करता है और फिर मैसेजिंग पाइपलाइन को मुख्य थ्रेड पर ले जाएं:

// exif-worker.js

// Import the exif-reader script:
importScripts('/js/with-worker/exifreader.js');

// Set up a messaging pipeline to send the Exif data to the `window`:
self.addEventListener('message', ({ data }) => {
  getExifDataFromImage(data).then(status => {
    self.postMessage(status);
  });
});

JavaScript का यह हिस्सा मैसेज सेवा पाइपलाइन सेट करता है, ताकि जब उपयोगकर्ता फ़ॉर्म को JPEG फ़ाइल के यूआरएल के साथ सबमिट करता है और यूआरएल वेब वर्कर में आता है. वहां से, कोड का यह अगला बिट JPEG फ़ाइल से Exif मेटाडेटा निकालता है, एक एचटीएमएल स्ट्रिंग बनाता है और उस एचटीएमएल को window को वापस भेजता है उपयोगकर्ता को दिखाया जाता है:

// Takes a blob to transform the image data into an `ArrayBuffer`:
// NOTE: these promises are simplified for readability, and don't include
// rejections on failures. Check out the complete web worker code:
// https://glitch.com/edit/#!/exif-worker?path=js%2Fwith-worker%2Fexif-worker.js%3A10%3A5
const readBlobAsArrayBuffer = blob => new Promise(resolve => {
  const reader = new FileReader();

  reader.onload = () => {
    resolve(reader.result);
  };

  reader.readAsArrayBuffer(blob);
});

// Takes the Exif metadata and converts it to a markup string to
// display in the Exif metadata viewer in the DOM:
const exifToMarkup = exif => Object.entries(exif).map(([exifNode, exifData]) => {
  return `
    <details>
      <summary>
        <h2>${exifNode}</h2>
      </summary>
      <p>${exifNode === 'base64' ? `<img src="data:image/jpeg;base64,${exifData}">` : typeof exifData.value === 'undefined' ? exifData : exifData.description || exifData.value}</p>
    </details>
  `;
}).join('');

// Fetches a partial image and gets its Exif data
const getExifDataFromImage = imageUrl => new Promise(resolve => {
  fetch(imageUrl, {
    headers: {
      // Use a range request to only download the first 64 KiB of an image.
      // This ensures bandwidth isn't wasted by downloading what may be a huge
      // JPEG file when all that's needed is the metadata.
      'Range': `bytes=0-${2 ** 10 * 64}`
    }
  }).then(response => {
    if (response.ok) {
      return response.clone().blob();
    }
  }).then(responseBlob => {
    readBlobAsArrayBuffer(responseBlob).then(arrayBuffer => {
      const tags = ExifReader.load(arrayBuffer, {
        expanded: true
      });

      resolve({
        status: true,
        message: Object.values(tags).map(tag => exifToMarkup(tag)).join('')
      });
    });
  });
});

पढ़ने में थोड़ा-बहुत लगता है, लेकिन वेब वर्कर के लिए यह भी काफ़ी अहम है. हालांकि, नतीजे काफ़ी काम के हैं, और ये सिर्फ़ इस उदाहरण तक सीमित नहीं हैं. वेब वर्कर का इस्तेमाल कई कामों के लिए किया जा सकता है. जैसे, fetch कॉल को आइसोलेट करना और बहुत सारे डेटा को प्रोसेस करने के लिए, वह भी मुख्य थ्रेड के लिए—और यह सिर्फ़ शुरुआत करने वालों के लिए है.

अपने वेब ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाते समय, ऐसी कोई भी चीज़ जो वेब वर्कर के हिसाब से की जा सकती हो. इसके फ़ायदे हो सकते हैं अहम हो. इससे आपकी वेबसाइट को बेहतर उपयोगकर्ता अनुभव मिल सकता है.