EMLOG 最新评论推送

简爱代码>JavaScript2015-1-5 1:2040452
网站 这次添加 Pjax  打算一直就这样使用下去了
由于 侧边栏 ajax获取新的网页内容时,是没有返回侧边栏信息的,导致侧边栏最新评论不能及时获取,所以在这儿加了一个小功能
现在 博客 默认是 10  秒获取一次 最新评论状态,每次返回的 正文 只有 几十 字节(还不如 header 头部信息长呢)
当与本地有区别时 再去获取最新评论列表,不用担心太过流量问题

有了这个功能 你可以在本站聊天了  [呲牙/]
不信?!!!!!
叫几个小伙伴过来试试不就知道了
聊天需谨慎,切聊且珍惜 (服务器资源就是这样浪费地)
聊天略有延迟 请谅解,毕竟只是 PHP 空间,没有安装支持 socket的扩展)?

代码写的比较乱所以 暂时不先放出,稍后会放出插件的 关键是 免费的
你值得拥有!!!!
当然 会点儿 代码 就是 任性!![阴险/]

下面是需要的代码

JavaScript:
var jaNewComment = {
  // 默认配置
  defaults: {
    time: 6000,
    selector: '#newcomment'
  },

  vars: {
    ajax: false,
    time: 0,
    oldTime: 0,
    newTime: 0,
    oldId: '',
    Interval: false,
    titleN: 0,
    titleInterval: false
  },

  // 传递参数 并初始化
  init: function(op){
    if(typeof localStorage == 'undefined'){
      window.console && console.log && console.log('die');
      return;
    }
    this.op = $.extend({}, this.defaults, op);
    this.vars.id = localStorage.getItem('JA_NEW_COMMENT_ID');
    this.vars.Interval && clearInterval(this.vars.Interval);
    this.vars.Interval = setInterval('jaNewComment.ck()', 2000);
  },

  // 检测 最新评论
  ck: function(){
    this.vars.newTime = new Date().getTime()
    this.vars.oldId   = this.cache('JA_NEW_COMMENT_ID'),
    this.vars.oldTime = this.cache('JA_NEW_COMMENT_TIME');

    if(this.vars.time != this.vars.oldTime){
      this.vars.time = this.vars.oldTime;
      if(this.vars.oldId != this.vars.id){
        this.vars.id = this.vars.oldId;
        this.setHtml(this.cache('JA_NEW_COMMENT_LIST_JSON'));
      }
      return;
    }

    if(this.vars.newTime - this.vars.oldTime < this.op.time) return;


    this.cache('JA_NEW_COMMENT_TIME', this.vars.newTime);
    this.vars.time = this.vars.newTime;
    this.ajax(this.vars.id);
  },

  // 设置 最新评论列表 内容
  setHtml: function(j){
    var html = '';
    for(var i=0,l=j.length; i<l; i++){
      html += '<li><span class="avatar"><img src="http://gouji.org/api/gravatar/'+j[i].mail+
              '?s=38&amp;d=c" /><i class="fa"></i></span><p>'+j[i].name+'<br><a href="'+ BLOG_URL +'?post='+j[i].gid+'#'+j[i].cid+'">'+j[i].content+'</a></p></li>';
    }
    $(this.op.selector).html(html);
    window.console && console.log && console.log('检测到评论更新: '+ new Date().toLocaleString());
    this.newComment();
  },

  // 当有新消息时候 运行的代码
  newComment: function(){
    this.title(); // 闪烁标题栏 如果在 pjax 状态下, jaNewComment.title(true); 清除提示
  },


  // 缓存读取 函数
  cache: function(key, value){
    if(typeof key == 'undefined' || typeof localStorage == 'undefined'){
      return null;
    }else if(typeof value == 'undefined'){
      value = localStorage.getItem(key);
      if(/^\s*[\{\[][\S\s]*[\]\}]\s*$/.test(value))
        value = JSON.parse(value);
      return value;
    }else{
      if(typeof value != 'string') value = JSON.stringify(value);
      localStorage.setItem(key, value);
    }
  },

  // ajax 获取最新评论
  ajax: function(id){
    var list = typeof list == 'undefined' ? false : true;
    this.vars.ajax && this.vars.ajax.abort()
    this.vars.ajax = $.ajax({
      url: './?jaNewComment&id='+id,
      timeout: 9000,
      type: 'GET',
      data: {},
      dataType: 'json',
      error: function(b) {
        window.console && console.log && console.log('Error: ajax');
      },
      success: function(b) {
        if (id == b.id) return;
        jaNewComment.cache('JA_NEW_COMMENT_ID', b.id);

        if(typeof b.list == 'object'){
          ja_cache('JA_NEW_COMMENT_LIST_JSON', b.list);
          jaNewComment.vars.id = b.id;
          jaNewComment.setHtml(b.list);
        }
      }
    })
  },

  // title 提示文本
  title: function(j){
    if(this.vars.titleInterval) clearTimeout(this.vars.titleInterval);
    if(typeof j != 'undefined') return;

    var oldTitle = document.title.replace('【    】', '').replace('【有新评论】', '');
    this.vars.titleInterval = setInterval(function(){
        if(jaNewComment.vars.titleN % 2 == 0) document.title = '【    】' +oldTitle;
        else document.title = '【有新评论】' +oldTitle;
        jaNewComment.vars.titleN++;
      }, 600
    )
  }
}



jaNewComment.init({
  selector: '#newcomment', // 需要 刷新的 DOM 元素  需在 jaNewComment.setHtml  处设置 HTML 代码输出 格式
  time: 4000              // ajax 获取延时 单位 毫秒 最小 2000
});


PHP 代码也很简单 具体放在哪儿这就看自己怎操作了,建议放在 插件里面,如果感觉不方便 可以放在 主题文件里面
<?php
/**
 * EMLOG 输出最新评论 json 配合 本文 JS 代码使用
 * http://gouji.org/?post=348  EMLOG 最新评论推送 (伪)
 * 2014-01-07
**/


if(isset($_GET['jaNewComment'])) ja_new_comment_ajax();



function ja_new_comment_ajax(){
  header("Content-type: application/json;charset=UTF-8");
  global $CACHE;
  $com_cache = $CACHE->readCache('comment');

  foreach($com_cache as &$v){
    $v['mail'] = md5($v['mail']);
  }

  $json = json_encode($com_cache);
  $hash = md5($json);

  ob_get_clean();
  ob_start();

  if(@ $_GET['id'] == $hash)
    die('{"id":"'. $hash .'"}');
  die('{"id":"'. $hash .'","list":'. $json .'}');
}


注释 应该还算可以吧



本文出自简爱博客,转载时请注明出处及相应链接。

评论

  1. 孔国军2015-01-07 16:43回复

    弄了背景。。。博客访问就卡了。。。

  2. 陈子文2015-01-07 10:07回复

    我只看看不说话