HTML5—EventSource服务端推送事件
9人赞赏了该文章
349次浏览
编辑于2018年11月23日 08:48:45
来源:https://www.jianshu.com/p/622a3549728a
2016.12.27 20:35* 字数 236 阅读 5034评论 1喜欢 2
初始化事件源,指定一个接受事件的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);
赞 9
9人点赞
还没有人点赞,快来当第一个点赞的人吧!
打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!
推荐阅读