Hello Web Assembly

wasm.md

C နဲ့ရေးတဲ့ကုဒ်ကို Browser ထဲမှာ Run ကြမယ်

Step-1

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) ဖိုင်ကို ရယူပါ။

Step-2

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 အမည်ပေးရတာကိုတော့ သတိပြုပါ။

Step-3

wasm Module ကို fetch() နဲ့ ရယူထားတာဖြစ်လို့ Web Server တစ်ခုရှိမှ စမ်းလို့ရမှာပါ။ ကိုယ်စက်ထဲမှာ အသင့်ရှိပြီးသားဆိုရင် ရှိပြီးသား Web Server နဲ့ စမ်းနိုင်ပါတယ်။ fetch() အတွက်ပေးတဲ့ လိပ်စာမှန်ဖို့သာ လိုပါတယ်။ မရှိသေးရင် http-server ကို အခုလို NPM နဲ့ Install လုပ်နိုင်ပါတယ် (Windows သမားတွေက sudo မထည့်နဲ့ပေါ့)။

sudo npm i -g http-server

ပြီးရင်၊ ပရောဂျက်ဖိုဒါထဲမှာ အခုလို Run ပြီး စမ်းသပ်နိုင်ပါပြီ။

http-server .

Conclusion

Step-2 က နမူနာကုဒ်မှာ ခေါ်သုံးထားတဲ့ add() Function က JavaScript Function မဟုတ်ပါဘူး။ C/C++ နဲ့ရေးထားပြီး Assembly ထွက်ထားတဲ့ Function ပါ။ ဒီနမူနာကုဒ်မှာ ဘာမှသိသာမှာ မဟုတ်ပေမယ့် လက်တွေ့ အမြန်နှုံးချင်းက အတော်ကွာမှာပါ။ ဒီနည်းနဲ့ Near CPU Native အဆင့်ထိ Performance ကောင်းဖို့လိုတဲ့ လုပ်ငန်းတွေကို ကိုယ့်ရဲ့ ပရောဂျက်ထဲမှာ ရေးသားထည့်သွင်း အသုံးပြုနိုင်မှာပဲ ဖြစ်ပါတယ်။