iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0

昨天成功在Electron應用程式使用動態連結函庫讀取CPU風扇轉速,但這個轉速數值只會在Electron應用程式UI載入後更新一次,之後就會維持同樣的轉速數值,但是我們的目的是監控CPU風扇轉速,需要每隔一段時間就讀取CPU風扇轉速並顯示在UI上,所以需要改寫Electron應用程式的寫法。

  • 修改preload.js
    ontextBridge.exposeInMainWorld('speed', {
    CallCpuFanSpeed: () => {
    	ipcRenderer.send('call-cpu-fan-speed')
    }
    )
    
    pcRenderer.on('update-cpu-fan-speed', (event, value) => {
    console.log(value);
    document.getElementById('cpu-fan-speed').innerHTML = value;
    )
    ``
     將`cpufan`改為`CallCpuFanSpeed`,並且使用`ipcRenderer.send`向主進程發送非同步訊息,**通知主進程要讀取CPU風扇轉速**。
     新增`ipcRenderer.on`,監聽新訊息,這裡是**接收從主進程發送的CPU風扇轉速**,當收到轉速,就**更新UI的數值**。
    
    
  • 修改main.js
    pcMain.on('call-cpu-fan-speed', (event) => {
    const webContents = event.sender;
    const Speed = GetCpuFanSpeed();
    webContents.send('update-cpu-fan-speed', Speed);
    )
    ``
     移除在`app.whenReady()`中的`ipcMain.handle`,改使用`ipcMain.on`監聽訊息,這裡是**接收從渲染進程發送的訊息**。
     當收到從渲染進程發送的訊息,使用`GetCpuFanSpeed()`讀取CPU風扇轉速,並透過`webContents.send`發送非同步訊息,**將讀取到的CPU風扇轉速發送出去**。
    
    
  • 修改renderer.js
    etInterval(() => {
    window.speed.CallCpuFanSpeed();
    }, 1500)
    ``
     利用`setInterval`,在可以**依照指定的時間週期去呼叫函式執行**,時間週期單位為**毫秒**。
     這裡每1.5秒就呼叫一次`window.speed.CallCpuFanSpeed()`,通知主進程要讀取CPU風扇轉速。
    
    
  • 最後執行Electron應用程式,可以看到UI中CPU風扇轉速每1.5秒左右就會更新,而且主控台也不斷輸出讀取到的CPU風扇轉速。

如此一來我們讀取CPU風扇轉速的Electron應用程式就完成了,關於主進程與渲染進程的互相溝通可以到參考內容中閱讀官方的文件,有更詳細的介紹。這支Electron應用程式的原始碼也同樣放在我個人的repo中。

參考內容

setInterval() global function - Web APIs | MDN (mozilla.org)
Inter-Process Communication | Electron (electronjs.org)
Sio-App Repo


上一篇
Day27 Electron應用程式-7
下一篇
Day29 Electron應用程式-9
系列文
Windows Driver + Electron 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言