哈喽！今天来说说H5里超炫的新玩意儿——SSE（Server-SentEvents），还有那个关键的EventSource对象。你晓不晓得，现在很多网站都想让页面实时更新，就像看股市新闻追社交媒体八卦，连新闻都想直接展示最新动态咯。之前，大家只能不停地找服务器刷数据，累死人对？但是现在有了SSE，就方便太多！
SSE是什么？
SSE，也叫Server-SentEvents，它能让网站从后台服务器获取实时信息。有了EventSource这个东西，我们就能简单地在网页上显示实时更新的数据。这样的话，就不用老拿着鼠标刷页面那么麻烦了，因为服务器会自动推送最新的内容到你的网页上！
EventSource对象怎么用？
要启动EventSource对象很简单！首先我们得创建一个EventSource实例，再把它指向服务器的具体URL地址。连好之后，服务器就能发动作息给你~EventSource不仅能接收服务器发来的各种事件通知，还支持检查连接状态和错误信息！
服务器端怎么实现？
if(typeof(EventSource)!=="undefined")
{
// 浏览器支持 Server-Sent
// 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}
服务器那边，你得编个程序发些信息出来。这活儿我们可以用PHP、Node.js之类的后台技术搞定。不过要记住服务器得老老实实不停地往外送东西，不然可得小心，时不时就会碰到连接出错，信息乱动什么的。
var source=new EventSource("haorooms_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "
";
};
IE浏览器的兼容性问题
尽管SSE真的很好用，但是IE浏览器没办法直接支持这个。不过不用怕，我们还是有办法的。你可以借助polyfill库这个神器来实现兼容性，这样就算在IE浏览器里面，也能畅快体验到SSE那种实时更新的魔力了喔。
实战案例：股票数据实时更新
咱们拿股市行情实时更新这个功能来说。后端得时刻抓取最新的股票信息，然后用SSE协议把它们传给前端。这时，前端就可以用EventSource对象接收到这些数据，并且实时地在网页上展示出来了。这样的话，大家就都能看到即时的股票走向！
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("server.php");
source.onopen=function()
{
console.log("Connection to server opened.");
};
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "
";
};
source.onerror=function()
{
console.log("EventSource failed.");
};
}
else
{
document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}
SSE的优势和限制
说起SSE，它最大的优点就是简单易懂，速度还快。跟WebSocket比起来，SSE的API用着就特别顺手，上手快。不过，SSE也有点小问题，比如说，它只能从服务商往用户那边传消息，而WebSocket就厉害了，支持两边都能说话。再说，有些老版本的浏览器可能对SSE不太友好。
结合Node.js使用SSE
懂点Node.js的话，用它来配合SSE就再好不过！因为Node.js给了我们一种超方便的方法来操作服务器端的事件传输，这意味着能让我们更好地控制大数据实时更新。
总结与展望
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
$i = 0;
$c = $i + 100;
while (++$i
看过这篇文章，你应该更了解啥是SSE和EventSource！这俩东西真是网页设计的好帮手，让网页动感十足，实时更新。相信随着浏览器的升级，以后SSE会成为更多小伙伴的心头爱~
咱们来聊聊，各位朋友们，有没有用过好用的SSE？记得评论区告诉我们一下，让其他人也能享受到好处。也别忘了点个赞或者转发一波，你们的鼓励可是我们前进的最大动力！
评论0