服务端向HTML5推送消息,html5 服务端推送

html部分

获得服务器更新

断开sse

if(typeof(EventSource)!=="undefined")

{

// 支持跨域携带cookie

var source=new EventSource("http://localhost:8000/events",{withCredentials: true});

source.onmessage=function(event)

{

document.getElementById("result").innerHTML+=event.data + "
";

};

}

else

{

document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";

}

var closeBtn=document.getElementById('close');

closeBtn.οnclick=closeSSE;

function closeSSE(){

source.close();

document.getElementById("result").innerHTML+='断开sse链接' + "
";

}

服务器端部分，nodejs为例

var http = require('http');

// var sys = require('sys');

var fs = require('fs');

http.createServer(function(req, res) {

// debugHeaders(req);

if (req.headers.accept && req.headers.accept == 'text/event-stream') {

if (req.url == '/events') {

sendSSE(req, res);

} else {

res.writeHead(404);

res.end();

}

} else {

res.writeHead(200, {'Content-Type': 'text/html'});

// res.write(fs.readFileSync(__dirname + '/sse-node.html'));

res.write(fs.readFileSync(__dirname + '/sse.html'));

res.end();

}

}).listen(8000);

function sendSSE(req, res) {

res.writeHead(200, {

'Content-Type': 'text/event-stream',

'Cache-Control': 'no-cache',

'Connection': 'keep-alive'

});

var id = (new Date()).toLocaleTimeString();

setInterval(function() {

constructSSE(res, id, (new Date()).toLocaleTimeString());

}, 5000);

constructSSE(res, id, (new Date()).toLocaleTimeString());

//res.end();

}

//只有包含data:的数据行后面有空行时才触发message事件

//data:foo

//data:bar

//的event.data值为 "for/nbar" 注意换行符

function constructSSE(res, id, data) {

res.write('id: ' + id + '\n');

res.write("data: " + data + '\n\n');

}

// function debugHeaders(req) {

// sys.puts('URL: ' + req.url);

// for (var key in req.headers) {

// sys.puts(key + ': ' + req.headers[key]);

// }

// sys.puts('\n\n');

// }