在 Web 开发中，实现客户端与服务器端之间的双向通信是一种常见需求。传统的方法是使用 WebSocket，但是 SSE（Server-Sent Events）也提供了一种轻量级的实现方式。本文将介绍 SSE 的原理、用法及示例代码。
SSE 的原理
SSE 是一种基于 HTTP 的推送技术，允许服务器端向客户端推送事件。其原理是通过一个持久连接（长轮询）将服务器端的事件发送给客户端，以达到实时通信的目的。
具体地说，当客户端请求 SSE 连接时，服务器端会保持连接处于打开状态，然后将事件通过这个连接逐个发送到客户端。当客户端收到事件时，会触发一个 MessageEvent，从而可以在前端代码中对事件进行处理。客户端可以在任何时候发送特定格式的请求到服务器，以更新连接状态、订阅新事件或取消事件的订阅。
SSE 的用法
SSE 主要涉及两个方面的使用：服务器端和客户端。
服务器端
首先，在服务器端，需要将所需要推送的事件以特定格式发送到客户端。在 PHP 中，可以使用类似下面的代码来实现：
-- -------------------- ---- ------- --------------------- -------------------- ---------------------- ----------- ----- - ------ ------- -- ---------- ------ -- ------ -------- -- ---- ------- -------------------- ---- ------ --------------------- --------展开代码
其中，Content-Type 和 Cache-Control 的设置是必须的。event 表示事件名字，data 表示事件数据。
客户端
其次，在客户端，需要使用 JavaScript 来监听服务器端推送过来的事件，例如：
const eventSource = new EventSource('/sse'); eventSource.addEventListener('message', event => { console.log(event.data); });
当服务器端推送事件时，message 回调函数将会被触发，从而在控制台上输出事件数据。
连接状态调整
最后，我们还可以在前端代码中调整连接状态及实现订阅与取消订阅。例如：
-- -------------------- ---- ------- -- -- --- -- -------------------- -- ----- ----------------------------------------- ----- -- - ------------------------ --- -- ------ ------------------------------------------ ----------------展开代码
示例代码
下面是一个完整的 SSE 示例代码：
-- -------------------- ---- ------- -- ---- --- -- --------------------- -------------------- ---------------------- ----------- ----- ------ - ----- - -------------- ----- - ------ ------- -- ------- ------ -- ------ -- ---- ------- -------------------- ---- ------ --------------------- -------- --------- -展开代码
-- -------------------- ---- ------- ---- --- ---- --- --------- ----- ------ ------ ---------- ---------- ------- ------ -- -------------- ------- ---------------- ------------ ------- ----------------------- ----- ------ - -------------------------------- ----- ------- - ------------------------------------ ----- ----------- - --- ------------------------------ ------------------------------------ ----- -- - ----- ---- - ----------- ---------------- - ----- --- ------------------------------------- ----- -- - ------------------- -------------------- --- --------------------------------- -- -- - -------------------- --- --------- ------- -------展开代码
运行结果如下所示：
结语
本文介绍了 SSE 的原理、用法及示例代码。相较于 WebSocket，SSE 较为轻量，且无需手动维护心跳。使用 SSE 可以轻松实现客户端与服务器端的双向通信。对前端开发人员来说，掌握 SSE 技术也是具有指导意义的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bacb73306f20b3a69db096
