使用WebAssembly编译C++到JS

Posted on

实际项目开发中遇到了一些已经使用C++实现的功能,需要在新的Web客户端使用。由于主要是数学和算法的计算,没有平台依赖性。所以需要一个成本最低的移植方式,显然WebAssembly是一个非常好的方式。现在官方的编译工具是emscripten

移植方式

从C++编译到JS。官方提供了两种编译方式embindWebIDL Binder。这两种方式,一开始我也很困惑。不过现在也是有所了解了。向大家介绍一下如何选择。如果你的C++项目中有很多高级数据结构要使用,例如vector,map。那推荐使用embind,如果你的项目主要是简单数据类型,例如数字,字符串,bool,都可以简单的映射到JS,并且是用class封装的,那推荐使用WebIDL Binder。

封装处理

由于C++数据结构比JS复杂的多,很多时候没有直接暴露成JS函数。我们需要进行封装,例如C++中的引用调用,可以改变传入的参数的值。但是编译成JS的话,就不会生效。所以这时候我们需要写wrap函数,封装这些引用调用的C++函数,然后再单独写get函数,得到修改的值。

webpack打包

官方的demo是使用src的方式来引入,并且暴露成Module的全局变量。但是现代化的Web项目都是使用webpack打包,并且自动化引入的。所以我们也不想为了WebAssembly搞特殊。接下来就讲述如何配置来引入。首先,使用emscripten输出 mjs 文件,这样才可以作为模块被导入。具体的编译参数可以参照emcc。 首先,wasm格式并不能被webpack正确识别,我们需要添加loader

{
  test: /\.wasm$/,
  type: 'javascript/auto',
  loader: 'file-loader',
}

然后在项目中,分别 import mjs文件和 wasm文件。

import lib from './wasm.mjs';
import libWasm from './wasm.wasm';

const module = lib({
  locateFile(path) {
    if(path.endsWith('.wasm')) {
      return libWasm;
    }
    return path;
  }
});

然后在调用的时候替换掉默认的locateFile函数,即可完美导入到我们的项目中。

总结

编译C++到JS,不仅需要JS的知识,还需要C++知识,我们需要先把所有需要的C++文件,先全部编译到LLVM bitcode(.o 文件)。这里编译C++可以使用GCC的全部编译参数,推荐使用O3参数来优化代码。最后编译到JS文件的时候,需要按照emscripten的规范来书写胶水文件。

参考:

webpack-emscripten-wasm

前端中的e2e测试

Posted on

对于单页面应用,我们需要由前端来控制每个页面的路由。但是在开发过程中,我们经常要对路由进行调整。每次调整都要手动检查所有页面是否正常显示。这个过程实在是太浪费生命了, 所以我们需要选择一个测试框架来自动完成这个过程,结合CI系统,在每次PR的时候都自动测试一遍,只有通过测试才会进行下一步的review。

Nightwatch

Nightwatch是基于W3C WebDriver API。WebDrive主要是为了满足浏览器的自动化测试需求,把最终的接口统一成HTTP协议。 所以可以统一不同浏览器的自动化测试接口。我们只要安装每个浏览器的WebDriver实现,就可以同一套代码在不同的浏览器中进行测试。老版本的NightWatch需要使用Selenium来管理各个浏览器,但是从1.0版本开始便不需要也不推荐。所以我现在的项目中并没有安装Selenium。

依赖

由于不需要安装Selenium,所以并不需要安装Java依赖。我使用Chrome浏览器来进行自动化测试,所以需要测试环境安装Chrome,注意安装的必须是Chrome,Chromium不可以。 在Travis CI中可以很方便的添加Chrome。还需要安装ChromeDriver依赖来驱动Chrome完成自动化测试。

配置

在Linux测试环境下,基本上都是没有图形化界面的,所以我们在配置Chrome的启动参数中需要加入--headless选项,这样就可以不启动UI。当我们以root权限启动的时候还需要添加--no-sandbox选项,这两个选项基本上是必须的。在我的实际情况下,需要测试不同UA下的展示效果,所以还需要添加--user-agent=Mozilla/5.0 (Macintosh; Test自定义的UA。 下面给出一个配置的例子供大家参考:

// http://nightwatchjs.org/gettingstarted#settings-file

module.exports = {
  output_folder: "tests/e2e/reports",
  custom_assertions_path: ["tests/e2e/custom-assertions"],
  globals_path: "globalsModule.js",
  src_folders: ["tests/e2e/specs/web"]

  webdriver: {
    start_process: true,
    server_path: require("chromedriver").path,
    cli_args: ["--verbose"],
    port: 9515
  },

  test_settings: {
    default: {
      desiredCapabilities: {
        browserName: "chrome",
        javascriptEnabled: true,
        chromeOptions: {
          args: ["--headless", "--no-sandbox"]
        },
        acceptSslCerts: true
      }
    }
  }
};

每个参数的详细含义可以参考官方的说明文档。

总结

在集成Nightwatch的时候,我是卡在了安装浏览器上。在Mac系统上可以正常执行,在CentOS的docker里面却不行。找了半天发现是自己用了Chromium,之前对Chromium能代替Chrome深信不疑。。。 在遇到问题的时候,还是多怀疑,多找找可能性比较好。

localStorage互斥锁的使用

Posted on

JavaScript是单线程语言,所以我们在写代码的时候根本不会遇到互斥锁的问题。但是当用户打开多个Tab页面的时候,这些页面却是共享同一个localStorage的。当我们试图修改localStorage的时候就会遇到竞争问题,如果两个页面同时修改了localStorage,程序的可靠性就无法保证。

多Tab互斥

这个问题查了不少时间,目前有的解决方案:Shared Web Workersfast mutex。由于想尽可能的支持更多浏览器,所以我们选择了后者。

实现localStorage互斥

fast mutex的源码也不是很多,所以读起来也没有很复杂。当执行lock函数的时候,会为一个key存储 _MUTEX_LOCK_X_KEY_MUTEX_LOCK_Y_KEY。以下简称X和Y。 首先存X,然后读Y。如果Y存在说明别人已经拿到互斥锁了,所以重新执行函数。直到获取到互斥锁。如果Y不存在,说明没有人竞争锁。所以往下继续执行存储Y。 但是我们不能保证这段时间没有别的tab来存储X或者Y。所以继续读取X,如果X没有发生变化,说明没有人来竞争锁。我们就可以resolve传入的回调函数了。 如果X发生了变化,说明有人来竞争互斥锁,这时候的函数设置了一个50ms的延迟执行,就是保证检测的足够晚。竞争的tab能够执行完自己的lock函数。50ms之后再去读取Y,如果发现Y没有发生变化,则自己还拥有这个互斥锁,可以顺利执行resolve。否则自己丢失了互斥锁,重新执行lock函数。

总结

fast mutex的实现确实很巧妙,通过添加两个localStorage值和setTimeout完成互斥锁的实现。看到这个项目之前,一直以为想做到localStorage的互斥是不现实的事情。

tagged: mutex