- webNotification
- webWorker
- webServerSentEvent
01 webnotification
使用场景
私信、在线提问、或者一些在线即时通讯工具,需要知道对方有了新的反馈
获得用户许可
Notification.requestPermission()
查看用户当前许可状态
Notification.permission
- 默认:default
- 授权:granted
- 拒绝:denied
调用方式两种回调和链式调用
Notification.requestPermission().then(function(permission) { ... });Notification.requestPermission(callback);
demo
function getPermission(fn){
Notification.requestPermission().then(function(result) {
//result可能是是granted, denied, 或default.
});
}
function notification(){
if( Notification.permission === 'granted' ){
var notification = new Notification("title", {
body: 'msg body',
icon: 'mm1.jpg'
});
notification.onclick = function(){
// ... 这里执行跳转
notification.close();
}
}
}
02 webWorker
使用场景
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
webWorker 适合于消耗CPU的任务
检测 webWorker 支持
if(typeof webWorker !== 'undefined'){
}
创建 webWorker 文件
var i=0;
function timedCount() {
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息
创建 webWorker 对象
w=new Worker("demo_workers.js");
w.onmessage=function(event){
//event.data中有数据
document.getElementById("result").innerHTML=event.data;
};
终止 webWorker
w.terminate();
03 webServerSentEvent
使用场景
EventSource 对象用于接收服务器发送事件通知，eg微博、twitter新消息
监听源
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
客户端事件
- onopen 当通往服务器的连接被打开
- onmessage 当接收到消息
- onerror 当错误发生
demo
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
