From node.js Web application call WebAssembly function WebAssembly tutorial

Time:2021-4-8

From node.js   Web application call WebAssembly function WebAssembly tutorial

All the code in this article can be found in https://github.com/second-sta… Found in

In the previous tutorial, we discussed how to access webassembly functions from a JavaScript application in a web browser.

  1. Quick questions and answers of webassembly
  2. Rust’s introduction to Hello world | webassembly
  3. 5 minutes to realize a simple webassembly application
  4. How to transfer strings from JavaScript to wasm / rust | webassembly

However, you may have noticed that there are many good use cases for webassembly on the server side, especially for AI, blockchain and big data applications.

In this example, we’ll show you how to integrate the webassembly function written in rust into the server node.js In the application.

We provide webassembly functions in the form of microservices.

The structure of the demo application is as follows:

  • The host application is written in JavaScript node.js Web application, call webassembly function
  • Webassembly bytecode program is written in rust, written by node.js Web application call.

View source code and tutorials

set up

As in the previous tutorial, we usewasm-packTool compiles the rust source code and generates the corresponding JavaScript module. This module makes it very easy to transfer complex dynamic data between JavaScript and rust functions. Students who want to know more about it can read string in webassembly.

Next, follow the steps below to install the rust and wasm pack tools.

# Install Rust
$ sudo apt-get update
$ sudo apt-get -y upgrade
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source $HOME/.cargo/env

# Install wasm-pack tools
$ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Webassembly program written by rust

In this example, the rust program appends the input string after “hello.”.

Create a newcargoProject.

Note: since this program is called from the host application, rather than running as a stand-alone executable, we will create onehelloProject.

···
$ cargo new --lib hello
$ cd hello

editCargo.tomlFile addition[lib]It tells the compiler where to find the source code of the library and how to generate bytecode output. At the same time, we also need to addwasm-bindgenDependency of. This is the use ofwasm-packTo generate a JavaScript bound trust webassembly program

[lib]
name = "hello_lib"
path = "src/lib.rs"
crate-type =["cdylib"]
[dependencies]
wasm-bindgen = "0.2.50"

Here’s the rust programsrc/lib.rsThe content of. In fact, we can define multiple external functions in this library file, and all these functions can be used in host JavaScript applications through webassembly.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn say(s: String) -> String {
  let r = String::from("hello ");
  return r + &s;
}

Next, you can compile the rust source code into the webassembly bytecode and create the node.js The host environment generates the corresponding JavaScript module.

$ wasm-pack build --target nodejs

The results are the following three documents
.wasmThe file is a webassembly bytecode program;
.jsThe file is used for JavaScript module;

Pkg / hello lib bg. wasm
Pkg / hello lib bg. js
Pkg / hello lib.js

Node.Js Host application

Next, let’s work for you node.js The web application creates a node folder and copies the generated JavaScript module file.

$mkdir node
$cp pkg / hello lib bg. wasm node /
$cp pkg / hello lib bg. js node /
$cp pkg / hello lib.js node /

Use generatedhello_lib.jsIt is very easy to call WebAssembly function in JavaScript.

Here is the node applicationapp.js. It’s just imported from the generated modulesay ()Function. The node application gets thenameParameter, and use “hello”name”Response.

const { say } = require('./hello_lib.js');

const http = require('http');
const url = require('url');
const hostname = '127.0.0.1';
const port = 8080;

const server = http.createServer((req, res) => {
  const queryObject = url.parse(req.url,true).query;
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(say(queryObject['name']));
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Start as follows node.js Application server.

$ node app.js
Server running at http://127.0.0.1:8080/

Then, you can test it.

$ curl http://127.0.0.1:8080/?name=Wasm
hello Wasm

What’s the next step?

Now web services can transfer the hardware access tasks which are computationally heavy, insecure and novel to webassembly. I believe that there will be more use cases. Coming soon!

Recommended Today

Third party calls wechat payment interface

Step one: preparation 1. Wechat payment interface can only be called if the developer qualification has been authenticated on wechat open platform, so the first thing is to authenticate. It’s very simple, but wechat will charge 300 yuan for audit 2. Set payment directory Login wechat payment merchant platform( pay.weixin.qq . com) — > Product […]