随着 Web 应用程序越来越复杂，前端与服务器之间的交互变得越来越重要。服务器推送技术是一种非常有效的机制，可以让服务器主动向客户端发送数据更新，从而实现实时信息传递和交互性。
在浏览器中，WebSockets 和 Server-Sent Events（SSE）都是服务器推送技术中非常流行的实现。本文将重点介绍 Server-Sent Events 技术，包括原理，使用方法和示例代码。
Server-Sent Events 是什么
Server-Sent Events 是浏览器与服务器之间实现实时单向数据传输的机制。它的优点在于：
- 简单易用：只需要使用浏览器内置的 EventSource 对象即可接受服务器发送的事件。
- 可靠性高：与 WebSocket 不同，SSE 采用 HTTP 协议进行通信，可以穿过多种网络环境，无需面临 WebSocket 常见的防火墙问题。
- 兼容性好：目前所有主流浏览器都已经内置了 SSE 功能。
如何使用 Server-Sent Events
使用 SSE 首先需要在服务端创建一个 SSE 接口，该接口可以通过 HTTP 响应头部信息中的 MIME 类型告知浏览器采用 SSE 模式进行传输。
-------- --- -- ------------- -----------------
下面是一个简单的 SSE 接口示例代码：
----- --------------------- -------------------- ---------------------- ----------- ----------- - ------- ---- ------ ------ ----- ------------------- -------- --
客户端接收 SSE 数据则需要创建一个 EventSource 对象，然后通过 onmessage 事件监听服务器发送的消息。另外需要注意的是，SSE 服务器响应的数据应该以一定的格式进行组织，比如使用 data、event 和 id 等字段，确保数据传输格式的规范。
下面是一个简单的 EventSource 对象示例代码：
--- ------ - --- --------------------------- ---------------- - --------------- - --- ---- - ----------------------- -- -- --------- ---- ---- -
Server-Sent Events 示例代码
下面是一个完整的 SSE 示例代码，包括服务端 SSE 接口代码和客户端 EventSource 代码：
服务端 PHP 文件 code.php：
----- --------------------- -------------------- ---------------------- ----------- -------- - -- ----- ------ - ----------- ----------- - ------- ---- ---- -------------- ---- ------ ------ ----- ------------------- ----------- -------- --------- - --
客户端 HTML 文件 index.html：
--------- -----
----- ----------
------
----- ----------------
------------------ ------ ---------------
------- -----------------------------------------------------------
-------
------
--------------- -----------
---- ------------------
--------
--- ------ - --- ------------------------
---------------- - --------------- -
--- ---- - -----------------------
--------------------------------------------
-
---------
-------
-------在上述示例代码中，我们创建了一个类似聊天室的效果，通过 SSE 技术实现了实时信息同步的效果。
总结
通过上述介绍我们可以看到，Server-Sent Events 是一种非常强大且易于使用的服务器推送技术，它可以实现 Web 应用程序的实时信息同步功能。在项目中，我们可以通过 SSE 技术实现类似聊天室、实时监控等功能。如果想要更深入学习这种技术，还可以查阅 W3C 的 SSE 规范。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6651b63fd3423812e45f145b