https://mbebenita.github.io/WasmExplorer/ ကိုသွားပါ။ ရေးလိုတဲ့ C/C++ ကုဒ်ကိုရေးပါ။ ဥပမာ -
int add(int a, int b) {
return a + b;
}
Compile နှိပ်လိုက်ရင် Web Assembly Text (wat) နဲ့ Firefox x86 Assembly ကုဒ်တွေ ထွက်လာပါလိမ့်မယ်။ Export Function အမည်ကို မှတ်ထားပါ (နမူနာမှာ - _Z3addii ပါ)။ ပြီးရင် Download နှိပ်ပြီး WebAssembly Module (wasm) ဖိုင်ကို ရယူပါ။
HTML Document တစ်ခုရေးပါ။ wasm ဖိုင်ကို fetch လုပ်ယူပြီး Export ပေးထားတဲ့ Function ကို အခုလို ယူသုံးနိုင်ပါတယ်။
<b>Result : </b><span id="result"></span>
<script>
async function load_wasm(fn) {
const response = await fetch("test.wasm");
const buffer = await response.arrayBuffer();
const obj = await WebAssembly.instantiate(buffer);
return obj.instance.exports[fn];
}
load_wasm("_Z3addii").then(add => {
document.getElementById("result").innerHTML = add(2, 3);
});
</script>
ရေးထားတဲ့ကုဒ်ကို စာနဲ့မရှင်းတော့ပါဘူး။ ကုဒ်ကို ဖတ်ကြည့်တာက ပိုအဆင်ပြေပါလိမ့်မယ်။ load_wasm()
Function ကို ခေါ်ယူတဲ့အခါ စောစောကမှတ်ထားတဲ့ Export Function အမည်ပေးရတာကိုတော့ သတိပြုပါ။
wasm Module ကို fetch()
နဲ့ ရယူထားတာဖြစ်လို့ Web Server တစ်ခုရှိမှ စမ်းလို့ရမှာပါ။ ကိုယ်စက်ထဲမှာ အသင့်ရှိပြီးသားဆိုရင် ရှိပြီးသား Web Server နဲ့ စမ်းနိုင်ပါတယ်။ fetch()
အတွက်ပေးတဲ့ လိပ်စာမှန်ဖို့သာ လိုပါတယ်။ မရှိသေးရင် http-server
ကို အခုလို NPM နဲ့ Install လုပ်နိုင်ပါတယ် (Windows သမားတွေက sudo
မထည့်နဲ့ပေါ့)။
sudo npm i -g http-server
ပြီးရင်၊ ပရောဂျက်ဖိုဒါထဲမှာ အခုလို Run ပြီး စမ်းသပ်နိုင်ပါပြီ။
http-server .
Step-2 က နမူနာကုဒ်မှာ ခေါ်သုံးထားတဲ့ add()
Function က JavaScript Function မဟုတ်ပါဘူး။ C/C++ နဲ့ရေးထားပြီး Assembly ထွက်ထားတဲ့ Function ပါ။ ဒီနမူနာကုဒ်မှာ ဘာမှသိသာမှာ မဟုတ်ပေမယ့် လက်တွေ့ အမြန်နှုံးချင်းက အတော်ကွာမှာပါ။ ဒီနည်းနဲ့ Near CPU Native အဆင့်ထိ Performance ကောင်းဖို့လိုတဲ့ လုပ်ငန်းတွေကို ကိုယ့်ရဲ့ ပရောဂျက်ထဲမှာ ရေးသားထည့်သွင်း အသုံးပြုနိုင်မှာပဲ ဖြစ်ပါတယ်။