读书频道 > 网站 > 网页设计 > HTML5敏捷实践
添加实时更新功能
13-11-27    奋斗的小年轻
收藏    我要投稿   

本文所属图书 > HTML5敏捷实践

《HTML5敏捷实践》共分10章,包括了HTML5中的语义化、新的样式、多媒体支持、新的图形实现方式、更易用交互功能、浏览器客户端存储、地理定位、Web Worker API、Node js 服务器端开发等方面。贯穿全书,作者都立即去当当网订购

为了实现实时更新好像还需要做很多工作。但事实上给慈善捐赠进度指示器添加实时更新功能非常简单。

首先在页面上添加Pusher JavaScript类库:
  <script src="http://js.pusher.com/1.12/pusher.min.js"></script>

通过创建一个新的Pusher 实例并传入应用的key,我们和 Pusher 建立连接(需要注册一个免费的 Pusher 账号)。还需要订阅一个公开的 donations-channel,绑定 new_donation事件。每当有新捐赠就会触发这个事件。事件本身包含捐赠者、捐赠额和总金额。相关的JSON 值如下:
{
  "who":"Phil Leggetter",
  "howMuch":"20",
  "newTotal":"3020"
}

我们也可以创建animateDonation函数调用animateValues 函数实时更新显示新的数值。实现这些功能的代码如下:
      function animateDonation( middleValueEl, currentTotalEl,
currentTotal, newTotal, pixelsPerValue, goalValue ) {
 
        var newHeightPixels  = parseInt(pixelsPerValue * newTotal, 10);
 
 
        return animateValues(middleValueEl, currentTotalEl,
currentTotal, newTotal, goalValue, pixelsPerValue);
      };
 
 
      $(function() {
        var config = setUp('.thermometer-widget');
        addBehaviours(config, false);
 
 
        var pusher = new Pusher("006c79b1fe1700c6c10d");
 
 
        var channel = pusher.subscribe('donations-channel');
 
 
        var animateInterval = null;
       channel.bind('new_donation', function(data) {
        if(animateInterval) {
           clearInterval(animateInterval);
        }
        var newTotal = data.newTotal;
 
 
        var currentTotalValue = getNumericVal(config.el,
'.figures .current_total .value');
 
 
        animateInterval = animateDonation(config.middleValueEl, 
config.currentTotalEl, currentTotalValue, newTotal, 
config.pixelsPerValue, config.goalValue);
 
      });
    });

animateDonation函数返回动画的引用,可以在有更新的时候停止正在播放的动画。这可以防止两个动画同时运行的错误。

现在可以写触发更新的代码了。我们准备使用PHP 和Pusher PHP 库(https://github. com/squeeks/Pusher-PHP)来实现它。但是通过Pusher 服务器端库(http://pusher. com/docs/rest_libraries ),用其他语言实现也很简单。我们要创建一个支持捐赠的web 服务,它只包含“who ”和“how_much ”两个参数。将这些数据存储在MySQL数据库中(在此不讨论这些实现的细节),并更新总的结果。以下是实现这些功能的代码,其中还没有包含关于Pusher 的代码:
 <?php
    require('config.php');
 
 
    $con = mysql_connect("localhost", $db_username, $db_password);
    if (!$con)
    {
      die('Could not connect:' .mysql_error());
    }
    mysql_select_db($db_name, $con);
 
    $who = mysql_real_escape_string($_GET['who']);
    $how_much = mysql_real_escape_string($_GET['how_much']);
 
 
    if( !$who || !how_much || !is_numeric($how_much) ) {
      die('unsupported who and how_much values'); 
    }
 
 
    $running_total = 0;
    $last_update = "SELECT *
FROM $db_tablename ORDER BY id DESC LIMIT 1";
    $result = mysql_query($last_update);
    if($result) {
      $row = mysql_fetch_array($result);
      $running_total = $row['running_total'];
    }
 
 
    $running_total = $running_total + $how_much;
 
 
    $insert_query = "INSERT INTO $db_tablename (who, how_much,
running_total) ";
    $insert_query .= sprintf( "VALUES('%s', %f, %f)", $who,
$how_much, $running_total );
 
 
    $insert_result = mysql_query($insert_query);
    if(!$insert_result) {
      die('insert query failed' .mysql_error());
    }
 
 
    mysql_close($con);
  ?>

config.php include 包含了数据库连接的细节。

现在开始添加实时更新功能。需要包含Pusher 的PHP 库,创建一个Pusher 实例,将需要发送的数据包含在数组中,并调用$pusher->trigger() 来触发该事件。传入Pusher 构建器的参数包含在config.php 中。
require('Pusher.php');
 
 
$pusher = new Pusher($pusher_key, $pusher_secret, $pusher_app_id);
$channel_name = 'donations-channel';
 
 $values = array('who' => $who, 'howMuch' => $how_much, 'newTotal' =>
$running_total);
 
 
$pusher->trigger($channel_name, 'new_donation', $values);

这样就完成了。触发实时更新事件很简单。由于将大部分工作放到了客户端,所以捐赠进度指示器可以进行实时更新了。由于PHP 通过GET 请求获取值,所以可以通过访问donate.php 页面来测试,传入需要的参数:
donate.php?who=Phil&how_much=100

下面是一个表单的例子,提交给之前创建的 PHP 文件,还有一些 JavaScript 代码实现了表单的Ajax 提交。
 <form id="donate_form" action="donate.php">
 
 
  <label for="who">Name</label><input type="text" value="Anon"
name="who" /><br />
 
  <label for="how_much">How Much</label><input type="number"
value="100.00" name="how_much" /><br />
 
  <label for="reset_total">Reset?</label><input name="reset_total" 
type="checkbox" value="1" />
 
 <input type=" submit" value="Donate!"/>
 
 
</form>
 
 
<script>
 
 
$(function() {
$( '#donate_form' ).submit(function() {
  var form = $(this);
  var values = form.serialize();
  $.ajax({
    url:'donate.php',
    data:values
  });
  return false;
 });
});
 
 
</script>

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站