代码改变世界

我的第一个comet长连接例子

2016-02-29 22:27  盛世游侠  阅读(459)  评论(0)  编辑  收藏  举报 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>大家来玩Comet</title>
<script src="../statics/js/jquery-1.9.1.min.js"></script>
<script src="../statics/js/plugins/placeholder.js"></script><!--让IE10以下也支持placeholder-->
<style type="text/css">
#word{width:450px;height:40px;padding:0 10px;border:#ddd 2px solid; line-height:40px\9}
#btn{height:44px; vertical-align:middle;position:relative;top:-2px;+vertical-align:bottom;+top:-1px;}
#content{width:644px;height:300px;+width:720px;margin:0 auto;background:#f7f7f7;padding:10px; overflow:hidden;overflow-y:auto}
.talkCloud{text-align:left;line-height:40px;}


</style>
</head>
<body>
<script type="text/javascript">
$(function(){
    
    /*cookie 操作*/
    var cookieUtil = {
        //获取cookie
        get:function(name){
            var cookieName = encodeURIComponent(name)+"=",
                cookieStart = document.cookie.indexOf(cookieName),
                cookieValue = null;
            
            if(cookieStart>-1){
                var cookieEnd = document.cookie.indexOf(";",cookieStart);
                if(cookieEnd==-1){
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
            }
            return cookieValue;
        },
        
        //设置cookie
        set:function(name,value,expires,path,domain,secure){
            var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
            if(expires instanceof Date){
                cookieText += "; expires="+expires.toGMTString();
            }
            if(path){
                cookieText += "; path=" + path;
            }
            if(domain){
                cookieText += "; domain" + domain;
            }
            if(secure){
                cookieText += "; secure";
            }
            document.cookie = cookieText;
            return value;
        },
        
        //删除cookie
        unset:function(name,path,domain,secure){
            this.set(name,"",new Date(0),path,domain,secure);    
        }
    };
    window.cookieUtil = cookieUtil;
    
    
    
    //comet长连接例子
    var clickTimes = 0;//点击计数
    var timestamp = 0;//文件时间戳
    var url = 'server.php';//后端服务器脚本地址
    var noerror = true;
    var ajax;
 
    function handleResponse(response){
        $('#content').append('<div class="talkCloud">' + response['msg'] + '</div>');
        $("#content").scrollTop($("#content")[0].scrollHeight);
    }
    function connect() {
        ajax = $.ajax(url, {
            type: 'get',
            data: { 'timestamp' : timestamp,'uname' : cookieUtil.get("uname")},
            success: function(transport) {
                eval('var response = '+transport);
                timestamp = response['timestamp'];
                handleResponse(response);
                noerror = true;//判断ajax发送成功的回调函数是否执行成功的标志;
            },
            complete: function(transport) {
                (!noerror) && setTimeout(function(){ connect() }, 5000) || connect();
                noerror = false;//执行完一次完成回调函数是否执行成功的标志
            }
        });
    }
 
    function doRequest(request) {
        $.ajax(url, {
            type: 'get',
            data: { 'msg' : request,'uname':cookieUtil.get("uname") }
        });
    };
    
    $('#cometForm').on("submit",function(){
        clickTimes++;
        if(clickTimes == 1){
            cookieUtil.set("uname",$('#word').val(),'','','','');
        };
        doRequest($('#word').val());
        $('#word').val('');
        return false;
    });
    
    
    connect();

});
</script>
<center>
<h2>大家来玩长连接</h2>
<div id="content"></div>
<div style="margin: 5px 0;">
<form action="javascript:void(0);" id="cometForm" method="get">
<input id="word" name="word" type="text" value="" placeholder="第一次请输入你自己的姓名">
<input name="submit" type="submit" id="btn" value="我就是个摆设，其实敲回车也可以提交">
 
</form></div>
</center>
</body>
</html>
<?php
 
$filename  = 'F:\phpStudy\WWW\boss\cometDemo\data.txt';

// 消息都储存在这个文件中
$msg = isset($_GET['msg']) ? $_GET['msg'] : '';
$uname = isset($_GET['uname']) ? $_GET['uname']:'';

if ($msg != ''){
        
    
    //fopen()方法：如果文件不存在，则创建，如果存在则打开文件。它的第二个参数是打开的文件的模式，w表示覆盖式只写，详见《PHP高程设计》183页
//    $fn = fopen($filename,'w');
//    fwrite($fn,$uname.": ".$msg);
//    fclose($fn);
        file_put_contents($filename,$uname.": ".$msg); //此方法已不建议使用
    
    
    //    file_put_contents($filename,"您的名字是: ".$msg);
    
    


    
}

    // 不停的循环，直到储存消息的文件被修改
    $lastmodif    = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
    $currentmodif = filemtime($filename);
    while ($currentmodif <= $lastmodif){ // 如果数据文件已经被修改
        usleep(100000); // 100ms暂停 缓解CPU压力
        clearstatcache(); //清除缓存信息
        $currentmodif = filemtime($filename);
    }
 
    // 返回json数组
    $response = array();
    $response['msg']       = file_get_contents($filename);
    $response['timestamp'] = $currentmodif;
    echo json_encode($response);
    flush();

 
?>
placeholder.js 这个东西也不错，贴在这里，省的去找了：
(function($) {  
  /** 
   * http://blog.csdn.net/mycwq/ 
   * 2012/11/28 15:12 
   */  
  
  var placeholderfriend = {  
    focus: function(s) {  
      s = $(s).hide().prev().show().focus();  
      var idValue = s.attr("id");  
      if (idValue) {  
        s.attr("id", idValue.replace("placeholderfriend", ""));  
      }  
      var clsValue = s.attr("class");  
      if (clsValue) {  
        s.attr("class", clsValue.replace("placeholderfriend", ""));  
      }  
    }  
  }  
  
  //判断是否支持placeholder  
  function isPlaceholer() {  
    var input = document.createElement('input');  
    return "placeholder" in input;  
  }  
  //不支持的代码  
  if (!isPlaceholer()) {  
    $(function() {  
  
      var form = $(this);  
  
      //遍历所有文本框，添加placeholder模拟事件  
      var elements = form.find("input[type='text'][placeholder]");  
      elements.each(function() {  
        var s = $(this);  
        var pValue = s.attr("placeholder");  
        var sValue = s.val();  
        if (pValue) {  
          if (sValue == '') {  
            s.val(pValue);  
          }  
        }  
      });  
  
      elements.focus(function() {  
        var s = $(this);  
        var pValue = s.attr("placeholder");  
        var sValue = s.val();  
        if (sValue && pValue) {  
          if (sValue == pValue) {  
            s.val('');  
          }  
        }  
      });  
  
      elements.blur(function() {  
        var s = $(this);  
        var pValue = s.attr("placeholder");  
        var sValue = s.val();  
        if (!sValue) {  
          s.val(pValue);  
        }  
      });  
  
      //遍历所有密码框，添加placeholder模拟事件  
      var elementsPass = form.find("input[type='password'][placeholder]");  
      elementsPass.each(function(i) {  
        var s = $(this);  
        var pValue = s.attr("placeholder");  
        var sValue = s.val();
        if (pValue) {  
          if (sValue == '') {  
            //DOM不支持type的修改，需要复制密码框属性，生成新的DOM  
            var html = this.outerHTML || "";  
            html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend")  
              .replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")  
              .replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue  
              + "' " + "onfocus='placeholderfriendfocus(this);' ");  
            var idValue = s.attr("id");
            if (idValue) {
              s.attr("id", idValue + "placeholderfriend");
            }
            var clsValue = s.attr("class");  
            if (clsValue) {  
              s.attr("class", clsValue + "placeholderfriend");  
            }  
            s.hide();  
            s.after(html);  
          }  
        }  
      });  
  
      elementsPass.blur(function() {  
        var s = $(this);  
        var sValue = s.val();  
        if (sValue == '') {  
          var idValue = s.attr("id");  
          if (idValue) {  
            s.attr("id", idValue + "placeholderfriend");  
          }  
          var clsValue = s.attr("class");  
          if (clsValue) {  
            s.attr("class", clsValue + "placeholderfriend");  
          }  
          s.hide().next().show();  
        }  
      });  
  
    });  
  }  
  window.placeholderfriendfocus = placeholderfriend.focus;  
})(jQuery);

