c与js怎么交互

C与JavaScript的交互可以通过多种方式实现，例如：使用WebAssembly、通过Node.js的ffi模块、通过HTTP请求、使用Electron等。 在这篇文章中，我们将详细探讨上述方法，并着重介绍WebAssembly的使用，因为它是当前最流行和高效的方法。

一、WEBASSEMBLY

WebAssembly（Wasm）是一种新的编码方式，它使得在浏览器中运行的代码不仅限于JavaScript，还可以运行如C/C++等编译后的字节码。WebAssembly的设计目标是提高Web应用的性能，尤其适用于计算密集型任务。

1、WebAssembly的基本概念

WebAssembly是一种二进制格式的指令集，可以被现代浏览器直接执行。它的设计初衷是高效地运行在Web环境中，与JavaScript紧密集成。WebAssembly的模块可以通过JavaScript进行加载和调用，从而实现与JavaScript的无缝交互。

2、使用Emscripten编译C代码

Emscripten是一款开源的编译器，它可以将C/C++代码编译为WebAssembly格式。下面是一个简单的示例，展示如何使用Emscripten将C代码编译为WebAssembly，并在JavaScript中调用：

安装Emscripten：

git clone https://github.com/emscripten-core/emsdk.git cd emsdk ./emsdk install latest ./emsdk activate latest source ./emsdk_env.sh

编写C代码：

// hello.c
#include <stdio.h>
int add(int a, int b) {
    return a + b;
}

使用Emscripten编译C代码：

emcc hello.c -o hello.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'

在JavaScript中调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebAssembly Demo</title>
</head>
<body>
    <script src="hello.js"></script>
    <script>
        var add = Module.cwrap('add', 'number', ['number', 'number']);
        console.log(add(5, 3)); // 输出: 8
    </script>
</body>
</html>

二、NODE.JS的FFI模块

Node.js的Foreign Function Interface（FFI）模块允许JavaScript调用C/C++的动态链接库（DLL）。这对于需要在服务器端执行高性能计算的应用非常有用。

1、安装FFI模块

首先，确保你已经安装了Node.js，然后使用npm安装ffi-napi模块：

npm install ffi-napi

2、编写C代码并生成动态链接库

假设我们有如下C代码：

// hello.c
#include <stdio.h>
int add(int a, int b) {
    return a + b;
}

使用gcc生成动态链接库：

gcc -shared -o libhello.so -fPIC hello.c

3、在Node.js中调用动态链接库

编写如下Node.js代码：

const ffi = require('ffi-napi');
const libhello = ffi.Library('./libhello', {
    'add': ['int', ['int', 'int']]
});
console.log(libhello.add(5, 3)); // 输出: 8

三、HTTP请求

通过HTTP请求的方式，C/C++代码可以运行在服务器端，通过API提供服务，JavaScript可以通过Ajax或fetch进行调用。

1、编写C代码并部署为API服务

假设我们使用一个简单的C++框架，如Crow，来编写API服务：

// server.cpp
#include "crow.h"
int main() {
    crow::SimpleApp app;
    CROW_ROUTE(app, "/add/<int>/<int>")([](int a, int b){
        return std::to_string(a + b);
    });
    app.port(18080).multithreaded().run();
}

编译并运行：

g++ -o server server.cpp -lcrow -lpthread ./server

2、在JavaScript中调用API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP Request Demo</title>
</head>
<body>
    <script>
        fetch('http://localhost:18080/add/5/3')
            .then(response => response.text())
            .then(result => console.log(result)); // 输出: 8
    </script>
</body>
</html>

四、ELECTRON

Electron是一个用于构建跨平台桌面应用的框架，它允许使用Web技术（HTML、CSS、JavaScript）来构建桌面应用，并可以通过Node.js调用C/C++代码。

1、创建Electron应用

首先，创建一个新的Electron项目：

mkdir my-electron-app cd my-electron-app npm init -y npm install electron --save-dev

2、设置Electron入口文件

创建一个main.js文件：

const { app, BrowserWindow } = require('electron');
const ffi = require('ffi-napi');
const libhello = ffi.Library('./libhello', {
    'add': ['int', ['int', 'int']]
});
function createWindow () {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    mainWindow.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

3、创建HTML文件并调用C函数

创建一个index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron Demo</title>
</head>
<body>
    <script>
        const { remote } = require('electron');
        const libhello = remote.getGlobal('libhello');
        console.log(libhello.add(5, 3)); // 输出: 8
    </script>
</body>
</html>

4、启动Electron应用

在package.json文件中添加启动脚本：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^11.0.0"
  },
  "dependencies": {
    "ffi-napi": "^2.4.7"
  }
}

然后，运行：

npm start

五、总结

通过不同的方式，C与JavaScript可以实现高效的交互。WebAssembly 提供了一种高效、安全的方式，将C/C++代码编译为WebAssembly模块，可以直接在浏览器中运行。Node.js的ffi模块 允许在服务器端调用C/C++的动态链接库，适合需要高性能计算的应用。HTTP请求 方式适用于将C/C++代码部署为API服务，通过JavaScript进行调用。Electron 提供了一种跨平台的桌面应用开发方式，支持使用Web技术，并可以通过Node.js调用C/C++代码。

无论选择哪种方式，都需要根据具体的应用场景和需求来确定。希望这篇文章能够帮助你更好地理解和实现C与JavaScript的交互。