javascript - Node.js 与 Electron::运行外部命令并在界面上显示标准输出

Question

我是 Node.js 和 Electron 的新手，正在尝试在 Electron 中运行外部命令并使用 HTML 显示结果。

我用node.js制作了一个HTTP服务器客户端版本，效果很好。但未能使其与 Electron 一起工作，即使在遵循了这里的许多答案之后，例如

• Node.js spawn child process and get terminal output live
• Piping data from child to parent in nodejs

他们都没有为我的 Electron 工作过。

Node.js 版本有效。

我正在显示我的工作 Node.js 代码，如下所示。此代码在运行 node index.js 并在浏览器中打开 localhost:8888/start 后，将显示 ls -al 的输出在网页上:

// index.js

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");

var handle = {};
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;

server.start(router.route, handle);

HTTP 服务器:

// server.js

var http = require("http");
var url = require("url");

function start(route, handle) {
    http.createServer(function(request, response) {
        var pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");

        route(handle, pathname, response);
}).listen(8888);

    console.log("Server has started.");
}

exports.start = start;

以不同方式处理两个请求(即启动/上传)的路由器:

//router.js

function route(handle, pathname, response) {
    console.log("About to route a request for " + pathname);
    if (typeof handle[pathname] == 'function') {
        handle[pathname](response);
    } else {
        console.log("No request handler found for " + pathname);

        // send an HTTP status and content-type in the HTTP response *header*
        // back to the browser that requested your server).
        response.writeHead(404, {"Content-Type": "text/plain"});
        // send text in the HTTP response *body*.
        response.write("404 Not found");
        // finish the response.
        response.end();
    }
}

exports.route=route;

实际的请求处理程序:

// requestHandlers.js

var exec = require("child_process").exec;

function start(response) {
    console.log("Request handler 'start' was called.");
    var content = "empty";

    exec("ls -al", 
        {timeout: 10000, maxBuffer: 20000*1024},
        function(error, stdout, stderr) {
            // send an HTTP status 200 and content-type in the HTTP response *header*
            // back to the browser that requested your server).
            response.writeHead(200, {"Content-Type": "text/plain"});

            // send text in the HTTP response *body*.
            response.write(stdout);

            // finish the response.
            response.end();
        });
}

function upload(response) {
    console.log("Request handler 'upload' was called.");
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write("You've uploaded data");
    response.end();
}

exports.start = start;
exports.upload = upload;

上面的代码在 Safari 中对我有用。

Electric 版本失败

现在我想用 Electron 做类似的事情:在输入框中输入命令，通过提交按钮运行它，并在控件下方的同一页面上显示结果。这是我的主要流程:

// main.js

const {app, BrowserWindow} = require('electron');

let mainWindow = null;

app.on('ready', () => {
    console.log('Hello from Electron');
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });

    mainWindow.webContents.openDevTools()

    mainWindow.webContents.loadFile('./app/index.html');

    // mainWindow events, within app lifecycle
    mainWindow.webContents.on('did-fail-load', function() {
        console.log("Failed to load index.html");
    })

})

现在是渲染器进程:

// renderer.js

const { shell } = require('electron');

const parser = new DOMParser();

const resultSection = document.querySelector('.results');
const errorMessage = document.querySelector('.error-message');
const newCmdForm = document.querySelector('.new-cmd-form');
const newCmd = document.querySelector('.new-external-cmd');
const newCmdSubmit = document.querySelector('.new-cmd-run');
const clearStorageButton = document.querySelector('.clear-results');

newLinkForm.addEventListener('submit', (event) => {
    const cmd = newCmd.value;
    processCmd(cmd);
});

const processCmd = (cmd) => {
    var exec = require('child_process').exec;

    exec("ls -al", {timeout: 10000, maxBuffer: 20000*1024},
        function(error, stdout, stderr) {
            var out = stdout.toString();
            var result = 
                '<div class="text"' +
                `<h3>${out}</h3>` +
                '</div>';
            resultSection.innerHTML = result;
            console.log(result)
        });
}

const renderResults = () => {
    resultSection.innerHTML = '';
};

renderResults();

这是页面:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        script-src 'self' 'unsafe-inline';
        connect-src *">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Cmdlet</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<h1>Cmdlet</h1>
<div class="error-message"></div>
<section class="input-new-cmd">
    <form class="new-cmd-form">
        <input type="text" class="new-external-cmd" placeholder="default command" size="100" required>
        <input type="submit" class="new-cmd-run" value="Run">
    </form>
</section>
<section class="results"></section>
<section class="controls">
    <button class="clear-results">Clear</button>
</section>
<script>
    require('./renderer');
</script>

</html>

知道外部命令的调用是异步的，我将渲染器更新代码放在回调中。但是，此代码在目标区域显示[object Object]，而不是ls -al 的输出。

我哪里错了？

Answer 1

// renderer.js

const { shell } = require('electron');

const parser = new DOMParser();

const resultSection = document.querySelector('.results');
const errorMessage = document.querySelector('.error-message');
const newCmdForm = document.querySelector('.new-cmd-form');
const newCmd = document.querySelector('.new-external-cmd');
const newCmdSubmit = document.querySelector('.new-cmd-run');
const newLinkForm = document.querySelector('.new-cmd-form');
const clearStorageButton = document.querySelector('.clear-results');

newLinkForm.addEventListener('submit', (event) => {
    event.preventDefault()
    const cmd = newCmd.value;
    console.log(event)
    processCmd('cmd');
});

const processCmd = (cmd) => {
    var exec = require('child_process').exec;

    exec("ls -al", {timeout: 10000, maxBuffer: 20000*1024},
        function(error, stdout, stderr) {
            var out = stdout.toString();
            const outArray = out.split('\n');

            let result = '<div class="text"'
            outArray.forEach(e => {
                result += `<h3>${e}</h3>`
            });
            result += '</div>';
            resultSection.innerHTML = result;
            console.log(result)
        });
}

const renderResults = () => {
    resultSection.innerHTML = '';
};

renderResults();

尝试使用这个。我在您的 renderer.js 中添加了一些更改这将会运作良好。

但我想建议在主进程中执行此类操作。您知道我们可以使用 IPC api 在 Renderer 和 Main 进程之间进行通信。

看看这个 https://www.christianengvall.se/main-and-renderer-process-in-electron/

但就我个人而言，我通常不会在渲染器进程中运行exec。对于此操作，我宁愿在主进程中使用这样的 exec 或 spawn 。我们可以使用IPC在Main和Renderer进程之间进行通信。

IPCMain 用于监听来自渲染器的事件，并且仅在主进程中可用。 IPCRenderer用于将Renderer中的事件发送到Main进程。所以。

使用IPCRenderer，您可以在Renderer进程中发送这样的事件。

const { ipcRenderer } = require('electron');

async function runCommand(cmd) {
  const res = await ipcRenderer.sendSync('runCommand', cmd);
  return res;
}

然后在主进程中。 (main.js)

// Listen runCommand event from the Renderer
// And return the result to Renderer.
ipcMain.on('runCommand', async (event, arg) => {
  event.returnValue = await runCommand(arg);
});

(您可以根据需要自行声明 runCommand(arg) 函数)请随意使用您想要的任何内容。