深入浅出ghostbuster剖析NodeJS与PhantomJS的通讯机制

深入浅出ghostbuster剖析NodeJS与PhantomJS的通讯机制

蔡建良 2013-11-14

一. 让我们开始吧

通过命令行来执行

1) 进行命令窗口： cmd

2) 进入resources-requested.js 所在目录:

cd 你的目录\ghostbuster\ghostbuster-master\tests

3) 执行nodejs代码: node resources-requested.js

执行成功后，会在tests目录下会生成一个google.png图片。

resources-requested.js

这是一个nodejs的主文件，调用ghostbuster.js模块，用于对网页进行操作，代码如下：

ghostbuster.js

这是一个nodejs的文件，导出一个spawn方法。代码如下。

bridge.js

这是一个phantomjs的文件，代码如下。

代码下载: http://download.csdn.net/detail/janehlp/6552571

二. 代码解析

ghostbuster.spawn方法传入两个参数，一个是端口号8089,另一个是匿名的回调函数function(phantom){….}，回调函数在ghostbuster.spawn方法内部被调用，调用时机是在socket连接监听事件被触发时发生。如下图所示：

谁来触发socket连接事件，这个当然是socket客户端。这是通讯最核心的地方。如果连接事件无法被触发，那回调函数就不会被执行。nodejs与phantomjs也无法进行通讯。

三. 触发socket连接事件的真相

1) ghostbuster.spawn方法通过child_process模块的spawn方法调用phantomjs命令来执行bridge.js代码。phantomjs命令是一个c++写的exe文件，该文件目录必须在环境变量PATH中。

2) spawn(“phantomjs”,[bridge,port]执行全过程

这里的port是传入bridge.js中的参数。

注意：bridge.js代码是由phantomjs解析执行，而ghostbuster.js是由nodejs解析执行，不要搞混了。两者的内置模块是不相同的，不能混合使用。

webpage、fs、system是phantomjs内置模块。

bridge.js代码首先先会创建一个页面变量controlpage，并打开http://127.0.0.1:8089网址。

这个就好像你用浏览器打开一个新的页面，并在地址栏中输入网址http://127.0.0.1:8089。

由于前面ghostbuster.js已创建了一个http服务，监听端口是8089。因此http://127.0.0.1:8089由ghostbuster.js中的http服务来响应，响应代码如下图：

ghostbuster.js中的http服务响应http://127.0.0.1:8089请求，并返回一个text/html格式的网页内容。网页内容来自conrolPage变量，该变量由getControlPage()方法赋值。

getControlPage()方法返回什么呢？

nodejs与phantomjs通过websocket来进行通讯。它们之间沟通的桥梁客户端页面，客户端页面相当于一个client.html文件。这个文件的内容如下:

getControlPage()方法就是返回上面这个client.html的内容，方法如下图所示:

还是回到bridge.js代码中来，当phantomjs执行bridge.js，会生成一个类似client.html的页面。

而这个页面中采用了socket.io来与服务端建立websocket连接，从而实现了与nodejs的通讯。

client.html执行如下脚本与node服务端连接，连接成功后会触发connection事件，回调函数也会被执行。

注意：ghostbuster.js就是所谓的服务端。

我们再来看看ghostbuster.js中连接事件被触发后回调函数的样子。

四. 页面创建完整过程

callback(p)执行的是resources-requested.js中的回调方法function(phantom){…}。

function(phantom){…}方法使用ghostbuster中p对象的createWebPage来创建页面。

操作网页之前必须先创建一个空白页面，然后再打开网址并进行其它操作。

function(phantom)这个方法中的参数phantom是ghostbuster.js中的变量p。p这个对象封装了phantomjs命令。让我们看看对象p封装了哪些方法。

对象p封装了3个属性和5个方法。其中createWebPage是用于创建页面。

让我们更深入了解一下创建页面的完整过程：

1) resources-requested.js执行p对象中的createWebPage方法。

2) ghostbusert.js执行p. createWebPage方法,并调用了request方法。

参数说明: properties为{settings:{loadImages:true}}，callback为function(page){…}。

3) ghostbusert.js执行request方法，调用socket发出cmd命令。

参数说明:args为[“createWebPage”,properties]，callback为function(page){…}，cbId为空。

args.splice(0,0,cbId); 是指从第0个位置开始插入 cbId，即回调函数的索引。

将回调函数缓存到requests数组，后面responseHandler方法还需要用到。

4) client.html页面接收到cmd命令，并执行alert(msg)方法。

参数说明: msg为[cbId,“createWebPage”,properties]

5) bridge.js监听controlpage页面的alert事件，并执行createWebPage(msg)方法。

参数说明: message为[cbId,“createWebPage”,properties]

6) bridge.js执行createWebPage(msg)方法创建页面对象，并调用respond方法返回信息。

参数说明: req为[cbId,“createWebPage”,properties]数组对象。

req[0]为cbId。index为页面索引。

7) bridge.js执行respond(args)方法通过页面的evaluate方法发送socket命令向nodejs服务端发送响应信息。

参数说明: args为[cbId,“createWebPage”,index]

8) ghostbuster.js通过socket.on(“res”,responseHandler)对res命令设置监听处理responseHandler。

参数说明:response为字符串，值为[cbId,“createWebPage”,index]。

cb为resources-requested.js中的回调函数function(page) {…}。res为页面索引index。

WebPage方法在ghostbuster.js中定义如下:

9) resources-requested.js的回调函数function(page) {…}。

终于又回到主程序来了，这时我们可以通过WebPage对象来对页面做具体的业务功能，如打开一个页面进行截屏等操作。

五. 页面创建流程图