技術(shù)干貨 | Electron 插件開發(fā)實(shí)踐

作者：李永強(qiáng) 2022-05-12 11:41:16

Electron 是以 Nodejs 和 Chromiu m 為內(nèi)核的跨平臺開發(fā)框架。本文結(jié)合網(wǎng)易云信的實(shí)踐經(jīng)驗(yàn)，對 js 和 C++ 混合編程在 Electron 桌面程序中的應(yīng)用進(jìn)行介紹。

01 前言

早期跨平臺桌面應(yīng)用開發(fā)大多采用 Qt 和 C++，受語言學(xué)習(xí)成本開發(fā)效率影響，越來越多的人將目光轉(zhuǎn)向了 Electron。Electron 是以 Nodejs 和 Chromium 為內(nèi)核的跨平臺開發(fā)框架。

Electron 基于 Web 技術(shù)開發(fā)桌面應(yīng)用，Web 技術(shù)在軟件開發(fā)領(lǐng)域應(yīng)用非常廣泛，生態(tài)較為成熟，學(xué)習(xí)成本較低、開發(fā)效率高。但是 Web 在處理多線程、并發(fā)場景時(shí)顯得捉襟見肘，Electron 底層有 Nodejs 支持，Nodejs 的插件模塊具有調(diào)用 C++ 的能力，C++ 非常適合處理高并發(fā)、音視頻等復(fù)雜業(yè)務(wù)，彌補(bǔ)了 Web 的性能問題。本文就 js 和 C++ 混合編程在 Electron 桌面程序中的應(yīng)用進(jìn)行介紹。

Nodejs 中使用 C++，有以下幾種方式：

將 C++ 程序作為獨(dú)立子進(jìn)程使用。
通過 node-ffi 方式調(diào)用。
Nodejs 擴(kuò)展，將 C++ 代碼編譯為 Nodejs 模塊，本文主要針對這種方式進(jìn)行介紹。

02 C++ 擴(kuò)展

C++ 擴(kuò)展簡介

Nodejs 本身采用 C++ 編寫，所以我們可以使用 C++ 編寫的自己的 Nodejs 模塊，可以像 Nodejs 原生模塊一樣使用。C++ 擴(kuò)展格式為 .node，其本質(zhì)為動態(tài)鏈接庫，相當(dāng)于 Windows 下 .dll。C++ 擴(kuò)展作為動態(tài)鏈接庫，通過 dlopen 在 Nodejs 中加載。

C++ 擴(kuò)展架構(gòu)圖：

C++ 擴(kuò)展實(shí)現(xiàn)的幾種方式

實(shí)現(xiàn) C++ 擴(kuò)展有3種方式：原生模式、nan、Node-API。

原生模式直接使用 Nodejs API 及 Chrome V8 API 進(jìn)行開發(fā)，這種方式早已被遺棄。特點(diǎn)： Nodejs API 和 Chrome V8 API 接口一旦變化，依賴這些 API 的 C++ 擴(kuò)展便無法使用，特定版本的 C++ 擴(kuò)展只能在對應(yīng)版本 Nodejs 環(huán)境中使用。
nan（N ative Abstractions for Nodejs）nan 是 N odejs 抽象接口集，nan 根據(jù)當(dāng)前 Nodejs 版本，使用宏判斷執(zhí)行對應(yīng)版本的 AP I。特點(diǎn)： C++ 擴(kuò)展在不同版本 Nodejs 中運(yùn)行，需重新編譯，Nodejs 升級到較高版本后出現(xiàn)接口不兼容問題。
Node-APINode-API 使用 Nodejs 二進(jìn)制接口，相比 nan 方式這些二進(jìn)制接口更為穩(wěn)定。特點(diǎn)：不同版本 Nodejs 只要 abi 版本號一致，C++ 擴(kuò)展可以直接使用無需重新編譯，消除了 Nodejs 版本差異。

構(gòu)建工具

node-gypnode-gyp 對 gyp（Chromium 編寫的構(gòu)建工具）進(jìn)行了封裝，binding.gyp 為其配置文件。node-gyp 工作分為兩個(gè)過程：a. 結(jié)合 binding.gyp 生成對應(yīng)平臺下的工程配置，比如：Windwos 下生成 .sln 項(xiàng)目文件。b. 項(xiàng)目文件編譯，生成 C++ 擴(kuò)展。binding.gyp 配置文件，以 Windows 為例：

