文章/答案/技术大牛

发布

社区首页 >问答首页 >无法将IPC消息传递给浏览器窗口

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

Stack Overflow用户

提问于 2017-04-16 19:00:00

回答 1查看 1K关注 0票数 1

我在乱搞电子，我想做的事情之一就是监视一个目录中的文件更改，并将文件的全部路径通过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>

javascript

node.js

electron

回答 1

Stack Overflow用户

发布于 2017-04-18 09:12:20

仅对于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)
  }
})

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43440933

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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