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,一经查实,立即删除!

相关文章

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…

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

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

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

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

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

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

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设置程序等待时间

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

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

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

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

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

datagrip替换字_DataGrip使用进阶-导航及搜索(一)

1、关键字导航:当在datagrip的文本编辑区域编写sql时,按住键盘Ctrl键不放,同时鼠标移动到sql关键字上,比如表名、字段名称、或者是函数名上,鼠标会变成手型,关键字会变蓝,并加了下划线&#xff…

js map获取_感知 Node.js 异步I/O 的魅力!

JS 在浏览器的网页中执行,浏览器给 JS 提供的能力是操作文字、图片,或实现一些简单效果。术语叫 DOM 操作。JS 在 Node.js 环境中执行, Node 给 JS 提供了诸如 文件操作, 网络操作 等功能模块。基于这些模块,JS 一下就牛气冲天了。在 Node.j…

k8s pod restartcount 改0_通过实例快速掌握k8s(Kubernetes)核心概念

点击上方蓝色“Go语言中文网”关注我们,设个星标,每天学习 Go 语言本文作者:倚天码农,原创授权发布原文链接:https://segmentfault.com/a/1190000020595811容器技术是微服务技术的核心技术之一,并随着微服务…

div垂直居中的方法_【CSS】8种常见的垂直水平居中方法

1.比较传统的方式 absolutemargin负值偏移特点:父容器要设置宽高,需要知道子容器宽高,偏移量是子容器宽高的一半且是负值,兼容性好/* absolutemargin负值偏移布局 */.layout.absolute {position: relative;}.layout.absolute art…

websocket 导致大量apache进程_Swoole 服务端主动向websocket推送消息

在之前的博文中,我们已经学完了如果使用swoole搭建websocket长连接,也学会了swoole的多进程数据共享操作。但在一个完整的websocket长连接日常操作链中,服务端往往会主动给在线的用户单独推送消息,会群发一些消息。在Swoole-webso…

python因子分析法_python——因子分析

因子分析用Python做的一个典型例子 一、实验目的 采用合适的数据分析方法对下面的题进行解答二、实验要求 采用因子分析方法,根据48位应聘者的15项指标得分,选出6名最优秀的应聘者。 三、代码 importpandas aspd importnumpy asnp importmath asmath imp…

polycom安卓手机客户端_三款免费「游戏串流」APP,在手机/电视上玩PC游戏

以前想把电脑游戏输出到电视机上玩,得用HDMI线输出,如果电脑主机和电视机离太远,HDMI线不够长,还得抱电脑主机到电视机旁边,非常不方便。随着技术的发展,现在已经有「串流」功能,只要电视机和电…

python获取返回值_python如何获取函数的返回值

函数需要先定义后调用,函数体中 return 语句的结果就是返回值。如果一个函数没有 reutrn 语句,其实它有一个隐含的 return 语句,返回值是 None,类型也是 NoneType。return 语句的作用:结束函数调用、返回值 指定返回值…

java模拟器百度_Java模拟实现百度文档在线浏览

这个思路是我参考网上而来,代码是我实现。采用Apache下面的OpenOffice将资源文件转化为pdf文件,然后将pdf文件转化为swf文件,用FlexPaper浏览。ok,A、下载OpenOffice (转换资源文件)B、下载JodConverter(调用OpenOffice)C、下载Sw…

body click js 委托_JS 事件循环

进程 线程CPU 分配资源的最小单位是进程,同一个时间内单个 CPU 只能运行一个进程,单个 CPU 一次只能运行一个任务CPU 调度的最小单位是线程,一个进程里面包含多个线程。可以看看阮老师的这篇文章,进程与线程的一个简单解释浏览器的…