WebAssembly - Examples-alljchome-开发者的教程家园

WebAssembly Tutorial

Selected Reading

WebAssembly - Examples

The chapter discusses the examples with regards to WebAssembly.

Example 1

Following is the example of C Program to get the max 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; 
}

Compile the code in wasm fiddle and download the .wasm and .wat code.

Wat code

The Wat code is as follows −

(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) 
   )
)

Download .wasm code and let us use in the .html file as shown below −

<!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>

Output

The output is as follows −

Example 2

Following is the C++ code to get the fibonacci series of given number.

#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; 
}

I am using wasm explorer to compile the code. Download Wat and Wasm and test the same in the browser.

You can use the below mentioned code −

<!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>

Output

The output is as follows −

Example 3

Following is the Rust code to add elements in a given array.

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 
}

We are going to make use of WebAssembly Studio to compile RUST to wasm.

Build the code and download the wasm file and execute the same in the browser.

<!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());
         }); 
      &lt/script> 
   </body> 
</html>

Output

The output will be as given below −

WebAssembly - Examples

Example 1

Output

Example 2

Output

Example 3

Output

友情链接