Electron 入门项目(二)

SYS-TOP

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

效果:

cpu信息

系统信息

系统基础设置

概述

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

核心逻辑

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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)

获取系统信息

1
2
3
4
5
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 过载警告百分比通知间隔表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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

欢迎交流👏。