HTML5 shiv也贴上来：

/*
 HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed.g
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
window._browserIsNotSupported = true;
if(window.attachEvent){
  window.attachEvent('onload', function(){
    var lowestSupportedIEVersion = 8;
    if(window.LOWEST_IE_VERSION != undefined){
      lowestSupportedIEVersion = window.LOWEST_IE_VERSION;
    }
    var el = document.createElement('div'),
        elStyle = el.style,
        docBody = document.getElementsByTagName('body')[0],
        linkStyle = 'color:#06F;text-decoration: underline;';
    el.innerHTML =    '尊敬的小伙伴们：<br />'+
        '使用慧业网Boss/CRM系统控制台需要安装Internet Explorer 8或更新版本的浏览器，'+
        '请<a href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" style="'+linkStyle+'" target="_blank">下载安装IE' + lowestSupportedIEVersion + '</a>（或更新）。'+
        '也可以在其他浏览器，'+
        '如<a href="http://rj.baidu.com/soft/detail/14744.html" style="'+linkStyle+'" target="_blank">Chrome</a>'+
        '或<a href="http://www.firefox.com.cn/download/" style="'+linkStyle+'" target="_blank">Firefox</a>火狐中打开本系统。';
    // elStyle.width = '100%';
    elStyle.width = '720px';
    elStyle.color = '#000';
    elStyle.fontSize = '14px';
    elStyle.lineHeight = '200%';
    elStyle.margin = '60px auto';
    elStyle.backgroundColor = '#fffbd5';
    elStyle.border = '1px solid #CCC';
    elStyle.padding = '24px 48px';
    // elStyle.background = '#F00 url(styles/images/not-support-ie67.png) 48px 48px no-repeat';
    // elStyle.padding = '40px 40px 48px 160px';
    docBody.innerHTML = '';
    docBody.appendChild(el);
    // docBody.insertBefore(el,docBody.firstChild);
  });
}