深刻浅出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对象来对页面作具体的业务功能，如打开一个页面进行截屏等操做。

 

 

 

 

五. 页面建立流程图