Question

我正在搞乱电子，我正在尝试做的事情之一是监视目录以进行文件更改，并将通过IPC更改为浏览器窗口的文件的完整路径发送到渲染器。我知道文件监视器正在工作，因为它正在登录到控制台，但路径从未进入浏览器窗口。

在渲染器中放置日志记录行永远不会记录，远程调试和单步执行代码，我可以看到它永远不会触发渲染器。

有什么想法吗？我是这个javascript的新手，所以它可能是我想念的简单东西。提前谢谢！

main.js：

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const ipc = electron.ipcMain
const watchfiles = require('./watchfiles')
const windows = []

app.on('ready', _ => {
    [1].forEach(_ => {   
        let win = new BrowserWindow({
            height: 400,
            width: 400
    })

    win.loadURL(`file://${__dirname}/watchfiles.html`)


    win.on('closed', _ => {
    mainWindow = null
})
    windows.push(win)
})
})

ipc.on('filewatch-start', _ => {
    //Log
    console.log('Filewatch started')
    watchfiles(fullPath => {
        windows.forEach(win => {
            win.webContents.send('changedfiles', fullPath)
        })
    })
})

renderer.js：

const electron = require('electron')

const ipc = electron.ipcRenderer

document.getElementById('start').addEventListener('click', _ =>{
    ipc.send('filewatch-start')
})

ipc.on('changedfiles', (event, message) => {
document.getElementById('changedfiles').innerHTML = message
})

watchfiles.js：

module.exports = function watchfiles(watchr) {

    // Import the watching library
var watchr = require('watchr')

// Define our watching parameters
var path = process.cwd()
function listener (changeType, fullPath, currentStat, previousStat) {
    switch ( changeType ) {
        case 'update':
            console.log('the file', fullPath, 'was updated', currentStat, previousStat)
            break
        case 'create':
            console.log('the file', fullPath, 'was created', currentStat)
            break
    }
}
function next (err) {
    if ( err )  return console.log('watch failed on', path, 'with error', err)
    console.log('watch successful on', path)
}

// Watch the path with the change listener and completion callback
var stalker = watchr.open(path, listener, next)

// Close the stalker of the watcher
//stalker.close()
}

watchfile.html：

<html>
    <head>
        <link rel="stylesheet" href="watchfiles.css" />
    </head>
    <body>
        <div id="container">
        <h1 class="title">Watching files:</h1>
        <div class="watchfiles" id="changedfiles"></div>
        <button class="btn" id="start">Start</button>
        </div>
        <script>require('./renderer')</script>
    </body>
</html>

Answer 1

仅关于IPC通信，这个更简单的版本可以工作：

<强> main.js

const { app, ipcMain, BrowserWindow } = require('electron')
const windows = []

app.on('ready', _ => {
  /* ... */
})
ipcMain.on('filewatch-start', _ => {
  console.log('Filewatch started')
  windows.forEach(win => {
    win.webContents.send('changedfiles', 'examplePath')
  })
})

<强> renderer.js

const { ipcRenderer } = require('electron')

window.onload = () => {
  document.getElementById('start').addEventListener('click', _ =>{
    ipcRenderer.send('filewatch-start')
  })
  ipcRenderer.on('changedfiles', (event, message) => {
    document.getElementById('changedfiles').innerHTML = message
  }) 
}

<强> watchfile.html

<html>
  <head>
    <script type="text/javascript" src="./renderer.js"></script>
  </head>
  <body>
    <div id="container">
      <h1 class="title">Watching files:</h1>
      <div class="watchfiles" id="changedfiles" />
      <button class="btn" id="start">Start</button>
    </div>
  </body>
</html>

关于整体设计，您可以在watchfiles.js中完成main.js的工作，无需将它们分开：

main.js （精简版）

const { app, ipcMain, BrowserWindow } = require('electron')
const watchr = require('watchr')
const path = process.cwd()
let windows = []
let stalker = null

const listener = (changeType, fullPath, currentStat, previousStat) => {
  var msg = ''
  console.log('change detected: ', changeType, currentStat, previousStat)
  switch ( changeType ) {
    case 'update':
      msg = 'the file' + fullPath + ' was updated'
      break
    case 'create':
      msg = 'the file' + fullPath + ' was created'
      break
  }
  windows.forEach(win => {
    win.webContents.send('changedfiles', msg)
  })
}
const next = (err) => {
    if ( err )  return console.log('watch failed on', path, 'with error', err)
    console.log('watch successful on', path)
}
app.on('ready', () => {
  [1].forEach(() => {
    let win = new BrowserWindow({
      height: 400,
      width: 400
    })
    win.loadURL(`file://${__dirname}/watchfile.html`)
    win.on('closed', _ => {
      mainWindow = null
    })
    windows.push(win)
  })
})
app.on('quit', () => {
  if (stalker) stalker.close()
})
ipcMain.on('filewatch-start', _ => {
  console.log('Filewatch started')
  if (!stalker) {
    stalker = watchr.open(path, listener, next)
  }
})

无法将IPC消息传递给浏览器窗口

1 个答案: