服务器推技术之EventSource

最近在看服务器推技术时,发现了一项新的技术:EventSource

w3c上有个草案描述了它:Server-Send Events

回想一下我们之前用到的服务器推技术:

  • polling:客户端不断轮询。
  • long polling:服务端在数据未就绪时,挂起请求。

这两种技术都存在一定的局限,我们需要服务器主动推送数据。

于是有了WebSocket,但它是双向的(服务端<——>客户端)。

有的时候,我们并不需要从客户端发送消息,我们只需要从服务端推送消息,EventSource应运而生。

EventSource是单向的(服务端——>客户端),它直接使用http协议来传输数据(与WebSocket不同,EventSource不需要专门的协议)。

客户端, client.html:

1
2
3
4
5
6
7
if (window.EventSource) {
var source = new EventSource('/stream');

source.addEventListener('message', function(e) {
console.log(e.data);
}, false);
}

服务端, server.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var http = require('http');
var fs = require('fs');

http.createServer(function(req, res) {
if (req.headers.accept && req.headers.accept == 'text/event-stream') {
if (req.url == '/stream') {
sendSSE(req, res);
}
else {
res.writeHead(404);
res.end();
}
}
else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(fs.readFileSync(__dirname + '/client.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());
}

function constructSSE(res, id, data) {
res.write('id: ' + id + '\n');
res.write("data: " + data + '\n\n');
}

EventSourcecontent-typetext/event-stream,数据传输格式:

1
data: xxxxxxx\n\n

多行的数据:

1
data: xxxxxxxx\n
data: xxxxxxxx\n\n

最后一行使用两个\n

我们可以使用EventSource传输json格式数据:

1
data: {\n
data: "name": "hushicai"\n
data: }\n\n

客户端接收到数据后,可以调用JSON.parse解析出json数据。

参考文章