如题，希望诸位多多赐教

怎么实现一个消息通知的功能，类似于segmentfault，这方面没有接触过，希望有大神指点

3 个回答

得票最新

eechen

15.1k51729

发布于
2015-07-25

更新于
2015-07-25

✓ 已被采纳

segmentfault.com利用HTML5 Page Visibility API,在窗口再次可见时触发消息查询,实现消息通知.

使用HTML5 Page Visibility API,在网页可见时提醒:

document.addEventListener('visibilitychange', function () {
    document.title = ((document.hidden) ? '不可见' : '可见');
});

在HTML5这个可见性API出来前,我们可以检测页面是否获得焦点才触发一些事件.给window绑定onblur/onfocus可以检测页面是否处于激活状态(active),但不能检测到可见状态(可见的情况下不一定获得焦点).
给window绑定失去/获得焦点事件:

window.onblur  = function(){document.title = '失去焦点';};
window.onfocus = function(){document.title = '获得焦点';};

转:HTML5还提供了一个基于轮询机制的推送API,叫做Server-Sent Events(SSE),即服务器推送事件:
客户端:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf`-8">
<title>Server-Sent Events</title>
</head>
<body>
<pre id = "x">initializting...</pre>
<!--之所以使用pre标签而不是p或者div是为了确保数据能以它被接受时的格式呈现,而不会修改或格式化-->
</body>
<script>
var es = new EventSource("sse.php");
es.addEventListener("message", function(e){
    document.getElementById("x").innerHTML += "\n"+e.data;
    //alert(e.data);
},false);//使用false表示在冒泡阶段处理事件,而不是捕获阶段.
</script>
</html>

服务器:

<?php
header('Content-Type: text/event-stream'); // text/event-stream是专门为SSE设计的MIME类型
header('Cache-Control: no-cache');
$time = date('H:i:s');
echo "data: The server time is: {$time}\n\n";
echo "retry: 1000\n\n"; //Firefox默认为5秒