{
    "targets": [
    {        
        "target_name": "addon_name", 
        "type": "static_library"
        'defines': [
          'DEFINE_FOO',
          'DEFINE_A_VALUE=value',
        ],
        'include_dirs': [
          './src/include',
          '<!(node -e "require(\'nan\')")' // include NAN in your project
        ],
        'sources': [
          'file1.cc',
          'file2.cc',
        ],
        'conditions': [
          [
              'OS=="win"', 
              {
                'copies': [{
                  'destination': '<(PRODUCT_DIR)',
                  'files': [
                    './dll/*'
                  ]
                }],
                'defines': [
                  'WINDOWS_SPECIFIC_DEFINE',
                 ],
                'library_dirs': [
                  './lib/'
                ],
                'link_settings': {
                  'libraries': [
                    '-lyou_sdk.lib'
                  ]
                },
                'msvs_settings': {
                  'VCCLCompilerTool': {
                    'AdditionalOptions': [
                      '/utf-8'
                    ]
                  }
               },
             }
           ]
        ],
      },
    ]
}

字段說明：

target_name： 目標(biāo)的名稱，此名稱將用作生成的 Visual Studio 解決方案中的項(xiàng)目名稱。
type: 可選項(xiàng)：static_library 靜態(tài)庫、executable 可執(zhí)行文件、shared_library 共享庫。
defines： 將在編譯命令行中傳入的 C 預(yù)處理器定義（使用 -D 或 /D 選項(xiàng)）。
include_dirs： C++ 頭文件所在的目錄。
sources： C++ 源文件。
conditions： 適配不同環(huán)境配置條件塊。
copies： 拷貝 dll 動態(tài)庫到生成目錄。
library_dirs: 配置 lib 庫目錄到 vs 項(xiàng)目中。
libraries： 項(xiàng)目依賴的庫。
msvs_settings： Visual Studio 中屬性設(shè)置。

node-gyp 編譯指令：

node-gyp clean //清空上一次構(gòu)建目錄
node-gyp configure //配置項(xiàng)目
node-gyp build //項(xiàng)目編譯，生成C++擴(kuò)展
node-gyp rebuild //重新生成C++擴(kuò)展，相當(dāng)于clean configure build的結(jié)合

cmake-jscmake-js 與 node-gyp 工作原理類似。 cmake-js 是基于 CMake 的構(gòu)建系統(tǒng)，而 node-gyp 是基于 Goole 的 gyp 工具，這里不在進(jìn)行詳細(xì)介紹。

回調(diào)事件處理

Nodejs 運(yùn)行在單線程中，但它能夠支持高并發(fā)，就是依賴事件循環(huán)實(shí)現(xiàn)。簡單來說 Nodejs 主線程維護(hù)一個(gè)事件隊(duì)列，收到一個(gè)耗時(shí)任務(wù)將任務(wù)放入隊(duì)列，繼續(xù)向下執(zhí)行其他任務(wù)。主線程空閑時(shí)，遍歷事件隊(duì)列，非 I/O 任務(wù)親自處理，通過回調(diào)函數(shù)返回給上層調(diào)用。I/O 任務(wù)放入線程池執(zhí)行，并指定回調(diào)函數(shù)，然后繼續(xù)執(zhí)行其他任務(wù)。

C++ 擴(kuò)展調(diào)用 js 回調(diào)函數(shù)時(shí)，會在 Nodejs 掛在一個(gè) libuv 線程池，用于處理回調(diào)函數(shù)，當(dāng) Nodejs 主線程空閑時(shí)，去遍歷線程池，處理任務(wù)。libuv 具體細(xì)節(jié)參考 nertc-electron-sdk：

https://github.com/netease-im/node-nertc-sdk/blob/main/nertc_sdk_node/nertc_node_engine_event_handler.cpp

03 混合編程實(shí)踐

示例1

結(jié)合 node-addon-api 進(jìn)行演示，node-addon-api 對 Node-API 接口進(jìn)行了封裝開發(fā)簡單。該實(shí)例完成 js 調(diào)用 C++ 函數(shù)實(shí)現(xiàn)兩個(gè)數(shù)字相加。

項(xiàng)目結(jié)構(gòu)

package.json 配置文件

//package.json
{
  "name": "addon-sdk",
  "version": "0.1.0",
  "description": "test nodejs addon sample",
  "main": "./api/index.js",
  "private": true,
  "gypfile": true,
  "dependencies": {
    "bindings": "~1.2.1",
    "node-addon-api": "^3.0.0"
  },
  "devDependencies": {
    "node-gyp": "^8.2.0"
  },
  "scripts": {
    "test": "node ./api/index.js"
  },
  "license": "ISC",
  "author": "liyongqiang"
}

binding.gyp 配置文件

