Server-Sent Events：不一样的网页即时通信方式
在网页开发中，实时通信是很常见的需求。比如在线聊天、实时数据展示等。实时通信的实现方式有很多种，例如 WebSocket，长轮询（Long Polling）等。本文将介绍一种不太常见，但十分实用的实时通信方式——Server-Sent Events（以下简称 SSE）。
一、什么是 SSE
SSE 是一种轻量级的、基于 HTTP 的实时通信方式，和 WebSocket 一样，可以实现服务器和客户端之间的双向通信。但相比 WebSocket 更加简单易用，且支持更广泛。目前 SSE 已被广泛应用于社交网络、数据仪表盘、实时通知等场景。
二、SSE 的优势
1.简单易用
SSE 只需使用 EventSource 对象即可实现与服务器的实时通信。相比 WebSocket 的高度定制化，SSE 更加简单易用。
2.开箱即用
SSE 是基于 HTTP 协议的，不需要基于Socket的协议，因此在浏览器中使用 SSE无需安装插件或其他库，直接调用即可。
3.支持断线重连
SSE 支持因网络波动导致的客户端和服务器连接断开自动重连，保证了持续的通信。
三、SSE 的实现原理
SSE 的实现原理其实很简单：浏览器通过 HTTP 协议发起一次持久化连接请求，服务器将保持该连接一直打开，并持续地向客户端推送数据。当客户端收到新数据时，EventSource 对象会发出 Message 事件，开发者可以在该事件中执行自己的相应操作。
示例代码如下：
HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ----------- ---------- ------- ------ ---------------- ------ ------- ------------------- --------------------- -------- ----------------------- --------- ----- ------ - --- ------------------------ ------------------ - --------------- - ------ -------- - ----------------------- -------------------------------------------- - -------------- ---- ----------------------------------------- - ---------- - ------------------ ---- ---------- ------- -------
Javascript 代码：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
$timeData = array('time' => date('H:i:s', time()));
echo 'data: ' . json_encode($timeData) . "\n\n";
flush();
?>四、SSE 和 WebSocket 的比较
SSE 和 WebSocket 都支持双向通信，但 SSE 相比 WebSocket 更加轻量级，更易于实现。 WebSocket 对于复杂性较高的应用，例如游戏，推荐使用 WebSocket；而对于简单的实时通知、在线聊天等应用，可以使用 SSE 实现。
五、总结
本文介绍了 Server-Sent Events 的优势、实现原理以及示例代码，相信大家已经了解了这种基于 HTTP 的实时通信方式，并且掌握了如何在浏览器中使用 SSE。
SSE 和 WebSocket 都是实现实时通信的好方法，开发者可以根据自己的需求进行选择。从目前来看，SSE 已经被广泛应用于很多实时通信场景，是一种十分值得掌握的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503f76795b1f8cacd0b668d