WebAssembly - JavaScript API
Bu bölümde, javascript webassembly API'sinin yardımıyla wasm kodunun nasıl yükleneceğini ve tarayıcıda nasıl çalıştırılacağını anlayacağız.
İşte bazı önemli API'ler, eğitim boyunca wasm kodunu yürütmek için kullanacağız.
- fetch () Tarayıcı API'si
- WebAssembly.compile
- WebAssembly.instance
- WebAssembly.instantiate
- WebAssembly.instantiateStreaming
WebAssembly javascript API'lerini tartışmadan önce, API'yi ve çıktıyı test etmek için aşağıdaki C programını ve wasm explorer kullanılarak c programından oluşturulan .wasm kodunu kullanacağız.
C Programına bir örnek aşağıdaki gibidir -
#include<stdio.h>
int square(int n) {
return n*n;
}
Wasm kodunu almak için WASM explorer'ı kullanacağız -
WASM kodunu indirin ve API'leri test etmek için kullanın.
fetch () Tarayıcı API'si
fetch () API, .wasm ağ kaynağını yüklemek içindir.
<script>
var result = fetch("findsquare.wasm");
console.log(result);
</script>
Aşağıda gösterildiği gibi bir söz verir -
Wasm ağ kaynağını almak için XMLHttpRequest yöntemini de kullanabilirsiniz.
WebAssembly.compile ()
API sorumluluğu, .wasm'dan alınan modül ayrıntılarını derlemektir.
Sözdizimi
Sözdizimi aşağıda verildiği gibidir -
WebAssembly.compile(buffer);
Parametreler
Buffer - .wasm'dan gelen bu kod, derlemeye girdi olarak verilmeden önce, yazılan bir diziye veya dizi arabelleğine dönüştürülmelidir.
Geri dönüş değeri
Derlenmiş modüle sahip olacak bir söz verecektir.
Misal
Çıktıyı webAssembly.compile () kullanarak derlenmiş bir modül olarak veren bir örnek görelim.
<script>
fetch("findsquare.wasm") .then(bytes => bytes.arrayBuffer())
.then(mod => {
var compiledmod = WebAssembly.compile(mod);
compiledmod.then(test=> {
console.log(test);
})
})
</script>
Çıktı
Console.log, tarayıcıda işaretlendiğinde, size derlenmiş modül ayrıntılarını verecektir -
Modül, içe aktarmalar, dışa aktarmalar ve customSections içeren bir yapıcı nesneye sahiptir. Derlenen modül hakkında daha fazla ayrıntı almak için bir sonraki API'yi görelim.
WebAssembly.instance
API, WebAssembly.instance kullanarak, çıktı almak için daha fazla çalıştırılabilecek derlenmiş modülün çalıştırılabilir örneğini verir.
Sözdizimi
Sözdizimi aşağıda verildiği gibidir -
new WebAssembly.Instance(compiled module)
Geri dönüş değeri
Dönüş değeri, çalıştırılabilen dışa aktarma dizisi işlevine sahip bir nesne olacaktır.
Misal
<script>
fetch("findsquare.wasm")
.then(bytes => bytes.arrayBuffer())
.then(mod => WebAssembly.compile(mod)).then(module => {
let instance = new WebAssembly.Instance(module);
console.log(instance);
})
</script>
Çıktı
Çıktı bize aşağıda gösterildiği gibi bir dizi dışa aktarma işlevi verecektir -
Derlenen C kodundan aldığımız kare fonksiyonunu görebilirsiniz.
Kare işlevini yürütmek için aşağıdakileri yapabilirsiniz -
<script>
fetch("findsquare.wasm")
.then(bytes => bytes.arrayBuffer())
.then(mod => WebAssembly.compile(mod))
.then(module => {
let instance = new WebAssembly.Instance(module);
console.log(instance.exports.square(15));
})
</script>
Çıktı -
225
WebAssembly.instantiate
Bu API, modülü birlikte derlemek ve örneklemekle ilgilenir.
Sözdizimi
Sözdizimi aşağıdaki gibidir -
WebAssembly.instantiate(arraybuffer, importObject)
Parametreler
arraybuffer - .wasm'dan gelen kod, örnekleme için girdi olarak verilmeden önce, yazılan diziye veya dizi arabelleğine dönüştürülmelidir.
importObject- İçe aktarılan nesnenin bellek, modül içinde kullanılacak içe aktarılan işlevlerin ayrıntılarına sahip olması gerekir. Paylaşılacak bir şey olmaması durumunda boş bir modül nesnesi olabilir.
Geri dönüş değeri
Modül ve örnek ayrıntılarına sahip olacak bir söz verecektir.
Misal
<script type="text/javascript">
const importObj = {
module: {}
};
fetch("findsquare.wasm")
.then(bytes => bytes.arrayBuffer())
.then(module => WebAssembly.instantiate(module, importObj))
.then(finalcode => {
console.log(finalcode); console.log(finalcode.instance.exports.square(25));
});
</script>
Çıktı
Kodu çalıştırdığınızda, aşağıda belirtilen çıktıyı alacaksınız.
WebAssembly.instantiateStreaming
Bu API, derlemenin yanı sıra WebAssembly modülünü verilen .wasm kodundan başlatır.
Sözdizimi
Sözdizimi aşağıda verildiği gibidir -
WebAssembly.instantiateStreaming(wasmcode, importObject);
Parametreler
wasmcode - Getirme veya wasm kodunu veren ve bir söz veren diğer herhangi bir API'den gelen yanıt.
importObject- İçe aktarılan nesnenin bellek, modül içinde kullanılacak içe aktarılan işlevlerin ayrıntılarına sahip olması gerekir. Paylaşılacak bir şey olmaması durumunda boş bir modül nesnesi olabilir.
Geri dönüş değeri
Modül ve örnek ayrıntılarına sahip olacak bir söz verecektir.
Misal
Aşağıda bir örnek tartışılmıştır -
<script type="text/javascript">
const importObj = {
module: {}
};
WebAssembly.instantiateStreaming(fetch("findsquare.wasm"), importObj).then(obj => {
console.log(obj);
});
</script>
Tarayıcıda test ettiğinizde bir hata göreceksiniz -
Sunucunuzun sonunda çalışmasını sağlamak için, mime türü application / wasm'yi eklemeniz veya WebAssembly.instantiate (arraybuffer, importObject) kullanmanız gerekir.