html5的服务器端推送事件Server-Sent Events解析

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

html5推出了一个新的服务器端推送功能，叫做server-sent。是个单向通信的功能，并非双向，服务器端定期“推送”数据到客户端。从表现上来说，和 setinterval 和 ajax 的组合几乎没有什么区别，但是还是有些自身特有的特性的。

对比websocket

server-sent 和 websocket 想对比的话，苏南大叔认为：server-sent 完败，websocket 获胜。
主要有以下几个理由：
1：兼容性来说，ie11 和 edge 不支持 server-sent 。而 websocket (socket.io) 兼容性上来说，完胜。
从兼容性上来说，我们可以利用 setinterval 和 ajax 组合成类似的效果。

2：server-sent 是单向通信的，服务器定时“推送”。而 websocket ，是双向通信的。客户端和服务器端是可以互发消息的。

3：这个 server-sent 还是存在跨域限制的，所以，这里和 socket.io 相比，也存在着差距。

js判断是否支持server-sent

if(typeof(EventSource) !== "undefined") {
   //支持server-sent
}
else{
  //不支持server-sent
}

定义网址以及open，error，close

var s = new EventSource("sent.php");
s.onopen = function (event) {
  // ...
};
s.onerror = function (event) {
  // handle error event
};
//s.close();

当然，也可以写成下面的形式：

var s = new EventSource("sent.php");
s.addEventListener('open', function (event) {
   // ...
}, false);
s.addEventListener('error', function (event) {
   // handle error event
}, false);
//s.close();

最简单的读取data数据的demo

s.onmessage = function (e) {
  console.log(e.data);
};

或者这么写js

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

最简单的发送data数据的demo

以php为例

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();

简要总结

这里需要说明的是，整个过程，就是客户端定期刷服务器端的接口。因此服务器端的接口是一次一次执行的，并非是while(true)的概念。这一点上可以通过客户端f12抓包可以看到上述描述。

在本篇文章中，苏南大叔仅仅带着大家看了最基本的data的收发情况的例子。我们在接下来的文章中，将会学习有关server-sent events的高级应用。敬请关注苏南大叔的相关server-sent文章。https://newsn.net/tag/server-sent/ 。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。