Create a function with WebAssembly

Compile and instantiate a WebAssembly module inside a function, from a byte array in the code or from a .wasm file the handler fetches.

Last updated

View as Markdown Agent setup

A function compiles and instantiates a WebAssembly module with the WebAssembly API, inside the handler. Azion Runtime provides that API with the interface MDN defines. For the static methods and constructors it carries, refer to WebAssembly.

The steps below use Azion Console. The module on this page exports one operation, increment, and the handler returns its result in the response body. The module bytes reach the handler in two ways: as a byte array in the function code, or as a .wasm file the handler fetches over HTTP.

Prerequisites

  • An Azion account. To create one, refer to How to create an account on Azion.
  • The Edit Functions permission on the account. It grants permission to create, edit, and remove functions, and it also requires the permission View Functions. Refer to Teams Permissions.

Create the function with an embedded module

The wasmCode array holds the module, so the handler compiles it without a network request. To create the function:

Open the Functions page

Access Azion Console > Products Menu > Libraries > Functions.

Select + Function
Name the function

Enter a name for the function. For example: wasm-increment.

Paste the code in the Code tab

In the Code tab, paste the following code:

JavaScript
01export default {
02 fetch: async (request, env, ctx) => {
03 const wasmCode = new Uint8Array([
04 0, 97, 115, 109, 1, 0, 0, 0, 1, 6, 1, 96, 1, 127, 1, 127, 3, 2, 1, 0, 7, 13, 1, 9, 105, 110, 99, 114, 101,
05 109, 101, 110, 116, 0, 0, 10, 9, 1, 7, 0, 32, 0, 65, 1, 106, 11,
06 ]);
07
08 const wasmModule = new WebAssembly.Module(wasmCode);
09 const wasmInstance = new WebAssembly.Instance(wasmModule);
10 const increment = wasmInstance.exports.increment;
11 let value = 0;
12
13 if (request.headers.has("value")) {
14 let number = request.headers.get("value");
15 if (!isNaN(number)) {
16 value = parseInt(number);
17 }
18 }
19
20 let incremented = increment(value);
21 return new Response("incrementing " + value + " we have " + incremented);
22 },
23};
Select Save

The function is saved and available to instantiate on an application.

The wasmCode array is the binary form of the following WAT module, which adds 1 to its i32 parameter and returns the result:

Text
01(module
02 (type (;0;) (func (param i32) (result i32)))
03 (func (;0;) (type 0) (param i32) (result i32)
04 local.get 0
05 i32.const 1
06 i32.add)
07 (export "increment" (func 0)))

WAT is the textual representation of the WebAssembly binary format. It exists so that a person can read and edit a module.

A byte array is part of the function source code, so the module counts toward the code size limit: 6 MB in Azion Console, and 20 MB through the Azion API. Refer to Functions limits.

Load the module from a URL

A handler reads the module bytes over HTTP instead of carrying them. Replace the byte array with a fetch call, and pass the response body to WebAssembly.instantiate():

JavaScript
01export default {
02 fetch: async (request, env, ctx) => {
03 const wasmResponse = await fetch("https://example.com/increment.wasm");
04 const wasmCode = await wasmResponse.arrayBuffer();
05
06 const { instance } = await WebAssembly.instantiate(wasmCode);
07 const increment = instance.exports.increment;
08 let value = 0;
09
10 if (request.headers.has("value")) {
11 let number = request.headers.get("value");
12 if (!isNaN(number)) {
13 value = parseInt(number);
14 }
15 }
16
17 let incremented = increment(value);
18 return new Response("incrementing " + value + " we have " + incremented);
19 },
20};

The handler compiles whatever the URL returns, so a new build of the module reaches the function without a code change. Each fetch call counts as a sub-request, and an invocation makes at most 50 of them. Refer to Functions limits.

Verify the response

A function runs only after a function instance binds it to an application, and a Rules Engine rule selects that instance. To build that chain, refer to Functions quickstart.

To read the response, request the URI set in the rule:

curl https://<your-azion-domain>/<your-uri>

The module increments the default value, 0:

incrementing 0 we have 1

The handler reads the value request header when the request carries one. To increment a different integer, send it in that header:

curl -H "value: 41" https://<your-azion-domain>/<your-uri>
incrementing 41 we have 42

The response body carries the result the WebAssembly module computed.

Next steps

Functions quickstartInstantiate the function on an application, and add the Rules Engine rule that runs it.WebAssembly APIEvery static method and constructor Azion Runtime carries, with its syntax and parameters.Migrate handler patterns in FunctionsThe ES Modules and Service Worker handler shapes, and how to move code between them.Functions limitsThe code size, sub-request, and CPU time ceilings a function runs inside.