Electron 入门项目（二）

SYS-TOP

简介：对系统的信息进行展示，cpu占有率高会自动通知

效果:

概述

核心的包是使用node-os-utils包来获取系统信息、cpu的信息；使用了fs模块对json文件读写进行保存软件的配置。实现了软件的假退出，点击任务栏图标显示任务，右键图标退出任务；使用ipcRenderer实现渲染进程与主进程之间的通信

核心逻辑

使用node-os-util模块每两秒获取一次cpu的信息

setInterval(() => {
    cpu.usage().then(info => {
        document.getElementById('cpu-usage').innerText = info + '%'
        document.getElementById('cpu-progress').style.width = info + '%'
        if( info >= cpuOverload ){
            document.getElementById('cpu-progress').style.background = 'red'
        } else {
            document.getElementById('cpu-progress').style.background = '#30c88b'
        }
        if(info >= cpuOverload && runNotify(alertFrequency)) {
            notifyUser({
                title: 'CPU OverLoad',
                body: `CPU is over ${cpuOverload}%`,
                icon: path.join(__dirname, 'img', 'icon.png')
            })
            localStorage.setItem('lastNotify', +new Date())
        }
    })

    cpu.free().then(info => {
        document.getElementById('cpu-free').innerText = info + '%'
    })

    document.getElementById('sys-uptime').innerText = secondsToDhms(os.uptime())
}, 2000)

获取系统信息

document.getElementById('cpu-model').innerText = cpu.model()

document.getElementById('comp-name').innerText = os.hostname() 

document.getElementById('os').innerText = `${os.type()} ${os.arch()}`

渲染进程使用ipcRenderer.send()方法向主进程提交设置cpu 过载警告百分比 和 通知间隔表单

 settingsForm.addEventListener('submit', e => {
   e.preventDefault()
   const cpuOverload = document.getElementById('cpu-overload').value
   const alertFrequency =  document.getElementById('alert-frequency').value

   // send new settings to main process
   ipcRenderer.send('settings:set', {
     cpuOverload,
     alertFrequency
   })

   showAlert('Settings Saved')
 })
// 同时主进程将设置写入配置的json文件
// Set settings
ipcMain.on('settings:set', (e, payload) => {
  store.set('settings', payload)
  mainWindow.webContents.send('settings:get', store.get('settings'))
})
// Store.js 封装的存储函数
const electron = require('electron')
const path = require('path')
const fs = require('fs')

class Store {
    constructor(options){
        const userDataPath = (electron.app || electron.remote.app).getPath('userData')

        this.path = path.join(userDataPath, options.configName + '.json')
        this.data = parseDataFile(this.path, options.defaults)
    }

    get(key) {
        return this.data[key]
    }

    set(key, val) {
        this.data[key] = val
        fs.writeFileSync(this.path, JSON.stringify(this.data))
    }
}

function parseDataFile(filePath, defaults) {
    try {
        return JSON.parse(fs.readFileSync(filePath))
    } catch (err) {
        return defaults
    }
}

module.exports = Store

最后看一下任务栏图标点击的事件

const {
    app,
    Menu,
    Tray
} = require('electron')

class AppTray extends Tray {
    constructor(icon, mainWindow) {
        super(icon)

        this.setToolTip('SysTop')

        this.mainWindow = mainWindow

        this.on('click', this.onClick.bind(this))
        this.on('right-click', this.onRightClick.bind(this))
        
    }

    onClick(){
        if (this.mainWindow.isVisible() === true) {
            this.mainWindow.hide()
        } else {
            this.mainWindow.show()
        }
    }

    onRightClick(){
        const contextMenu = Menu.buildFromTemplate([{
            label: 'Quit',
            click: () => {
                app.isQuitting = true
                app.quit()
            }
        }])

        this.popUpContextMenu(contextMenu)
    }
}
module.exports = AppTray

欢迎交流👏。