您的位置：首页 > 其它

Electron: From Beginner to Pro-6.2 同步IPC通信

2018-03-19 23:20 519 查看

Synchronous IPC Messaging

我们先为按钮和响应字段定义简单样式，样式效果如图6.2所示。

在

index.html

中将

<head>

标签内插入、：

<style>
p {
font-family: sans-serif;
border: 1px solid #ccc;
border-radius: 4px;
padding: .5rem;
background-color: #ddd;
box-shadow: inset 0 0 2px #aaa;
}

button {
color: rebeccapurple;
font-family: sans-serif;
font-weight: bold;
padding: .5rem;
background-color: #ccc;
box-shadow: 2px 2px 2px #ccc;
}
</style>

然后将

<body>

标签内插入：

<button id="sendSyncMsgBtn">Ping Main Process</button>
<p id="syncReply">Awaiting response</p>

Figure 6-2. Our Electron application with our button

然后在

renderer.js

中来添加按钮被点击时触发的的代码和接受响应的代码。

首先需要导入相应的

IPC

模块。由于代码将被在渲染进程中执行，所以我们要用到

IPCRenderer

模块：

const ipc = require('electron').ipcRenderer

接着需要引用按钮：

const syncMsgBtn = document.getElementById('sendSyncMsgBtn')

为按钮引用添加监听器：

syncMsgBtn.addEventListener('click', function () {

})

正如牛顿第三定律中力与反作用力的依存关系，IPC模块的每个动作都要有一个相对的事件与之对应。对于每个IPC发送，必须有相对应的接受方法。

基本框架如下：

ipcRenderer.sendSync(channel, [, arg1][, arg2], [,...])

其中

channel

值是一个被当作消息标识符的字符串，而配合使用的方法会监听这个标识符。你也可以使用参数发送附加消息，消息可以是任何JavaScript原生类型（字符串、数值、数组和对象类型）。我们在回调函数中发送贝尔的名言：

syncMsgBtn.addEventListener('click', function () {
const reply = ipc.sendSync('synchronous', 'Mr. Watson, come here.')
})

每次使用IPC事件时，一旦我们编写了发送函数，就一定要在另一个进程中写相应的桩函数（stub function）。所以我们要切换到主进程对应的

main.js

中。

主进程中同样要导入相应IPC模块，也就是

ipcMain

：

const ipc = electron.ipcMain

接着就要写接受函数了。这个函数直截了当定义了应当监听的

channel

，然后用一个回调函数去响应。

ipc.on('synchronous-message', function (event, arg) {

})

Note

编写Electron应用时我们通常要同时打开多个文件，经常忘记保存所有文件会导致错误。

回调函数有两个参数：对象

event

和参数

arg

。虽然这个参数已经包含了发送函数传递的数据，但是event对象包含了一些特殊功能。event对象有响应发送者的内置方法，即不必编写另外一组用来传递响应监听器和接收器。

在同步IPC模块中，这个方法是：

event.returnVlaue

返回值可以是一个字符串、数值或对象。例如返回一个字符串：

ipc.on('synchronous-message', function (event, arg) {
event.returnValue = 'I heard you!'
})

再次回到

renderer.js

，现在要加入处理上述返回值的代码。从主进程发过来的数据将被保存在变量

reply

中：

syncMsgBtn.addEventListener('click', function () {
const reply = ipc.sendSync('synchronous', 'Mr. Watson, come here.')
console.log(reply)
})

然后构造一个用来显示简单的消息。使用ES6的新特性：

$()

语法，消息可以这么写：

const message = `Synchronous message reply: ${reply}`

你可能没有使用过

$()

语法，它能极大地提高字符串的可读性性。注意要使用反引号

而不是引号，使用反引号能够连接多行字符。

然后后将页面的

innerHTML

替换为消息串：

document.getElementById('syncReply').innerHTML = message

以下是完整代码：

syncMsgBtn.addEventListener('click', function () {
const reply = ipc.sendSync('synchronous', 'Mr. Watson, come here.')
console.log(reply)
const message = `Synchronous message reply: ${reply}`
document.getElementById('syncReply').innerHTML = message
})

保存各文件运行程序。点击按钮，消息就会出现在窗口上：

Figure 6-3. The result of our IPC call being displayed

以上就是IPC同步消息的基本用法，下面就来研究异步消息的使用方式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航