在 Web 开发中，我们经常需要与服务器进行交互，而服务器通常是被动的，需要客户端发起请求才能返回数据。但是在某些场景下，我们需要实时地从服务器获取信息，比如聊天室、实时数据展示、即时通讯等场景，这时候就需要用到服务器推送技术。本文介绍一种常见的实现服务器推送技术的方式——Server-Sent Events。
Server-Sent Events 简介
Server-Sent Events（SSE）是 HTML5 标准中的一种服务器推送技术，它提供了一个在客户端和服务器之间保持长连接的机制，服务器可以随时向客户端推送数据，而客户端不需要自己发起请求。
SSE 的优点：
- 实时性高：客户端可以及时地接收到服务器端推送的数据，避免了轮询带来的数据延迟。
- 简单易用：SSE 是基于 HTTP 协议的，不需要使用额外的传输协议，对开发者友好。
- 兼容性好：SSE 在现代浏览器中都得到支持，不需要使用额外的插件或库。
SSE 实现方式
- 声明一个 EventSource 对象
要使用 SSE，首先需要在客户端声明一个 EventSource 对象，它位于 window 对象下：
var source = new EventSource(url);
其中 url 是服务器端推送数据的地址。
- 服务器推送数据
当客户端和服务器建立连接后，服务器就可以通过发送数据给客户端。SSE 发送的数据需要遵循一定的格式，即以 data: 开头，以两个换行符结尾，比如：
data:message\n\n
其中 message 是服务器端要推送的消息。
发送数据的方式有两种：EventSource 对象的 send() 方法和 HTTP 响应的 flush() 方法。使用 send() 方法时，需要在服务器通过 sleep() 或者 while 循环等方式来防止连接断开，使用 flush() 方法则需要在 Apache 或者 Nginx 等 Web 服务器的配置文件中设置 flush。
- 处理服务器推送的数据
当客户端接收到服务器推送的数据后，会触发 EventSource 对象的 onmessage 事件，可以在该事件中处理数据：
source.onmessage = function(event) {
var data = event.data;
// 处理数据
}示例代码
下面是一个简单的 SSE 示例，实现服务器向客户端推送当前时间：
服务器端
使用 PHP 实现：
// javascriptcn.com 代码示例
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (true) {
echo "data: " . date('Y-m-d H:i:s') . "\n\n";
flush();
sleep(1);
}
?>客户端
var source = new EventSource('sse.php');
source.onmessage = function(event) {
var data = event.data;
console.log(data);
};总结
Server-Sent Events 是一种利用 HTTP 长连接实现服务器推送技术的方式，具有实时性高、简单易用、兼容性好等优点。虽然它还有一些缺点，比如不支持多域名、无法进行实时心跳等，但在一些场景下仍然是非常实用的。如果你需要在 Web 项目中实现服务器推送技术，可以考虑使用 SSE。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539c78a7d4982a6eb3497b1