实现一个简单的服务端推送方案-实例篇Push

原创 2013年12月05日 20:57:32

这篇讲Push,即浏览器客户端被动等待无须轮循,服务器连不间断的向前端推送服务器当前时间。


客户端代码,JS库为prototype.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Comet demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="prototype.js"></script>
  </head>
  <body>
    <div id="content">The server time will be shown here</div>

<script type="text/javascript">
var comet = {
  connection   : false,
  iframediv    : false,
  initialize: function() {
    if (navigator.appVersion.indexOf("MSIE") != -1) {
      // For IE browsers
      comet.connection = new ActiveXObject("htmlfile");
      comet.connection.open();
      comet.connection.write("<html>");
      comet.connection.write("<script>document.domain = '"+document.domain+"'");
      comet.connection.write("</html>");              
      comet.connection.close();
      comet.iframediv = comet.connection.createElement("div");
      comet.connection.body.appendChild(comet.iframediv);
      comet.connection.parentWindow.comet = comet;
      comet.iframediv.innerHTML = "<iframe id='comet_iframe' src='./backend.php'></iframe>";      
    } else if (navigator.appVersion.indexOf("KHTML") != -1) {
      // for KHTML browsers
      comet.connection = document.createElement('iframe');
      comet.connection.setAttribute('id',     'comet_iframe');
      comet.connection.setAttribute('src',    './backend.php');
      with (comet.connection.style) {
        position   = "absolute";
        left       = top   = "-100px";
        height     = width = "1px";
        visibility = "hidden";
      }
      document.body.appendChild(comet.connection);
    } else {   
      // For other browser (Firefox...)
      comet.connection = document.createElement('iframe');
      comet.connection.setAttribute('id',     'comet_iframe');
      with (comet.connection.style) {
        left       = top   = "-100px";
        height     = width = "1px";
        visibility = "hidden";
        display    = 'none';
      }
      comet.iframediv = document.createElement('iframe');
      comet.iframediv.setAttribute('src', './backend.php');
      comet.connection.appendChild(comet.iframediv);
      document.body.appendChild(comet.connection);
    }
  },
  // this function will be called from backend.php  
  printServerTime: function (time) {
    $('content').innerHTML = time;
  },
  onUnload: function() {
    if (comet.connection) {
      comet.connection = false; // release the iframe to prevent problems with IE when reloading the page
    }
  }
}
Event.observe(window, "load",   comet.initialize);
Event.observe(window, "unload", comet.onUnload);
</script>

</body>
</html>


服务器PHP代码,backend.php:

<?php

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
flush();

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Comet php backend</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<script type="text/javascript">
  // KHTML browser don't share javascripts between iframes
  var is_khtml = navigator.appName.match("Konqueror") || navigator.appVersion.match("KHTML");
  if (is_khtml)
  {
    var prototypejs = document.createElement('script');
    prototypejs.setAttribute('type','text/javascript');
    prototypejs.setAttribute('src','prototype.js');
    var head = document.getElementsByTagName('head');
    head[0].appendChild(prototypejs);
  }
  // load the comet object
  var comet = window.parent.comet;
</script>

<?php
  echo '<script type="text/javascript">';
  echo 'comet.printServerTime('.time().');';
  echo '</script>';
  print str_pad("",10000);  //在输出前必须输出足够的字符才会显示到浏览器
  flush(); // used to send the echoed data to the client
while(1) {
  $ywparam = time();
  error_log(date("[Y-m-d H:i:s]")." > ".$ywparam."\n", 3 , "/usr/local/apache2219/logs/php_log");
  echo '<script type="text/javascript">';
  echo 'comet.printServerTime('.time().');';
  echo '</script>';
  //print str_pad("",10000);  //在输出前必须输出足够的字符才会显示到浏览器
  ob_flush();  //或者向上一条语句写够4096个字节以上
  flush(); // used to send the echoed data to the client
  sleep(1); // a little break to unload the server CPU
}
?>
</body>
</html>


相关文章推荐

实现一个简单的服务端推送方案-实例篇Polling

前面讲过一篇《实现一个简单的服务端推方案》,这里讲实现的实例。 这篇讲Polling,即浏览器客户端长轮循,后端PHP短轮循数据库,功能是从数据库表读取最新的记录并显示。 客户端代码,JS库为pr...
  • xtjsxtj
  • xtjsxtj
  • 2013年12月05日 20:48
  • 1779

实现一个简单的服务端推送方案-实例篇Polling(服务端阻塞读,SLEEP方式读MYSQL)

前面讲过一篇《实现一个简单的服务端推送方案-实例篇Polling(服务端阻塞读)》,那篇文章服务端利用Gearman队列来实现阻塞读,这篇服务器端用原生MySQL的Sleep函数来实现阻塞读。 ...
  • xtjsxtj
  • xtjsxtj
  • 2013年12月07日 09:35
  • 1490

APP消息推送(APP Push)解决方案-服务端工作逻辑和实现

APP 推送概述: App推送消息是我们常见的一种app消息提醒方式。 我们的实现需要第三方的支持,实现方式是后台通过接口将Push请求发送至第三方,第三方实现在App所在设备上的推送。 APP推...
  • MikeLC7
  • MikeLC7
  • 2017年07月10日 18:33
  • 375

研究微信即时通讯的服务端、朋友圈、红包、推送等方案

博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved !即时通信:前端获得消息发送到服务端,服务端处理后通过推送的方式,...

comet4j java服务端推送消息到web页面实例

官网:http://code.google.com/p/comet4j/ 准备工作 下载服务端jar文件 Comet4J目前仅支持Tomcat6、7版本,根据...

极光推送 使用实例 (一)服务端

转载自:http://blog.csdn.net/u014733374/article/details/43560983 最近一直在做后台开发,但心里还是总惦记着Android,感觉...

极光推送 使用实例 (一)服务端

最近一直在做后台开发,但心里还是总惦记着Android,感觉还是Android有意思。正好项目中要用到极光推送,今天抽空来记录下这两天的研究成果。          我们知道iOS有自己的推送服...

极光推送 使用实例 (一)服务端

原文:http://blog.csdn.net/u014733374/article/details/43560983 最近一直在做后台开发,但心里还是总惦记着Andro...

comet4j java服务端推送消息到web页面实例

对于页面一直监控,以前都是使用ajax请求即可,但是小并发这做法没多大问题,但是到了大并发就不太合适,如果不想自己写线程来操控就可以偷懒找一些插件,例如comet4j 下面我来演示下如何使用这个...

comet4j java服务端推送消息到web页面实例

对于页面一直监控,以前都是使用ajax请求即可,但是小并发这做法没多大问题,但是到了大并发就不太合适,如果不想自己写线程来操控就可以偷懒找一些插件,例如comet4j 下面我来演示下如何使用这个...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现一个简单的服务端推送方案-实例篇Push
举报原因:
原因补充:

(最多只允许输入30个字)