在电子中显示 cpu 信息答案

【问题标题】：Display cpu info in electron在电子中显示 cpu 信息
【发布时间】：2022-01-10 03:52:55
【问题描述】：

所以我开始学习电子，并制作了一个很酷的应用程序。我想添加更多东西，但我有点卡住了。我尝试在systeminformation 中使用manufacturer(); 添加cpu 名称。我不知道我做错了什么。上次我会提醒你，我是一个完全的初学者，所以希望我有点愚蠢。

这就是我想要制作的 div 的样子

            <div class="cpu_name">
                CPU name: <span id="cpu-name">-</span>
            </div>
            <div class="cpu_cores">
                CPU cores: <span id="cpu-cores">-</span>
            </div>
            <div class="cpu_temperature">
                CPU temperature: <span id="cpu-temperature">-</span>
            </div>
        </div>

还有，我没有忘记使用脚本

<script src="./renderer.js" defer type="module"></script>
<script src="./js/window.js" defer type="module"></script>

接下来我将它添加到renderer.js 我创建了链接到#cpu-name的var

const CPU_NAME = document.getElementById("cpu-name");

然后我创建了getCpuName() 函数

async function getCpuName(){
    const name = await app.cpuName();
    const cpu_name = name.manufacturer;

    updateCpuName(cpu_name);
}

因为我调用了updateCpuName() 方法，所以我创建了一个

function updateCpuName(cpu__name){
    CPU_NAME.innerText = cpu__name;
    console.log(cpu__name);
}

接下来我将它添加到preload.js。我已经通过教程完成了 preload.js，因为我还没有真正理解那里的所有内容...... 这是我的整个preload.js 脚本

const os = require("os");
const { ipcRenderer, contextBridge } = require("electron");

const API = {

    window:{
        close: () => ipcRenderer.send("app/close"),
        minimize: () => ipcRenderer.send("app/minimize"),
    },

    cpuUsage: (data) => ipcRenderer.invoke("cpu/get", data),
    cpuName: (data)  => ipcRenderer.invoke("cpu/name", data),
}

contextBridge.exposeInMainWorld("app", API);

但是这个cpuName: (data) => ipcRenderer.invoke("cpu/name", data), 是这里唯一重要的东西。我做的最后一件事是将它添加到index.js。所以我基本上用systeminformation创建了const

const {currentLoad, manufacturer,  cpu } = require("systeminformation");

然后发了ipcMain.handle();

ipcMain.handle("cpu/name", async (_, data) => {

    const name = await manufacturer();
    return name;


});

我确定我做错了什么，但我无法弄清楚是什么。这只是一个有趣的项目，我正在努力让它变得更好。感谢您甚至只是阅读此内容^-^

【问题讨论】：

标签： javascript html node.js electron system-information

【解决方案1】：

有一个名为 systeminformation (https://www.npmjs.com/package/systeminformation) 的 npm 模块可以帮助您解决这个问题。我从来没有使用 electron 或这个模块访问过 CPU，但是这个模块看起来很容易使用并且有很好的文档记录。

还请查看模块自述文件的“已知问题”部分。检查 CPU 温度需要一些额外的依赖项，所以你可能也想看看！

【讨论】：