随着 Web 技术的发展，越来越多的互联网应用需要实时更新数据。这种特殊的需求需要服务端主动推送数据到客户端，而不是客户端轮询或者某些人为触发的操作。Server-Sent Events (SSE)，即服务端发送事件，是一种新的 Web 技术，用于实现这种实时数据更新的功能。本文将提供一个完整的 SSE 范例，以及一些深度和指导意义的学习。
SSE 是什么？
SSE 能够将服务器端的数据实时推送到客户端，而不需要客户端轮询或者其他客户端触发的操作。它使用浏览器自带的 EventSource API，通过 HTTP 协议来实现数据传输。SSE 提供了两个重要的特性：
- 实时性：SSE 通过单独的持久连接，在数据可用时直接向客户端推送数据。客户端不需要逐个轮询来获取新数据。
- 兼容性：SSE 协议被现代浏览器所支持，且不需要任何新的插件或者客户端软件。
如何使用 SSE 实现服务端推送数据？
使用 SSE 实现服务端推送数据需要分为两部分：客户端代码和服务端代码。
客户端代码
在客户端，我们需要使用 EventSource 对象来接收数据，并设置 onmessage 事件处理程序来处理接收到的消息。
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("server.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br/>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}服务端代码
在服务端，我们需要设置 CORS 头信息，并在 PHP 中设置 Content-Type 为 text/event-stream。然后我们可以使用 flush 函数来清空服务器缓存并发送数据。以下是一个完整的 SSE 服务端代码的范例：
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
------------------------------------ ----
----------- -
----- - ----------
---- ------ --- ------ ---- --- -------------
--------
---------
-这个代码的作用是，每秒向客户端推送当前服务器端时间信息。
SSE 与 WebSocket 的区别
SSE 和 WebSocket 都是用于实现实时通信的技术，它们有一些相似之处，但有很多的不同。WebSocket 是一种双向通信协议，它允许客户端和服务器同时发送和接收数据。SSE 是一种单向通信协议，只允许服务器向客户端发送数据。
WebSocket 是一个完整的协议，它可以发送和接收任意类型的数据，而 SSE 只支持文本类型的数据。
结论
本文提供了一个完整的 SSE 范例，展示了如何在客户端和服务端代码中实现 SSE 技术。我们也讨论了 SSE 和 WebSocket 的区别。SSE 可以大大提高 Web 应用的实时性和性能，特别是在需要实时推送更新数据的应用中，SSE 是一种非常有用的技术。SSE 的接口简单易用、兼容性高，值得开发人员进一步了解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f62649c5c563ced5801011