javascript - Mengapa ipcMain saya tidak mengirim ke ipcRenderer di Electron?

Baru di Electron, saya telah menemukan cara mengirim dari Renderer ke Main tetapi saya mencoba belajar bagaimana cara pergi dari Main ke Renderer. Dalam penelitian saya, saya telah membaca:

IPC dikirim dari proses utama ke renderer dan dicoba:

main.js:

const { app, ipcMain, Menu }  = require('electron')
const appVersion = process.env.npm_package_version
const mainWindow = require('./renderer/mainWindow')

app.on('ready', () => {
  mainWindow.createWindow(),
  console.log(`Trying to send app version to renderer: ${appVersion}`),
  mainWindow.webContents.send('app-version', appVersion),  
  Menu.setApplicationMenu(mainMenu)
})

tetapi saya mendapatkan kesalahan:

Pengecualian Tak Tertangkap TypeError Tidak dapat membaca properti 'send' dari undefined

Setelah membaca "Kirim pesan sinkron dari IpcMain ke IpcRenderer - Electron" saya mencoba:

ipcMain.on('app-version', (event) => {
    console.log(`Sent: ${appVersion}`)
    event.sender.send(appVersion)
}),

tetapi tidak ada yang terjadi atau muncul kesalahan. renderer.js saya:

const { ipcRenderer } = require('electron')
ipcRenderer.on('app-version', (event, res) => {
    console.log(res)
})

Mengapa ipcMain saya tidak mengirim ke ipcRenderer saya?

Sunting :

mainWindow.js:

// Modules
const { BrowserWindow } = require('electron')

// export mainWindow
exports.createWindow = () => {

  // BrowserWindow options
  // https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
  this.win = new BrowserWindow({
      minWidth: 400,
      minHeight: 400,
      frame: false,
      webPreferences: {
        nodeIntegration: true,
        backgroundThrottling: false
      }
  })

  // Devtools
  this.win.webContents.openDevTools()

  // Load main window content
  this.win.loadURL(`file://${__dirname}/index.html`)

  // Handle window closed
  this.win.on('closed', () => {
    this.win = null
  })
}

Saya juga telah mencoba:

main.js:

app.on('ready', () => {
  mainWindow.createWindow(),
  mainWindow.win.webContents.send('app-version', appVersion),  
  Menu.setApplicationMenu(mainMenu)
})

renderer.js:

console.log("Trying")
ipcRenderer.on('app-version', (args) => {
    console.log(`Node version is ${args}`)
})

Entah kenapa sekarang jawaban yang saya tulis ipcMain mengirim ke renderer beberapa kali dan menampilkan pesan konsol berulang kali

Trying to send app version to renderer: 1.0.0
Trying to send app version to renderer: 1.0.0
Trying to send app version to renderer: 1.0.0
Trying to send app version to renderer: 1.0.0
Trying to send app version to renderer: 1.0.0

Sekarang aplikasinya berkedip tetapi di console.log hanya muncul sekali dan saya tidak mengerti kenapa.

Sunting

Untuk menanggapi jawaban.

Saya menyadari app.getVersion, saya hanya menggunakan ENV untuk belajar bagaimana mengirim ke main. Setelah menguji kode, pendekatan ini tidak berhasil.

Menyalin ini:

app.on('ready', () => {
    const win = mainWindow.createWindow(),
    console.log(`Trying to send app version to renderer: ${appVersion}`),
    win.webContents.send('app-version', appVersion),  
    Menu.setApplicationMenu(mainMenu)
})

menimbulkan kesalahan:

Inisialisasi hilang dalam deklarasi const

jadi diubah menjadi seperti ini:

app.on('ready', () => {
  const win = mainWindow.createWindow()
  console.log(`Trying to send app version to renderer: ${appVersion}`)
  win.webContents.send('app-version', appVersion)
  Menu.setApplicationMenu(mainMenu)
})

