我的第一个comet长连接例子

时间：2023-03-09 19:24:53
我的第一个comet长连接例子 
<!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);

  });

}

相关文章