在电子中显示 cpu 信息

Posted 2023-03-22

【中文标题】在电子中显示 cpu 信息

【英文标题】：Display cpu info in electron

【发布时间】：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;


);

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

【参考方案1】：

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

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