tetapi saat menambahkan return di akhir exports.createWindow muncul error ini:

win tidak didefinisikan

menambahkan let.win sebelum exports.createWindow tidak akan menghasilkan kode tetapi tidak ada yang dikirimkan.

Biola Elektron

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron learning</title>
    <!-- CSS Bootstrap -->
    <!-- <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- 
      Font Awesome 
      https://fontawesome.com/v4.7.0/cheatsheet/ 
    -->
    <!-- <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css"> -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Custom CSS -->
    <style>
      body {
        -webkit-app-region: drag;
      }
      footer {
        position: fixed;
        bottom: 0;
        width: 100%;
      }
      #close_app,
      #site {
        cursor: pointer;
      }
    </style>
  </head>
  <body class="d-flex flex-column h-100">
    <header>
      <nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
        <a class="navbar-brand text-white">Foobar</a>
        <div class="collapse navbar-collapse justify-content-between">
          <div class="navbar-nav">
            <a id="site" class="nav-link"><small><u id="application"></u></a>
          </div>
          <div class="navbar-nav">
              <a id="close_app" class="nav-item nav-link"><i class="fa fa-times-circle"></i></a>
          </div>
        </div>
      </nav>
    </header>

    <main role="main" class="flex-shrink-0">
    <div class="container">
      <h1>Hello World!</h1>
      <!-- All of the Node.js APIs are available in this renderer process. -->
      We are using Node.js <script>document.write(process.versions.node)</script>,
      Chromium <script>document.write(process.versions.chrome)</script>,
      and Electron <script>document.write(process.versions.electron)</script>.
      Electron app version <script>document.write(process.versions.electron)</script>.
    </div>
    <p id="testSender"></p>
    </main>

    <footer class="footer mt-auto py-3 ">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
    <script>
        // jQuery
        // window.jQuery = window.$ = $ = require('jquery')

        // You can also require other files to run in this process
        require('./renderer.js')
    </script>
    <!-- <script src="../node_modules/jquery/dist/jquery.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>


    <!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

main.js:

'use strict'

// Modules to control application life and create native browser window
const { app, ipcMain, BrowserWindow, Menu }  = require('electron')
const testMainSend = `Trying to send something to renderer`

let mainWindow

// Window state keeper
const windowStateKeeper = require('electron-window-state')

// export mainWindow
function createWindow () {

  let winState = windowStateKeeper({
    defaultWidth: 400,
    defaultHeight: 400
  })

  // BrowserWindow options
  // https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
  const win = new BrowserWindow({
    width: winState.width,
    height: winState.Height,
    x: winState.x,
    y: winState.y,
    minWidth: 400,
    minHeight: 400,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      backgroundThrottling: false
    }
  })

  winState.manage(win)

  // Devtools
  win.webContents.openDevTools()

  // Load main window content
  win.loadURL(`file://${__dirname}/index.html`)

  // Handle window closed
  win.on('closed', () => {
      this.win = null
  })

  return win
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', () => {
  createWindow()

  // 1st attempt
  // webContents.send('misc-sender', testMainSend)

  // 2nd attempt
  // const win = createWindow()
  // win.webContents.send('misc-sender', testMainSend)

  // 3rd attempt
  const win = createWindow()
  win.webContents.on('dom-ready', () => {
    console.log(`Trying to send renderer: ${testMainSend}`)
    mainWindow.win.webContents.send('misc-sender', testMainSend)
  })
})

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// Close application from button
ipcMain.on('closing-app', () => {
  app.quit()
  console.log('Closed app from font awesome link')
})

renderer.js:

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
const { ipcRenderer, shell } = require('electron')
const appVersion = require('electron').remote.app.getVersion()

// Devtron
// require('devtron').install()

// Close App
const closeApp = document.getElementById('close_app')
closeApp.addEventListener('click', () => {
    ipcRenderer.send('closing-app')
})

