初始化事件源潮峦，指定一個(gè)接受事件的URL：
var evtSource = new EventSource("/sendMessage");
監(jiān)聽(tīng)消息：
//收到服務(wù)器發(fā)生的事件時(shí)觸發(fā)
evtSource.onmessage = function (e) {
console.log(e.data);
}
//成功與服務(wù)器發(fā)生連接時(shí)觸發(fā)
evtSource.onopen = function () {
console.log("Server open")
}
//出現(xiàn)錯(cuò)誤時(shí)觸發(fā)
evtSource.onerror = function () {
console.log("Error")
}
//自定義事件
evtSource.addEventListener("myEvent", function (e) {
console.log(e.data);
}, false)
服務(wù)器端nodejs實(shí)現(xiàn)：
- 把報(bào)頭 "Content-Type" 設(shè)置為 "text/event-stream"
- 字段：每個(gè)事件之間通過(guò)空行來(lái)分隔醉顽。
字段為空白护桦，表示該行是注釋?zhuān)瑫?huì)在處理時(shí)被忽略。
event: 表示該行用來(lái)聲明事件的類(lèi)型。瀏覽器在收到數(shù)據(jù)時(shí)，會(huì)產(chǎn)生對(duì)應(yīng)類(lèi)型的事件敦姻。
data: 消息的數(shù)據(jù)字段。如果該條消息包含多個(gè)data字段,則客戶(hù)端會(huì)用換行符把它們連接成一個(gè)字符串來(lái)作為字段值坎背。
id: 事件ID,會(huì)成為當(dāng)前EventSource對(duì)象的內(nèi)部屬性"最后一個(gè)事件ID"的屬性值替劈。
retry: 一個(gè)整數(shù)值,指定了重新連接的時(shí)間(單位為毫秒),如果該字段值不是整數(shù),則會(huì)被忽略.
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" //設(shè)置頭信息
});
setInterval(function () {
res.write(
//事件一
"data:" + new Date().toLocaleTimeString() + "\n\n" + //必須“\n\n”結(jié)尾
//事件二
": '這是注釋?zhuā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);
