Chrome Headless

什么是Chrome Headless

Headless Chrome 是 Chrome 浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有 Chrome 支持的特性运行你的程序,简而言之，除了没有图形界面，headless chrome具有所有现代浏览器的特性，可以像在其他现代浏览器里一样渲染目标网页，并能进行网页截图，获取cookie，获取html等操作。 而对于写爬虫的同学，很多都会面临都一个问题，那就是数据都是通过动态渲染，甚至是加密得到的，普通的分析接口模式早已无法满足需求，因此我们引入Chrome Headless 来解决数据渲染问题。

部署 Chrome Headless

因为环境部署不是本文的重点，因此我们直接推荐docker。

  1. docker pull alpeware/chrome-headless-trunk
  2. docker run -d -p 9222:9222 alpeware/chrome-headless-trunk

访问debug 地址即可得到接口信息

  1. curl http://{HOST}:9222/json

以下例子中，{HOST}定义的IP主机响

驱动Chrome Headless

Chrome Headless 可以通过websocket协议进行远程驱动debug。首先我们引入easyswoole的websocket客户端。

  1. composer require easyswoole/http-client

我们以网站 https://datacenter.jin10.com/price 为例子，我们打开可以发现，里面的数据都是通过websocket实时刷新的，这个时候，通过传统手段抓接口的手段，是很难实现的。模拟实现如下：

  1. use EasySwoole\HttpClient\HttpClient;
  2. use EasySwoole\Spl\SplBean;
  3. use Swoole\WebSocket\Frame;
  5. static $i = 0;
  7. //定义命令bean,具体协议格式可以看 Chrome Headless 文档
  9. class Command extends SplBean{
  10.     protected $method;
  11.     protected $id;
  12.     protected $params;
  13.     protected function initialize(): void
  14.     {
  15.         if(empty($this->id)){
  16.             global $i;
  17.             $i++;
  18.             $this->id = $i;
  19.         }
  20.     }
  21. }
  22. //用websocket协议去驱动Chrome Headless
  23. go(function (){
  24.     $targetUrl = 'https://datacenter.jin10.com/price';
  25.     $ch = curl_init('http://{HOST}:9222/json');
  26.     curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
  27.     $data = json_decode( curl_exec($ch) ,true);
  28.     $client = new HttpClient($data[0]['webSocketDebuggerUrl']);
  29.     if($client->upgrade()){
  30.         //打开URL
  31.         $command = new Command([
  32.             'method'=>'Page.navigate',
  33.             'params'=>[
  34.                 'url'=>$targetUrl
  35.             ]
  36.         ]);
  37.         $client->getClient()->push($command->__toString());
  38.         $client->recv(1);
  39.         //模拟等待渲染
  40.         \co::sleep(2);
  41.         //实现 js 语句
  42.         $command = new Command([
  43.             'method'=>'Runtime.evaluate',
  44.             'params'=>[
  45.                 'expression'=>"var p = document.querySelector('#J_pricewall > div:nth-child(1) > ul > li:nth-child(1)').innerHTML;p;"
  46.             ]
  47.         ]);
  48.         $client->getClient()->push($command->__toString());
  49.         //此处就可以得到渲染后的数据了
  50.         $data = json_decode($client->recv()->data,true)['result']['result']['value'];
  51.         var_dump($data);
  53.     }else{
  54.         var_dump('handshake fail');
  55.     }
  56. });

以上教程仅供学习之用，请勿用于非法用途