java 调用htm中js函数_从 node.js Web应用中调用 WASM 函数 | WebAssembly 入门教程

文中所有的代码都可以在 https://github.com/second-state/wasm-learning/tree/master/nodejs/hello 中找到

148e9b7c382c4d1bc2704ce65904ec1a.png

在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。

  1. WebAssembly 快问快答
  2. 从 Rust 开始入门 WebAssembly | WebAssembly 教程
  3. 5分钟实现一个简单的 WebAssembly 应用|WebAssembly 入门教程
  4. 如何将字符串从JavaScript传入 Wasm/Rust | WebAssembly入门教程

在《为什么说软件服务的未来必然是WebAssembly? 》一文中,介绍了WebAssembly 在服务端的用例,尤其是人工智能、区块链和大数据应用方向。

在这个例子中,将展示如何将 Rust 中编写的 WebAssembly 函数集成到服务器上的 node.js 应用程序中。

我们以微服务的方式提供 WebAssembly 函数。

演示应用程序的结构如下:

  • 主机应用程序是一个用 JavaScript 编写的 node.js web 应用程序,调用 WebAssembly 函数
  • WebAssembly 字节码程序是用 Rust 编写的,由 node.js 的 web 应用程序调用。

设置

与前面的教程一样,我们使用 wasm-pack 工具编译 Rust 源代码并生成相应的 JavaScript 模块。这种模块使得在 JavaScript 和 Rust 函数之间传递复杂的动态数据变得非常容易。想要深入了解的同学,可以阅读《一文读懂 WebAssembly(WASM)中的字符串》。

接下来,按照下面的步骤安装Rust和wasm-pack 工具。

# 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

Rust 写的 WebAssembly 程序

在这个示例中,Rust 程序在“hello” 后面追加输入字符串。

创建一个新的cargo项目。

注意:由于这个程序是从主机应用程序调用的,而不是作为独立的可执行文件运行,因此我们将创建一个 hello 项目。

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

编辑 Cargo.toml 文件添加 [lib] 部分. 它告诉编译器在哪能找到库的源代码,以及如何生成字节码输出。同时,我们也需要在这添加 wasm-bindgen 的依赖项。这是使用 wasm-pack的用途,生成绑定 JavaScript 的 rust webassembly程序

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

下面是Rust 程序 src/lib.rs 的内容。实际上,我们可以在这个库文件中定义多个外部函数,并且所有这些函数都可以通过 WebAssembly 在主机 JavaScript 应用程序中使用。

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

接下来,您可以将 Rust 源代码编译成 WebAssembly 字节码,并为 node.js 主机环境生成相应的 JavaScript 模块。

$ wasm-pack build --target nodejs

结果是以下三个文件. .wasm 文件是 WebAssembly 字节码程序; .js 文件用于 JavaScript 模块;

Pkg / hello lib bg. wasmPkg / hello lib bg. jsPkg / hello lib.js

Node.Js 主机应用程序

接下来,让我们为 node.js web 应用程序创建一个节点文件夹,复制生成的 JavaScript 模块文件。

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

使用生成的 hello_lib.js, 在 JavaScript 中调用 WebAssembly 函数是非常容易的。

