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

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

苏南大叔:html5的服务器端推送事件Server-Sent Events解析 - html5-server-sent-events
html5的服务器端推送事件Server-Sent Events解析(图5-1)

对比websocket

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

苏南大叔:html5的服务器端推送事件Server-Sent Events解析 - 003_和ajax请求非常类似
html5的服务器端推送事件Server-Sent Events解析(图5-2)

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

苏南大叔:html5的服务器端推送事件Server-Sent Events解析 - 000_不支持edge
html5的服务器端推送事件Server-Sent Events解析(图5-3)

苏南大叔:html5的服务器端推送事件Server-Sent Events解析 - 001_不支持ie11
html5的服务器端推送事件Server-Sent Events解析(图5-4)

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

苏南大叔:html5的服务器端推送事件Server-Sent Events解析 - 002_不支持跨域
html5的服务器端推送事件Server-Sent Events解析(图5-5)

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/

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js    server-sent