WebAssembly - przykłady

W tym rozdziale omówiono przykłady dotyczące WebAssembly.

Przykład 1

Poniżej znajduje się przykład programu w języku C, aby uzyskać maksymalny element -

void displaylog(int n);
/* function returning the max between two numbers */ 
int max(int num1, int num2) {
   /* local variable declaration */ int result; 
   if (num1 > num2) 
      result = num1; 
   else result = num2;
      displaylog(result);
   return result; 
}

Skompiluj kod w programie wasm fiddle i pobierz kod .wasm i .wat.

Wat code

Kod Wat jest następujący -

(module 
   (type $FUNCSIG$vi (func (param i32))) 
   (import "env" "displaylog" (func $displaylog (param i32))) 
   (table 0 anyfunc) 
   (memory $0 1) 
   (export "memory" (memory $0)) 
   (export "max" (func $max)) 
   (func $max (; 1 ;) (param $0 i32) (param $1 i32) (result i32) 
      (call $displaylog       
         (tee_local $0 
            (select 
               (get_local $0) 
               (get_local $1) 
               (i32.gt_s (get_local $0) (get_local $1)) 
            )
         )
      )
      (get_local $0) 
   )
)

Pobierz kod .wasm i pozwól nam użyć go w pliku .html, jak pokazano poniżej -

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
   </head>
   <body>
      <script>
         const importObj = {
            env: { 
               displaylog: n => alert("The max of (400, 130) is " +n) 
            } 
         };
         fetch("testmax.wasm") .then(bytes => bytes.arrayBuffer()) 
            .then(module => WebAssembly.instantiate(module, importObj)) 
            .then(finalcode => { 
            console.log(finalcode); 
            console.log(finalcode.instance.exports.max(400,130)); 
         }); 
      </script> 
   </body>
</html>

Wynik

Dane wyjściowe są następujące -

Przykład 2

Poniżej znajduje się kod C ++ do pobrania serii Fibonacciego o podanej liczbie.

#include <iostream>>
void displaylog(int n); 
int fibonacciSeries(int number) {
   int n1=0,n2=1,n3,i; 
   for(i=2;i<number;++i) { 
      n3=n1+n2; displaylog(n); n1=n2; n2=n3;
   }
   return 0; 
}

Używam programu WASM Explorer do kompilowania kodu. Pobierz Wat and Wasm i przetestuj to samo w przeglądarce.

Możesz użyć poniższego kodu -

<!DOCTYPE html> 
<html>
   <head> 
      <meta charset="UTF-8">
   </head>
   <body>
      <script> 
         const importObj = { 
            env: { _Z10displaylogi: n => console.log(n) } 
         };
         fetch("fib.wasm") 
            .then(bytes => bytes.arrayBuffer()) 
            .then(module => WebAssembly.instantiate(module, importObj)) 
            .then(finalcode => { 
            console.log(finalcode); 
            console.log(finalcode.instance.exports._Z15fibonacciSeriesi(10)); 
         });
      </script> 
   </body>
</html>

Wynik

Dane wyjściowe są następujące -

Przykład 3

Poniżej znajduje się kod Rusta służący do dodawania elementów w danej tablicy.

fn add_array(x: i32) -> i32 { 
   let mut sum = 0; 
   let mut numbers = [10,20,30]; for i in 0..3 { 
      sum += numbers[i]; 
   } 
   sum 
}

Zamierzamy wykorzystać WebAssembly Studio do skompilowania RUST do wasm.

Zbuduj kod i pobierz plik wasm i wykonaj to samo w przeglądarce.

<!DOCTYPE html> 
<html>
   <head> 
      <meta charset="UTF-8">
   </head>
      <body>
      <script> 
         const importObj = { 
            env: {
            } 
         };
         fetch("add_array.wasm") .then(bytes => bytes.arrayBuffer())
            .then(module => WebAssembly.instantiate(module, importObj)) 
            .then(finalcode => { 
            console.log(finalcode); 
            console.log(finalcode.instance.exports.add_array());
         }); 
      </script> 
   </body> 
</html>

Wynik

Wynik będzie taki, jak podano poniżej -