EMLOG 最新评论推送
网站 这次添加 Pjax 打算一直就这样使用下去了
由于 侧边栏 ajax获取新的网页内容时,是没有返回侧边栏信息的,导致侧边栏最新评论不能及时获取,所以在这儿加了一个小功能
现在 博客 默认是 10 秒获取一次 最新评论状态,每次返回的 正文 只有 几十 字节(还不如 header 头部信息长呢)
当与本地有区别时 再去获取最新评论列表,不用担心太过流量问题
有了这个功能 你可以在本站聊天了 [呲牙/]
不信?!!!!!
叫几个小伙伴过来试试不就知道了
聊天需谨慎,切聊且珍惜 (服务器资源就是这样浪费地)
聊天略有延迟 请谅解,毕竟只是 PHP 空间,没有安装支持 socket的扩展)?
代码写的比较乱所以 暂时不先放出,稍后会放出插件的 关键是 免费的
你值得拥有!!!!
当然 会点儿 代码 就是 任性!![阴险/]
下面是需要的代码
JavaScript:
PHP 代码也很简单 具体放在哪儿这就看自己怎操作了,建议放在 插件里面,如果感觉不方便 可以放在 主题文件里面
注释 应该还算可以吧
由于 侧边栏 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&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 .'}'); }
注释 应该还算可以吧
本文出自简爱博客,转载时请注明出处及相应链接。
评论
弄了背景。。。博客访问就卡了。。。
我只看看不说话