JavaScript এর মাধ্যমে WebAssembly এর সাথে ডেটা শেয়ার করা

JavaScript এর মাধ্যমে WebAssembly এর সাথে ডেটা শেয়ার করা

JavaScript এবং WebAssembly এর মধ্যে ডেটা শেয়ার করা একটি গুরুত্বপূর্ণ বিষয়, কারণ এটি JavaScript থেকে WebAssembly মডিউলগুলোর সাথে যোগাযোগ এবং তাদের মধ্যে ডেটা আদান-প্রদান করতে সাহায্য করে। WebAssembly কোডে সাধারণত বাইনারি ডেটা থাকে, যা JavaScript থেকে সহজে অ্যাক্সেস করা যায়। এই প্রক্রিয়াটি WebAssembly Memory এবং Function Exports ব্যবহার করে করা হয়।

এখানে JavaScript এবং WebAssembly এর মধ্যে ডেটা শেয়ার করার কিছু সাধারণ কৌশল এবং উদাহরণ দেওয়া হলো।

1. WebAssembly Memory এবং JavaScript এ শেয়ারিং

WebAssembly মডিউল এবং JavaScript এর মধ্যে ডেটা শেয়ার করতে হলে আপনাকে WebAssembly Memory ব্যবহার করতে হবে। WebAssembly.Memory একটি মেমোরি অবজেক্ট, যা ডেটা স্টোর এবং রিড/রাইট অপারেশন চালানোর জন্য ব্যবহৃত হয়।

1.1 Memory Definition in WebAssembly (WAT)

ধরা যাক, আপনি WebAssembly মডিউল তৈরি করেছেন যা মেমোরি এক্সপোর্ট করবে। এখানে একটি উদাহরণ দেওয়া হলো যেখানে একটি মেমোরি 1 পৃষ্ঠার আকারে ডিফাইন করা হচ্ছে এবং একটি ফাংশন যা মেমোরিতে ডেটা লেখে এবং পড়ে।

(module
  (memory 1)  ;; 1 page (64KB)
  (export "memory" (memory 0))  ;; Memory export
  (func $set_value (param $index i32) (param $value i32)
    (i32.store
      (local.get $index)
      (local.get $value)
    )
  )
  (export "set_value" (func $set_value))  ;; Function export
)

এখানে, memory এক্সপোর্ট করা হয়েছে এবং একটি set_value ফাংশন তৈরি করা হয়েছে যা মেমোরির নির্দিষ্ট স্থানে মান রাখে।

2. JavaScript কোড থেকে WebAssembly Memory অ্যাক্সেস

WebAssembly এর মেমোরি WebAssembly.Memory অবজেক্টের মাধ্যমে JavaScript থেকে অ্যাক্সেস করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে JavaScript থেকে WebAssembly মেমোরিতে ডেটা পাঠানো এবং পড়া হচ্ছে।

2.1 JavaScript কোড:

fetch('memory.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(wasmModule => {
    const { memory, set_value } = wasmModule.instance.exports; // Memory and function

    // মেমোরি ব্যবহারের জন্য Int32Array ভিউ তৈরি করা হচ্ছে
    const view = new Int32Array(memory.buffer);

    // মেমোরির প্রথম স্থানে মান লেখা হচ্ছে
    set_value(0, 42);
    
    // মেমোরির প্রথম স্থান থেকে মান পড়া হচ্ছে
    console.log(view[0]);  // আউটপুট: 42
  })
  .catch(console.error);

ব্যাখ্যা:

• fetch('memory.wasm'): এটি WebAssembly মডিউল memory.wasm ফাইলটি লোড করে।
• WebAssembly.instantiate(bytes): ফাইলটি ইন্সট্যান্সিয়েট করে একটি WebAssembly মডিউল তৈরি করা হয়।
• memory: WebAssembly মডিউল থেকে এক্সপোর্ট করা মেমোরি অবজেক্ট।
• set_value(0, 42): set_value ফাংশনটি ব্যবহার করে মেমোরির প্রথম স্থানে 42 মান লিখা হয়।
• Int32Array(memory.buffer): মেমোরি বাফারকে Int32Array হিসেবে অ্যাক্সেস করা হয়, যাতে 32-বিট পূর্ণসংখ্যাগুলি এক্সেস করা যায়।

3. WebAssembly এর মধ্যে ডেটা পাঠানো এবং ফেরত আনা

