WebAssembly: File I/O এবং System Interaction এর উদাহরণ
WebAssembly (WASM) হল একটি ব্রাউজার-ভিত্তিক প্রযুক্তি, এবং এটি স্বাভাবিকভাবেই ফাইল সিস্টেমের সাথে সরাসরি ইন্টারঅ্যাক্ট করার জন্য ডিজাইন করা হয়নি। তবে, কিছু নির্দিষ্ট পরিস্থিতিতে, আপনি JavaScript এবং WebAssembly এর সহযোগিতায় ফাইল I/O এবং সিস্টেমের সাথে ইন্টারঅ্যাক্ট করতে পারবেন। এখানে কয়েকটি উদাহরণ দেয়া হলো যা File I/O এবং System Interaction এর ক্ষেত্রে সাহায্য করবে।
1. File I/O Using WebAssembly and JavaScript
WebAssembly নিজে সরাসরি ফাইল সিস্টেমের সাথে কাজ করতে পারে না (যেহেতু এটি সাধারণত ব্রাউজারের স্যান্ডবক্সের মধ্যে চলে), তবে JavaScript এর মাধ্যমে এটি ফাইল সিস্টেমের সাথে ইন্টারঅ্যাক্ট করতে পারে। JavaScript WebAssembly মডিউল থেকে ফাইল রিড বা রাইট করার জন্য FileReader, FileWriter, অথবা IndexedDB এর মতো API ব্যবহার করতে পারে।
1.1 Reading File Using JavaScript and WebAssembly
ধরা যাক, আমরা একটি ফাইল লোড করতে চাই এবং সেই ডেটা WebAssembly মডিউলে পাঠাতে চাই।
JavaScript (File Reading with WebAssembly):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File I/O with WebAssembly</title>
</head>
<body>
<h1>WebAssembly File I/O Example</h1>
<input type="file" id="fileInput">
<p id="output"></p>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
// ফাইলের ডেটা মেমরিতে পাঠানো
const fileData = new Uint8Array(event.target.result);
loadWasm(fileData);
};
reader.readAsArrayBuffer(file); // ফাইলটি ArrayBuffer আকারে রিড করা
});
function loadWasm(fileData) {
fetch('your_program.wasm') // WebAssembly ফাইল লোড করা
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(wasmModule => {
const { instance } = wasmModule;
// WebAssembly মেমরি এক্সপোর্ট করা
const memory = new Uint8Array(instance.exports.memory.buffer);
// ফাইল ডেটা মেমরিতে কপি করা
memory.set(fileData, 0);
// WebAssembly মডিউল থেকে ডেটা প্রসেস করা
console.log('Data loaded into WASM:', memory);
instance.exports.processFileData(0, fileData.length);
})
.catch(console.error);
}
</script>
</body>
</html>এখানে, JavaScript ফাইল ডেটাকে FileReader এর মাধ্যমে পড়ে এবং সেটিকে WebAssembly মেমরি তে পাঠিয়ে দেয়। WebAssembly মডিউল সেই ডেটা প্রসেস করতে পারে।
WebAssembly মডিউল (WASM) উদাহরণ:
(module
(memory 1)
(export "memory" (memory 0))
(export "processFileData" (func $processFileData))
(func $processFileData (param $ptr i32) (param $len i32)
;; এখানে, ফাইল ডেটা প্রসেস করার জন্য লজিক বসানো যাবে
local.get $ptr
local.get $len
;; কিছু ডেটা প্রসেস করা
)
)এই উদাহরণে, WebAssembly ফাংশন processFileData ফাইলের ডেটা মেমরিতে পাঠানোর পর সেই ডেটা প্রসেস করে।
2. File Writing Using JavaScript and WebAssembly
WebAssembly নিজে ফাইল লিখতে পারে না, তবে JavaScript এর মাধ্যমে এটি একটি ফাইল লিখতে সাহায্য করতে পারে। WebAssembly মডিউল থেকে প্রসেস করা ডেটা JavaScript ব্যবহার করে ফাইল সিস্টেমে লেখা যায়।
2.1 Writing Data to a File Using JavaScript
JavaScript এর Blob এবং URL.createObjectURL() API ব্যবহার করে ফাইল ডাউনলোড করা সম্ভব।
JavaScript (File Writing with WebAssembly):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Writing with WebAssembly</title>
</head>
<body>
<h1>WebAssembly File Writing Example</h1>
<button id="saveFile">Save File</button>
<script>
document.getElementById('saveFile').addEventListener('click', function() {
fetch('your_program.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(wasmModule => {
const { instance } = wasmModule;
// WebAssembly মেমরি এক্সপোর্ট করা
const memory = new Uint8Array(instance.exports.memory.buffer);
// মেমরিতে কিছু ডেটা লেখা
memory.set([72, 101, 108, 108, 111], 0); // "Hello" ইনপুট করা
// WebAssembly মডিউল থেকে ডেটা প্রাপ্তি
const fileData = memory.slice(0, 5); // প্রথম 5টি বাইট নিয়ে ডেটা তৈরি
// Blob তৈরি এবং ফাইল ডাউনলোডের জন্য তৈরি করা
const blob = new Blob([fileData], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'output.txt'; // ফাইলের নাম
a.click();
URL.revokeObjectURL(url);
})
.catch(console.error);
});
</script>
</body>
</html>এখানে, WebAssembly মেমরিতে Hello লেখার পরে সেই ডেটা JavaScript ব্যবহার করে Blob এ কনভার্ট করা হয় এবং output.txt নামে একটি ফাইল ডাউনলোড করা হয়।
3. System Interaction Using WebAssembly
WebAssembly ব্রাউজারের স্যান্ডবক্সের মধ্যে চলে, এবং এটি সরাসরি ফাইল সিস্টেম বা অপারেটিং সিস্টেমের সাথে ইন্টারঅ্যাক্ট করতে পারে না। তবে, JavaScript এর মাধ্যমে সিস্টেমের সঙ্গে ইন্টারঅ্যাক্ট করা সম্ভব, যেমন ব্রাউজারের স্টোরেজ (IndexedDB), কুকিজ, অথবা Web API (যেমন Geolocation, LocalStorage ইত্যাদি) ব্যবহার করে।
3.1 IndexedDB ব্যবহার করে WebAssembly থেকে ডেটা স্টোর করা
WebAssembly কোড থেকে ডেটা প্রসেস করার পর, JavaScript এর মাধ্যমে তা IndexedDB তে সংরক্ষণ করা যেতে পারে।
JavaScript (Using IndexedDB to Store Data):
// IndexedDB ওপেন করা
let db;
const request = indexedDB.open("WebAssemblyDB", 1);
request.onupgradeneeded = function(event) {
db = event.target.result;
db.createObjectStore("dataStore", { keyPath: "id" });
};
request.onsuccess = function(event) {
db = event.target.result;
// WebAssembly মডিউল থেকে প্রসেস করা ডেটা স্টোর করা
const transaction = db.transaction("dataStore", "readwrite");
const store = transaction.objectStore("dataStore");
store.put({ id: 1, data: "Processed data from WASM" });
transaction.oncomplete = function() {
console.log("Data stored in IndexedDB");
};
};এখানে, IndexedDB এর মাধ্যমে JavaScript WebAssembly থেকে প্রাপ্ত ডেটা সংরক্ষণ করছে।
Summary
- File I/O: WebAssembly সরাসরি ফাইল সিস্টেমের সাথে কাজ করতে পারে না, তবে JavaScript এর মাধ্যমে WebAssembly কোড থেকে ফাইল রিড এবং রাইট করা সম্ভব।
FileReaderএবংFileWriterAPI ব্যবহার করে ব্রাউজার থেকে ফাইল ডেটা এক্সপোর্ট বা ইনপুট করা যায়। - System Interaction: WebAssembly সিস্টেমের সাথে সরাসরি ইন্টারঅ্যাক্ট করতে পারে না, তবে JavaScript এর মাধ্যমে IndexedDB, LocalStorage, বা অন্যান্য Web API এর মাধ্যমে সিস্টেমের সঙ্গে ইন্টারঅ্যাক্ট করা যায়।
এই উদাহরণগুলি দেখায় কীভাবে JavaScript এবং WebAssembly একত্রে কাজ করে ব্রাউজারে ফাইল I/O এবং সিস্টেম ইন্টারঅ্যাকশন সম্ভব করে।
Read more
