html5 eventsource,HTML5—EventSource服务端推送事件

初始化事件源,指定一个接受事件的URL:

var evtSource = new EventSource("/sendMessage");

监听消息:

//收到服务器发生的事件时触发

evtSource.onmessage = function (e) {

console.log(e.data);

}

//成功与服务器发生连接时触发

evtSource.onopen = function () {

console.log("Server open")

}

//出现错误时触发

evtSource.onerror = function () {

console.log("Error")

}

//自定义事件

evtSource.addEventListener("myEvent", function (e) {

console.log(e.data);

}, false)

服务器端nodejs实现:

把报头 "Content-Type" 设置为 "text/event-stream"

字段:每个事件之间通过空行来分隔。

字段为空白,表示该行是注释,会在处理时被忽略。

event: 表示该行用来声明事件的类型。浏览器在收到数据时,会产生对应类型的事件。

data: 消息的数据字段。如果该条消息包含多个data字段,则客户端会用换行符把它们连接成一个字符串来作为字段值。

id: 事件ID,会成为当前EventSource对象的内部属性"最后一个事件ID"的属性值。

retry: 一个整数值,指定了重新连接的时间(单位为毫秒),如果该字段值不是整数,则会被忽略.

var http = require('http');

var fs = require('fs');

http.createServer(function (req, res) {

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

res.writeHead(200, {

"Content-Type": "text/event-stream" //设置头信息

});

setInterval(function () {

res.write(

//事件一

"data:" + new Date().toLocaleTimeString() + "\n\n" + //必须“\n\n”结尾

//事件二

": '这是注释!'" + "\n" +

"event: myEvent" + "\n" +

"data:" + new Date().toLocaleString() + "\n\n"

);

}, 1000);

} else {

fs.readFile('./index.html', function (err, content) {

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

res.end(content, 'utf-8');

});

}

}).listen(3000);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值