JavaScript এর মাধ্যমে WebAssembly ফাংশন কল করা
WebAssembly (WASM) কোড এবং JavaScript একে অপরের সাথে ইন্টিগ্রেটেডভাবে কাজ করতে পারে, যেখানে JavaScript ব্যবহার করে WebAssembly মডিউলের মধ্যে ফাংশন কল করা হয় এবং তাদের ফলাফল ফিরে পাওয়া যায়। WebAssembly মডিউল থেকে এক্সপোর্ট করা ফাংশনগুলি JavaScript দ্বারা সহজেই অ্যাক্সেস করা যেতে পারে।
এখানে JavaScript এর মাধ্যমে WebAssembly ফাংশন কল করার প্রক্রিয়া বিস্তারিতভাবে দেখানো হয়েছে।
1. WebAssembly মডিউল তৈরি এবং ফাংশন এক্সপোর্ট করা
প্রথমে, একটি WebAssembly মডিউল তৈরি করা হবে, যাতে কিছু ফাংশন এক্সপোর্ট করা হয়েছে, যেমন একটি গাণিতিক অপারেশন যেমন যোগফল বের করা।
1.1 WebAssembly (WASM) কোড উদাহরণ
ধরা যাক, আপনি একটি add নামক ফাংশন তৈরি করেছেন যা দুটি সংখ্যা যোগ করবে।
(module
(export "add" (func $add)) ;; "add" ফাংশন এক্সপোর্ট করা
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add) ;; দুটি সংখ্যা যোগ করা
)এখানে, WebAssembly মডিউলটি একটি add নামক ফাংশন এক্সপোর্ট করছে, যা দুটি ইনপুট প্যারামিটার নেবে এবং তাদের যোগফল প্রদান করবে।
2. JavaScript থেকে WebAssembly ফাংশন কল করা
একবার WebAssembly মডিউল তৈরি হলে, JavaScript ব্যবহার করে WebAssembly কোডের ফাংশন কল করা যাবে। প্রথমে, আপনাকে WebAssembly ফাইলটি লোড করতে হবে, এবং তারপরে সেই মডিউল থেকে ফাংশন এক্সপোর্ট করতে হবে।
2.1 JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebAssembly Function Call Example</title>
</head>
<body>
<h1>WebAssembly with JavaScript</h1>
<button id="addNumbers">Add Numbers</button>
<p id="output"></p>
<script>
document.getElementById('addNumbers').addEventListener('click', function() {
// WebAssembly ফাইল লোড করা
fetch('your_program.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes)) // WebAssembly ইনস্ট্যানশিয়েট করা
.then(wasmModule => {
const { instance } = wasmModule;
// WebAssembly থেকে ফাংশন কল করা
const result = instance.exports.add(5, 3); // দুটি সংখ্যা (5, 3) পাস করা
document.getElementById('output').innerText = 'Result from WASM: ' + result;
})
.catch(console.error);
});
</script>
</body>
</html>2.2 JavaScript এবং WebAssembly এক্সপোর্ট করা ফাংশন কল করা
fetch: প্রথমে,fetchব্যবহার করে WebAssembly ফাইলটি (যেমনyour_program.wasm) লোড করা হচ্ছে।WebAssembly.instantiate: তারপর, এই ফাইলটিকে ইনস্ট্যানশিয়েট করা হয় এবং একটিwasmModuleইনস্ট্যান্স তৈরি হয়।instance.exports.add(5, 3): এখানে,instance.exports.addফাংশনটি WebAssembly মডিউল থেকে এক্সপোর্ট করা হচ্ছে এবং JavaScript এর মাধ্যমে কল করা হচ্ছে, যেখানে দুটি প্যারামিটার (5 এবং 3) পাঠানো হচ্ছে।- Result Output: ফাংশনটির ফলাফল (
result) HTML পেজে প্রদর্শিত হবে।
3. WebAssembly ফাংশন কলের বিভিন্ন উদাহরণ
3.1 Multiple Function Calls
একাধিক ফাংশন কল করতে পারলে, JavaScript কোডের মাধ্যমে একাধিক ফাংশন এক্সপোর্ট করে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, add এবং subtract ফাংশন এক্সপোর্ট করে:
WebAssembly (WASM) কোড:
(module
(export "add" (func $add))
(export "subtract" (func $subtract))
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(func $subtract (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.sub)
)JavaScript (Calling Multiple Functions):
fetch('your_program.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(wasmModule => {
const { instance } = wasmModule;
// প্রথমে যোগফল কল
const addResult = instance.exports.add(10, 5);
console.log('Addition Result: ', addResult); // আউটপুট হবে 15
// তারপর বিয়োগফল কল
const subtractResult = instance.exports.subtract(10, 5);
console.log('Subtraction Result: ', subtractResult); // আউটপুট হবে 5
})
.catch(console.error);এখানে, add এবং subtract দুটি আলাদা ফাংশন WebAssembly মডিউল থেকে এক্সপোর্ট করা হচ্ছে এবং JavaScript থেকে কল করা হচ্ছে।
4. WebAssembly এবং JavaScript এর মধ্যে ডেটা আদান-প্রদান
WebAssembly এবং JavaScript এর মধ্যে ডেটা আদান-প্রদান করার জন্য, মেমরি বা গ্লোবাল ভ্যারিয়েবলস ব্যবহার করা যেতে পারে। WebAssembly মডিউল থেকে মেমরি এক্সপোর্ট করা এবং তা JavaScript এ অ্যাক্সেস করা খুবই সাধারণ।
4.1 WebAssembly Memory Access via JavaScript
WebAssembly (WASM) কোড:
(module
(memory 1) ;; মেমরি এক্সপোর্ট
(export "memory" (memory 0))
(export "writeToMemory" (func $writeToMemory))
(func $writeToMemory (param $index i32) (param $value i32)
local.get $index
local.get $value
i32.store) ;; মেমরিতে ডেটা স্টোর
)JavaScript (Memory Access Example):
fetch('your_program.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(wasmModule => {
const { instance } = wasmModule;
// মেমরি এক্সপোর্ট করা
const memory = new Int32Array(instance.exports.memory.buffer);
// WebAssembly মেমরিতে ডেটা লিখা
instance.exports.writeToMemory(0, 42); // মেমরির প্রথম সেলে 42 লেখা
// মেমরি থেকে ডেটা রিড করা
console.log('Data from WASM Memory:', memory[0]); // আউটপুট হবে 42
})
.catch(console.error);এখানে, writeToMemory ফাংশনটি WebAssembly মেমরির নির্দিষ্ট সেলে ডেটা লেখে এবং JavaScript এর মাধ্যমে সেই ডেটা রিড করা হয়।
Conclusion
- WebAssembly Functions: WebAssembly ফাংশনগুলি JavaScript দ্বারা এক্সপোর্ট এবং কল করা হয়। JavaScript থেকে প্যারামিটার পাঠিয়ে এবং WebAssembly মডিউল থেকে ফাংশন কল করে ফলাফল পাওয়া যায়।
- Memory Access: WebAssembly মেমরি এক্সপোর্ট করে এবং JavaScript কোড সেই মেমরি অ্যাক্সেস করে, যা ডেটা শেয়ারিং এবং প্রসেসিং করতে সাহায্য করে।
- JavaScript-WebAssembly Integration: JavaScript এবং WebAssembly একে অপরের সাথে শক্তিশালীভাবে কাজ করতে পারে, JavaScript কোড থেকে WebAssembly ফাংশন কল করা, এবং ফাংশন দ্বারা প্রসেস করা ডেটা ফেরত পাওয়ার মাধ্যমে উন্নত ওয়েব অ্যাপ্লিকেশন তৈরি করা সম্ভব।
Read more