//binding.gyp
{
  "targets": [
    {
      "target_name": "addon",
      "sources": [ 
        "./src/addon.cc", 
        "./src/engine.h" , 
        "./src/engine.cpp" 
      ],
      "include_dirs": [
        "<!@(node -p \"require('node-addon-api').include\")"
      ],
      'defines': [ 
        'NAPI_DISABLE_CPP_EXCEPTIONS' 
      ]
    }
  ]
}

C++ 擴(kuò)展

//addon.cc
#include <napi.h>
#include "engine.h"


Napi::Object InitAll(Napi::Env env, Napi::Object exports) {
  return nertc::Engine::Init(env, exports);
}


NODE_API_MODULE(addon, InitAll)


//engine.h
#pragma once
#include <napi.h>
namespace nertc {
class Engine : public Napi::ObjectWrap<Engine> {
 public:
  static Napi::Object Init(Napi::Env env, Napi::Object exports);
  Engine(const Napi::CallbackInfo& info);
 private:
  Napi::Value add(const Napi::CallbackInfo& info);
};
}


//engine.cpp
#include "engine.h"
namespace nertc {  
Napi::Object Engine::Init(Napi::Env env, Napi::Object exports) 
{
    Napi::Function func =
        DefineClass(env, "Engine",
                   {InstanceMethod("add", &Engine::add)});
    Napi::FunctionReference* constructor = new Napi::FunctionReference();
    *constructor = Napi::Persistent(func);
    env.SetInstanceData(constructor);
    exports.Set("Engine", func);
    return exports;
}


Engine::Engine(const Napi::CallbackInfo& info): Napi::ObjectWrap<Engine>(info) {}


Napi::Value Engine::add(const Napi::CallbackInfo& info) {
  Napi::Env env = info.Env();//獲取環(huán)境變量
  int ret = 0;
  int length = info.Length();//獲取參數(shù)個(gè)數(shù)
  if (length != 2 || !info[0].IsNumber() || !info[1].IsNumber()) 
  {
      Napi::TypeError::New(env, "Number expected").ThrowAsJavaScriptException();
      ret = -1;
      return Napi::Number::New(env, ret);
  }
  int num1 = info[0].As<Napi::Number>().Int32Value();//獲取第一個(gè)參數(shù)
  int num2 = info[1].As<Napi::Number>().Int32Value();////獲取第二個(gè)參數(shù)
  int sum = num1 + num2;
  return Napi::Number::New(env, sum);//返回結(jié)果到j(luò)s層
}
}

js 調(diào)用 C++ 擴(kuò)展

var addon = require('bindings')('addon');//調(diào)用C++擴(kuò)展
var engine = new addon.Engine();
console.log( `num1 + num2  = ${engine.add(1,2)}`);//輸出3

在 package.json 目錄下，執(zhí)行 npm install、npm run test，可以看到 js 調(diào)用 C++ 接口成功，輸出兩個(gè)數(shù)字相加結(jié)果。

示例2

網(wǎng)易云信音視頻通話 nertc-electron-sdk，采 Node-API 方式進(jìn)行開發(fā)，將 C++ 原生 sdk 封裝成 Nodejs 模塊（nertc-electron-sdk.node），結(jié)合 Electron 可以快速實(shí)現(xiàn)音視頻通話。github demo 體驗(yàn)地址：

https://github.com/netease-im/Basic-Video-Call/tree/master/Group-Video/NERtcSample-GroupVideoCall-Electron

04 常見問題

Electron 應(yīng)用中 js 調(diào)用 C++ 擴(kuò)展時(shí)，提示 Error: The specified module could not be found。
答：該錯誤表示能找到 C++ 擴(kuò)展模塊（.node）但是加載失敗，因?yàn)?.node 會依賴其他 .dll 和 C++ 運(yùn)行庫，缺少這些庫時(shí)就會報(bào)上面的錯誤，使用 depends 查看缺少哪種庫，配置即可。
運(yùn)行使用 C++ 擴(kuò)展的 Electron 應(yīng)用，提示 The specifield module could not be found。
答：該錯誤表示找不到 C++ 擴(kuò)展模塊。在項(xiàng)目 package.json 文件中配置 extraFiles 字段，將擴(kuò)展拷貝到 Electron 可加載目錄即可。
Electron 加載 C++ 擴(kuò)展時(shí)提示：Module parse failed: Unexpected character '?'。
答：webpack 只能識別 js 和 json 文件無法識別 C++ 擴(kuò)展模式，在 Electron 打包時(shí)需要在 vue.config.js 中配置 C++ 擴(kuò)展的 loader。
更多常見問題匯總：
?https://doc.yunxin.163.com/docs/jcyOTA0ODM/jU4NTEwNzg?platformId=50456#9

責(zé)任編輯：張燕妮來源：網(wǎng)易智企技術(shù)+

開發(fā)框架程序