引言
这次, 我们一起通过几个例子, 进一步了解node.js+electron. 三个例子:
1. 搭建一个http服务器, 通过web对服务器进行访问
2. 搭建一个ws服务器, 通过web向服务器发送消息
3. 进程管理, 打开/关闭一个外部进程 例子1: 一个http服务器
1. 部署node.js+electron环境
按步骤完成 electron教程(一): electron的安装和项目的创建 所介绍的内容.
2. 安装http-server
确保你的cmd工作目录为项目根目录.
执行指令:
3. 在main.js中添加http服务器
在main.js的最下方, 添加如下代码:
const httpServer = require('http-server');
httpServer.createServer().listen(8080);
|
在这段代码中:
我们创建了一个 httpServer 对象
const httpServer = require('http-server');
|
这个对象是通过 http-server 模块创建出来的.
使用httpServer对象, 创建一个 http服务器 , 并且监听了 8080端口 .
服务器启动后, 用户就可以通过浏览器来访问我们的服务器了.
4. 启动程序!
执行指令:
在自己的浏览器中，访问 http://localhost:8080/index.html ，就会得到本地的index.html文件
(这是chrome浏览器打开的效果)
例子2: 一个ws服务器
1. 部署node.js+electron环境
node.js+electron教程(一): 安装nodejs和electron
2. 安装ws
确保你的cmd工作目录为项目根目录.
执行指令:
3. 在main.js中添加ws服务器
在main.js的最下方, 添加如下代码:
const WebSocketServer = require('ws').Server;
wss = new WebSocketServer({port: 12122});
wss.on('connection', (ws) => {
console.log('client connected');
ws.on('message', (message) => {
console.log(message);
});
});
|
在这段代码中:
我们创建了一个 WebSocketServer 对象
const WebSocketServer = require('ws').Server;
|
这个对象是通过 ws 模块创建出来的.
使用 WebSocketServer 对象, 创建一个 ws服务器 叫做 wss 对象, 并且监听了 12122端口 .
为wss对象的两个事件分别绑定了回调:
connection 事件, 有客户端连接时, 打印一条日志.
message 事件, 直接将消息打印出来.
4. 在index.html中引入jquery
在 jquery官网 下载jquery库, 将 jquery.min.js 放在 html目录 下的 lib目录 中.
并在index.html的 <head> 和 </head> 块中, 添加如下代码:
<script type="text/javascript" src="./lib/jquery.min.js"></script>
|
5. 在index.html中, 添加一个输入框和按钮
在index.html的 <body> 和 </body> 块中的最下方, 添加如下代码:
<div class="vertical-center">
<div class="container">
<p> </p>
<form role="form" id="chat_form" onsubmit="sendWsMessage(); return false;">
<div class="form-group">
<input class="form-control" type="text" name="message" id="message"
placeholder="Type text to echo in here" value="" />
</div>
<button type="button" id="send" class="btn btn-primary"
onclick="sendWsMessage();">
Send!
</button>
</form>
</div>
</div>
|
在这段代码中:
我们首先定义了一个输入框即表单 form , 该表单包含了 input 元素, 用户可以在该输入框内填写字符, 而html可以通过 message 来获取输入框内的字符.
接着我们定义了一个按钮 button , 在网页中按钮显示为 send! , 并给该按钮的 左键点击事件onclick 绑定了一个函数 onclick="sendWsMessage();" , 当用户左键点击这个 send! 按钮, 就会触发 sendWsMessage() 函数.
6. 在index.html中, 定义ws客户端
在index.html的 <script> 和 </script> 块中的最下方, 添加如下代码:
const ws = new WebSocket("ws://localhost:12122");
|
这段代码中:
我们先实例化了一个 websocket 对象 ws , 其参数为要连接的地址, 这里使用本机 localhost的12122端口 , 如果你是在局域网内启动, 也可以将 localhost 替换为你的内网ip.
7. 在index.html中, 定义按钮的sendWsMessage()函数
在index.html的 <script> 和 </script> 块中的最下方, 添加如下代码:
function sendWsMessage() {
ws.send($('#message').val());
}
|
这段代码中:
我们调用了websocket对象 ws 的 send() 方法, 向目标地址 localhost的12122端口 发送数据, 数据的内容是通过 #message 获取的, 即用户在 输入框 内输入的数据.
前端流程:
当用户点击 send! 按钮, 获取 输入框 内的内容, 通过 ws , 向 localhost的12122端口 发送.
8. 启动
执行指令:
此时的程序界面, 出现了 输入框 和 send! 按钮.
回到cmd中, 发现cmd打印了一条日志
那是因为我们在ws服务器(main.js)中, 添加了如下代码:
wss.on('connection', (ws) => {
console.log('client connected');
|
当程序启动的时候, 自动建立了连接, 所以打印了这条日志.
如果你已经完成了例子1, 并且还没有删除代码的话, 试着再次从浏览器中访问 http://localhost:8080/index.html , 是否又打印出了一条相同的日志?
现在, 我们试试发送消息的功能:
在程序界面的输入框内, 输入一个 Hello electron! , 点击 send!
回到cmd中, 成功打印了日志 Hello electron! .
前端流程:
当用户点击 send! 按钮, 获取 输入框 内的内容, 通过 ws , 向 localhost的12122端口 发送.
后端流程:
当ws服务器收到消息的时候, 直接将消息打印出来. 例子3: 进程管理
1. 部署node.js+electron环境
node.js+electron教程(一): 安装nodejs和electron
2. 在main.js中, 启动一个外部进程
在main.js中, 添加如下代码:
const myChildProccess = require('child_process');
const mySpawn = myChildProccess.spawn(
'e:\\Application\\Notepad++\\notepad++.exe');
|
在这段代码中:
我们创建了一个 myChildProccess 对象
const myChildProccess = require('child_process');
|
这个对象是通过 child_process 模块创建出来的, 该模块主要用于创建子进程.
我们调用这个对象的 spwan() 方法, 启动一个子进程. 该方法接受一个字符串参数, 是子进程的路径, 注意路径的书写方式.
3. 测试
执行命令:
在程序启动后, notepad++也紧跟着启动了, notepad++就是本程序启动的子进程.
electron可以启动子进程, 自然也可以关闭子进程, 不然算什么进程管理?
现在我们关闭程序, 继续进行下一步.
4. 在index.html中, 添加一个按钮, 关闭子进程
在index.html的 <body> 和 </body> 块中的最下方, 添加如下代码:
<button onclick="killChildProcess()">关闭子进程</button>
|
在这段代码中, 我们添加了一个按钮 button , 在网页中按钮显示为 关闭子进程 , 并给该按钮绑定了一个函数 killChildProcess() .
5. 创建renderer.js, 并添加到项目中
在html目录创建一个renderer.js文件
添加如下代码:
function killChildProcess() {
const ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.send('kill-child-now', 'get async message');
}
|
我们定义了 关闭子进程 按钮的点击函数 killChildProcess() , 这个函数只有两行:
在函数的第一行, 创建了一个 ipcRenderer 对象
const ipcRenderer = require('electron').ipcRenderer;
|
这个对象是通过 ipcRenderer 模块创建出来的, w3cschool 是这样解释的:
ipcRenderer 模块是一个 EventEmitter 类的实例. 它提供了有限的方法，你可以从渲染进程向主进程发送同步或异步消息. 也可以收到主进程的响应.
简单的说, main.js是 主进程 , renderes.js是 渲染进程 , 在渲染进程调用 ipcRenderer.send() 方法, 可以发送消息. 在主进程可以收到消息, 如果你给这个消息绑定了回调, 收到消息后, 就会触发回调.
在函数的第二行, 我们发送了 kill-child-now 消息.
现在我们把renderer.js引入到项目之中
和 jquery 相似, 在index.html的 <head> 和 </head> 块中, 添加如下代码:
<script type="text/javascript" src="../dist/renderer.js"></script>
|
6. 在main.js中, 监听消息, 绑定回调
在main.js的最下方, 添加如下代码:
const ipcMain = require('electron').ipcMain;
ipcMain.on('kill-child-now', (e, appUrl)=>{
mySpawn.kill();
});
|
在这段代码中:
我们创建了一个 ipcMain 对象
const ipcMain = require('electron').ipcMain;
|
这个对象是通过 ipcMain 模块创建出来的, w3cschool 是这样解释的:
ipcMain 模块是类 EventEmitter 的实例.当在主进程中使用它的时候，它控制着由渲染进程(web page)发送过来的异步或同步消息.从渲染进程发送过来的消息将触发事件.
简单的说, ipcMain 是使用在主进程中的, 负责监听从渲染进程中发送出来的消息.
( 还记得吗? 渲染进程是通过 ipcRenderer 发送消息的. )
我们用ipcMain对象监听了消息 kill-child-now , 并且绑定了一个回调函数. 一旦收到这个消息, 就会触发这个回调函数.
回调函数只有一行, 简单直接:
关闭在第三步中创建的子进程notepad++.
7. 启动
执行命令:
和之前的测试一样, 在程序启动后, notepad++也紧跟着启动了, notepad++就是本程序启动的子进程.
不一样的是, 程序界面上出现了一个按钮 关闭子进程 . |