下面是节点应用程序 app.js。 它只是从生成的模块中导入 say () 函数。 节点应用程序从传入的 httpget 请求中获取 name 参数,并用“ hello name”进行响应。

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}/`);});

按照以下方式启动 node.js 应用服务器。

$ node app.jsServer running at http://127.0.0.1:8080/

然后,就可以测试了。

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

下一步是什么呢?

现在 Web 服务可以将计算量大、不安全和新颖的硬件访问任务转移到 WebAssembly 中。 我相信,将有更多用例将会出现。 敬请期待!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/499004.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python将数据存入mysql数据库中_python3 两种方法将数据存入mysql数据库

方法一:(数据量小的时候推荐使用这种)第一步:pip install mysqlclient这里我没有报错 也许你可能会报错Read timed out 此时不要慌,这是因为你的网络问题,你使用豆瓣源再次下载:pip install -i https://pypi.douban…

vba cad 读取宏的路径_openpyxl 第三篇 lt;工作表的读取和写入gt;

1、打开表格文件from openpyxl import load_workbook wb load_workbook(r"文件路径工作簿文件全名")2. 查看有哪些sheet页sheet_names wb.sheetnames print(sheet_names)3. 读取指定的sheet页sheet1 wb[指定工作表的名字]4.单元格的使用#写 sheet1.cell(row3,colu…

mysql 一致性读_MySQL半一致性读原理解析-从源码角度解析

1、什么是半一致性读A type of read operation used for UPDATE statements, that is a combination of read committed and consistent read. When an UPDATE statement examines a row that is already locked, InnoDB returns the latest committed version to MySQL so tha…

飞秋发送文件对方无法接收_微信新功能,发送高清图片和视频终于不会被压缩了...

今天,扎比从微博中刷到了腾讯微信团队的最新微博,称微信支持发送高清图片视频不被压缩,而且给好友发送的文件容量上限也变得更大了。发送教程一般情况下,我们使用微信给好友发视频和图片时都会被压缩。而今天扎比分享的是一个不会…

mysql改原始密码mac_MAC版修改MySQL初始密码的方法

问题描述:买了mac电脑,第一次装mysql,不知道初始密码,如何修改初始密码记录下。解决方式:http://dev.mysql.com/doc/refman/5.7/en/resetting-permissions.html亲测方法3,已成功重置密码。(感谢非常&#x…

张仰彪第二排序法_C++之排序

常见的各种排序算法复杂度快速排序1.原理假设我们现在对“6 1 2 7 9 3 4 5 10 8”这个10个数进行排序。首先在这个序列中随便找一个数作为基准数。为了方便,就让第一个数6作为基准数吧。接下来,需要将这个序列中所有比基准数大的数放在6的右边&am…

rpm mysql 忘记密码_mysql密码忘记该怎么办?

环境:linux;mysql5.7mysql密码忘记:[rootizwz9f40l0qo5cpnn8qwmpz ~]# mysql -u root -pEnter password:ERROR 1045 (28000): Access denied for user rootlocalhost (using password: NO)查看当前版本:# rpm -qa |grep mysqlmysql57-communi…

python有多少种变量_python数据类型和变量

1.python文件的后缀名为 *.py 2.两种执行方式: python解释器 py文件路径 python 进入解释器: 实时输入并获取到执行结果 3.在Linux下,文件名和文件内部与windows有所不同 文件名 ./*.py 文件内部: 开头得加上 #/usr/bin/env pytho…

mysql1440秒未活动_phpMyAdmin登陆超时1440秒未活动请重新登录

本文章总结了关于phpMyAdmin登陆超时1440秒未活动请重新登录解决方法,有需要的朋友可参考本文章。问题现象:现象一:phpmyadmin在使用过程中经常出现“登陆超时(1440秒未活动),请重新登录”;现象二:phpmyadm…

java连接mysql执行ddl_dljd_(007_009)_jdbc执行DQL/DML/DDL语句

packageedu.aeon.jdbc;importjava.sql.Connection;importjava.sql.Driver;importjava.sql.DriverManager;importjava.sql.ResultSet;importjava.sql.SQLException;importjava.sql.Statement;/*** [说明]:测试jdbc*authoraeon(qq:1584875179)**/public classTest {/*** jdbc执行…

python3读取jpg_python3读取图像并可视化的方法(PIL/Pillow、opencv/cv2)

原图:使用TensorFlow做图像处理的时候,会对图像进行一些可视化的操作。下面,就来列举一些我知道的图像读取并可视化的方法。 1. Pillow模块 1.1 Pillow模块的前生 Pillow就是python2中的 PIL 模块。PIL模块(Python Imaging Librar…

mysql一对多增删改查_SpringBoot+MySql+ElementUI实现一对多的数据库的设计以及增删改查的实现...

场景业务中经常会用到一对多的数据库的设计与数据的增删改查的实现。比如要实现一个对手机应用配置允许访问的权限的业务。app与权限就是一对多的关系。即一个app可以拥有多个权限。注:实现首先设计数据库。要有一个app表、一个权限表、一个app与权限关联表。首先设…

python设置时间到后结束程序_Python设置程序等待时间

写代码时,特别是涉及到其他外部可执行文件调用时,通常会出现调用程序还未生成结果,后面的程序就自动执行的情况。而通常情况下,前一步调用的生成结果是下一步程序的输入文件,因此出现找不到该文件或打不开该文件的情况…

python excel行数计算不对_数十万数据Excel数据不好处理怎么办?几行Python搞定

电商行业,每月有上百万条订单发货数据需要与仓库的数据进行核对计算,涉及到数据计算,筛选,匹配等步骤,用excel表超级卡,并且经常卡死。这时如果你会Python,十几行代码就可以搞定。这里需要两个P…

c++心形代码_情人节,用代码比个心

今日份的情人节,在家闲出p的你,是不是比往日更加寂寞?这无情的雨,这冰冷的雪,这朴实无华且枯燥的生活,你是否想做点什么?没有朱一旦的劳力士,也没有朱一龙的神仙颜值,那么…

mysql 增大数据库链接_怎么增大MYSQL数据库连接数

怎么增大MYSQL数据库连接数怎么增大MySQL数据库连接数,MYSQL数据库安装完成后,默认连接数是100,流量稍微大一点的论坛或网站这个连接数是不够哟用的,那么怎么才能增加默认MYSQL连接数呢?这里给大家介绍一下具体的方法与…

python中idx是什么意思_Python pandas.DataFrame.idxmax函数方法的使用

DataFrame.idxmax(self, axis0, skipnaTrue) [source] 返回在请求轴上第一次出现最大值的索引。不包括NA/null。 参数:axis : {0或index,1或columns},默认0 行为0或index,列为1或columns skipna : boolean&…

python求近似值_python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配...

已知一个元素,在一个list中找出相似的元素 使用场景: 已知一个其它来源的字符串, 它有可能是不完全与我数据库中相应的字符串匹配的,因此,我需要将其转为适合我数据库中的字符串 使用场景太绕了, 直接举例来说吧 随便举例: 按青岛城市的城区来说, 我数据库中存储的城区是个list…

hive 2.3 mysql_Note23:Hive-2.3.6安装配置

安装包下载安装把安装包上传到 /opt/software 目录解压[kevinhadoop112 software]$ tar -zxvf apache-hive-2.3.6-bin.tar.gz -C /opt/module/改名[kevinhadoop112 module]$ mv apache-hive-2.3.6-bin/ hive-2.3.6配置修改conf 目录下的 hive-env.sh.template 名称为 hive-env.…

上下相机贴合对位计算公式_展商速递 | 汇驰新材热可塑性光学透明膜优化升级全贴合工艺...

2020/11/19-21广州汇驰新材料有限公司(东莞欧伏电子)展位号:1R10展会时间:11月19-21日地点:深圳会展中心(福田区老展馆)欢迎相关企业莅临商谈!关于汇驰新材广州汇驰新材料有限公司(东莞欧伏电子)(展位号:1R10)主要从事…