// received from ipcMain test
ipcRenderer.on('misc-sender', (event, args) => {
    appendTest = document.getElementById('testSender')
    appendTest.innerHTML += args
})

// Getting version
const appVersioning = document.getElementById('application')
appVersioning.innerHTML = appVersion

// Open site
const homeURL = document.getElementById('site')
homeURL.addEventListener('click', (e) => {
    e.preventDefault
    shell.openExternal("https://www.google.com/")
})

Jawaban #1

Setelah beberapa pencarian dan percobaan, saya pikir saya akhirnya menemukan cara untuk mengirim versi aplikasi saya dari package.json ke main lalu ke renderer. Masalah saya ada di app.on saya yang tidak menyertakan dom-ready yang membantu setelah membaca IPC Communication not working between Electron and window:

main.js:

const appVersion = process.env.npm_package_version

app.on('ready', () => {
  mainWindow.createWindow()
  Menu.setApplicationMenu(mainMenu)

  // Send version to renderer
  mainWindow.win.webContents.on('dom-ready', () => {
    console.log(`Trying to send app version to renderer: ${appVersion}`)
    mainWindow.win.webContents.send('app-version', appVersion)
  })
})

renderer.js:

ipcRenderer.on('app-version', (event, args) => {
    const appVersion = document.getElementById('app_version')
    console.log(`Node version is ${args}`)
    appVersion.innerHTML += args
})

index.html:

<div id="app_version"></div>

Mungkin ada cara yang lebih baik untuk melakukan ini, tetapi setelah penelitian lebih lanjut saya membaca:

• Electron - Cara mengetahui kapan jendela renderer siap
• dom-ready dari instance-events

dan ini berhasil, tetapi langkah selanjutnya adalah melihat apakah mengambil process.env merupakan praktik keamanan yang baik. Saya berharap bisa melihat jawaban lain tentang pendekatan yang mungkin lebih baik jika ada.

Jawaban #2

Sebelum menjawab pertanyaan Anda, melihat pesan yang Anda kirim ke renderer (jika apa yang ingin Anda lakukan adalah mengirim versi aplikasi Anda ke proses render) itu dapat dilakukan dengan app.getVersion. Dari proses utama Anda, Anda harus mengatur versi aplikasi dengan app.setVersion("1.0") dan kemudian dari proses render Anda harus melakukan ini

const { remote: { app } } = require("electron");
app.getVersion();

Untuk pertanyaan Anda yang sebenarnya mainWindow.createWindow() perlu mengembalikan sebuah instance dari BrowserWindow (melihat kode Anda, Anda tidak mengembalikannya dan juga tidak membaca objek properti win yang Anda tetapkan pada mainWindow.js). Jika Anda ingin tetap menggunakan kode saat ini dalam pertanyaan Anda, Anda harus melakukan ini

mainWindow.win.webContents.send(...)

atau Anda harus melakukan ini dari

mainWindow.js

// Modules
const { BrowserWindow } = require('electron')

// export mainWindow
exports.createWindow = () => {

    // BrowserWindow options
    // https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
    const win = new BrowserWindow({
        minWidth: 400,
        minHeight: 400,
        frame: false,
        webPreferences: {
            nodeIntegration: true,
            backgroundThrottling: false
        }
    })

    // Devtools
    win.webContents.openDevTools()

    // Load main window content
    win.loadURL(`file://${__dirname}/index.html`)

    // Handle window closed
    win.on('closed', () => {
        this.win = null
    })
    return win;
}

main.js

const { app, ipcMain, Menu }  = require('electron')
const appVersion = process.env.npm_package_version
const mainWindow = require('./renderer/mainWindow')

app.on('ready', () => {
    const win = mainWindow.createWindow(),
    console.log(`Trying to send app version to renderer: ${appVersion}`),
    win.webContents.send('app-version', appVersion),  
    Menu.setApplicationMenu(mainMenu)
})