WebAssembly থেকে JavaScript এ ডেটা ফেরত আনার জন্য, আপনি এক্সপোর্ট করা ফাংশনগুলো ব্যবহার করতে পারেন, যেগুলি WebAssembly থেকে JavaScript এ মান পাঠায়।

3.1 WebAssembly ফাংশন এর মাধ্যমে JavaScript এ ডেটা ফেরত আনা

ধরা যাক, WebAssembly কোডে একটি ফাংশন আছে যা দুটি মান যোগ করবে এবং ফলাফল JavaScript এ ফিরিয়ে দেবে।

WebAssembly কোড (WAT):

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    (i32.add
      (local.get $a)
      (local.get $b)
    )
  )
  (export "add" (func $add))
)

JavaScript কোড:

fetch('add.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(wasmModule => {
    const { add } = wasmModule.instance.exports;

    // WebAssembly ফাংশন থেকে ডেটা ফেরত আনা
    const result = add(5, 7);
    console.log(result);  // আউটপুট: 12
  })
  .catch(console.error);

এখানে add ফাংশনটি দুটি সংখ্যা গ্রহণ করে তাদের যোগফল ফেরত দেয় এবং JavaScript এ সেই ফলাফল ব্যবহার করা হয়।

4. WebAssembly এবং JavaScript এর মধ্যে ডেটা শেয়ার করার টেকনিক

1. Memory Buffer Access: JavaScript এবং WebAssembly এর মধ্যে মেমোরি বাফার শেয়ার করা সম্ভব। JavaScript এর মাধ্যমে WebAssembly মেমোরি এক্সপোর্ট করা হয় এবং JavaScript এর মাধ্যমে সেই মেমোরিতে ডেটা পাঠানো বা পড়া যায়।
2. Function Export: JavaScript থেকে WebAssembly মডিউলের এক্সপোর্ট করা ফাংশনগুলো কল করা যেতে পারে। এর মাধ্যমে JavaScript থেকে WebAssembly মডিউল পরিচালনা করা হয়।
3. Typed Arrays: JavaScript থেকে WebAssembly মেমোরি অ্যাক্সেস করার জন্য Typed Arrays যেমন Int32Array, Float64Array ইত্যাদি ব্যবহার করা হয়। এগুলি JavaScript এর বাফারকে WebAssembly মেমোরি হিসেবে ব্যাখ্যা করতে সহায়ক।
4. Interfacing with External Resources: WebAssembly মডিউলগুলি বাইরের JavaScript কোডের সাথে ডেটা শেয়ার করতে পারে, যেমন API কল, ডেটাবেস অ্যাক্সেস বা ফাইল অপারেশন।

5. WebAssembly এর সাথে ডেটা শেয়ারের সুবিধা

1. Performance: WebAssembly ডেটা প্রসেসিংয়ে দ্রুত, তাই JavaScript এর সাথে মেমোরি শেয়ার করার মাধ্যমে পারফরম্যান্স উন্নত হয়।
2. Low-Level Memory Access: JavaScript WebAssembly এর মেমোরিতে ডেটা পাঠাতে পারে এবং সেগুলি বাইনারি ফরম্যাটে প্রসেস করতে পারে, যা JavaScript এর তুলনায় দ্রুত।
3. Cross-language Support: WebAssembly বিভিন্ন ভাষার মধ্যে ডেটা শেয়ার করার জন্য এক্সপোর্ট এবং ইমপোর্ট ফাংশন সমর্থন করে, যেমন C, C++, Rust ইত্যাদি।
4. Memory Efficiency: মেমোরি শেয়ারিংয়ের মাধ্যমে কম সিস্টেম রিসোর্স ব্যবহার করা সম্ভব, যা বড় ওয়েব অ্যাপ্লিকেশনের জন্য উপকারী।

সারসংক্ষেপ

WebAssembly এবং JavaScript এর মধ্যে ডেটা শেয়ার করার জন্য আপনি WebAssembly.Memory ব্যবহার করতে পারেন, যেখানে আপনি JavaScript কোডে WebAssembly মেমোরি অ্যাক্সেস করতে পারেন এবং ডেটা শেয়ার করতে পারেন। এছাড়াও, এক্সপোর্ট করা ফাংশনগুলির মাধ্যমে JavaScript এবং WebAssembly এর মধ্যে তথ্য আদান-প্রদান করা যায়। এই প্রক্রিয়া পারফরম্যান্স বৃদ্ধির পাশাপাশি ওয়েব অ্যাপ্লিকেশনগুলিকে আরও কার্যকরী করে তোলে।