Yun_Bigpipe的使用方法
1. 设计自己系统的接口数据结构
2. 分割各个pagelet
bigpipe与串行的请求时间对比
完整的代码(兼容js渲染与输出前渲染[比如为了seo])
扩展阅读
Faq
展开/折起 - 头部

通过Yun_Bigpipe快速构建bigpipe

bigpipe是一种老技术了,昨天写了一个PHP模块,以方便大家在自己的 系统中使用这种架构技术。

bigpipe的原理这里不再描述,zhiqianmeiiyou看过的可以参考以下链接:

Yun_Bigpipe的使用方法

本文使用的代码文件:bigpipe-demo.tar.gz

yun-lib类库: https://github.com/walu/yun-lib

1. 设计自己系统的接口数据结构

facebook在文章里给出的前后端接口数据结构只有id、html、css、js几部分,但是 它自己的实现中却有很多其它的数据。所以,在设计类库时,我没有把这个地方写死( 第一版给写死了,之后又改了)。

后端产生的数据,最终要通过js推送给前端浏览器。Yun_Bigpipe推送给前端的数据 包括两部分:

模块提供了一个默认的js文件处理数据。接收的数据结构为:{id:**, html:**, css_url:[**], js_url:[**]}。 大家也可以根据自己的项目设计别的数据结构,下面faq部分有使用方法。

2. 分割各个pagelet

这里我们做了4个pagelet,分别如下:

为了模仿真实接口,每个接口都usleep(5000),5毫秒

./layout.html

<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Yun_Bigpipe Demo</title>

        <!--必须引入此JS文件--!>
        <script language='javascript' src='./yun-lib/f1/Yun/Bigpipe/javascript/Yun_Bigpipe.js'></script>

        <!--js处理有一个setHtml之类的操作需要,当然你也可以注册新的函数进去,以摆脱对jquery的依赖-->
        <script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
    </head>
    <body>
        <div id='header'></div>
        <div id='slider'></div>
        <div id='footer'></div>
    </body>
</html>

先下载yun-lib

git clone git://github.com/walu/yun-lib.git

Yun_Bigpipe_Main位于:yun-lib/f1/Yun/Bigpipe

./bigpipe.php

<?php
$time_start = microtime(true);
require "yun-lib/Loader.php";
echo file_get_contents("./layout.html");

$host = "http://127.0.0.1/bigpipe/";//大家自己换成测试目录url

$curl_option = array();//如果你需要的话可以设置,比如post、file等

$processor = new Yun_Bigpipe_Processor_Curl();
$processor->addPagelet('header', $host . 'header.php', $curl_option);
$processor->addPagelet('footer', $host . 'footer.php', $curl_option);
$processor->addPagelet('slider', $host . 'slider.php', $curl_option);

$pipe = new Yun_Bigpipe_Main($processor);
$pipe->executeAndEcho();

echo "\n", microtime(true)-$time_start;

common.php串行访问

<?php
$time_start = microtime(true);
require "yun-lib/Loader.php";
echo file_get_contents("./layout.html");

$host = "http://127.0.0.1/bigpipe/";//大家自己换成测试目录url

$curl_option = array();//如果你需要的话可以设置,比如post、file等

$url = array(
    'header', 'slider', 'footer'
);

foreach ($url as $value) {
    $ch = curl_init($host.$value);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);
    
    $response = json_decode($response, true);
    if (null === $response ) {
        $response = array();
    }
    $data = array('id'=>$header, 'is_last'=>$value=='footer');
    $data = array_merge($response, $data);
    $data = json_encode($data);
    echo "<script language='javascript'>Yun_Bigpipe.onPageletArrive({$data})</script>";
}
echo "\n", microtime(true)-$time_start;

bigpipe与串行的请求时间对比

机器:mac air,只作为对比

bigpipe接口串行接口
0.009979 0.02029
0.008615 0.02022
0.00850 0.02050
0.008095 0.02114

完整的代码(兼容js渲染与输出前渲染[比如为了seo])

<?php
$is_robots = false;
if ($is_robots) {
    ob_start();
}

require "yun-lib/Loader.php";
echo file_get_contents("./layout.html");

$host = "http://127.0.0.1/bigpipe/";//大家自己换成测试目录url

$curl_option = array();//如果你需要的话可以设置,比如post、file等

$processor = new Yun_Bigpipe_Processor_Curl();
$processor->addPagelet('header', $host . 'header.php', $curl_option);
$processor->addPagelet('footer', $host . 'footer.php', $curl_option);
$processor->addPagelet('slider', $host . 'slider.php', $curl_option);

$pipe = new Yun_Bigpipe_Main($processor);
if ($is_robots) {
    $pipe->executeAndModifyOB();
} else {
    $pipe->executeAndEcho();
}

扩展阅读

Faq

未完成,待续

知识共享许可协议 本作品采用知识共享署名 3.0 未本地化版本许可协议进行许可。
comments powered by Disqus