前言
前端服务端通信一直以来都是前端开发中的重要部分，随着前端技术的发展，现在已经有了多种通信方式，比如 WebSocket，XHR，Fetch 等等。本文将介绍另一种前端服务端通信方式：Server-sent Events。
Server-sent Events 是指服务器向客户端发送事件的一种方式，它建立在 HTTP 的基础上，因此不需要引入任何新的协议或库就可以使用。相比 WebSocket，它不支持双向通信，但是更容易实现，且更适用于一些场景，比如推送实时数据或者日志，或者需要与 HTTP 缓存和代理兼容的情况。
下面我们将从实现原理，基本用法，注意事项，安全性等方面来介绍 Server-sent Events。
实现原理
Server-sent Events 的实现原理也很简单，它通过 HTTP 的长连接来保持客户端和服务端之间的连接。具体来说，客户端向服务端发送一个 HTTP 请求，服务端将保持连接直到有数据需要发送。当服务端有数据需要发送时，它将数据按照一定的格式发送到客户端，客户端接收到数据后可以将数据用于渲染页面。
基本用法
Server-sent Events 的使用也很简单，我们只需要在客户端使用一个新的 API：EventSource 来创建一个连接即可。具体代码如下：
-- -------------------- ---- ------- ----- ----------- - --- ------------------------------- ------------------ - --------------- - -- ------ -- ------------------- - --------------- - -- ---- -- --------------------- - --------------- - -- ------- --
服务端和客户端之间的连接建立后，服务端可以定时发送数据到客户端，客户端接收到数据后可以将数据用于渲染页面。通常，服务端会将数据使用 JSON 格式进行发送，示例代码如下：
-- -------------------- ---- -------
-- ------- -----
----- ---- - ----------------
----- ------ - --------------------
-------------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
---------------- ----------------------- ----- ---- ------------
-- ------
---
------------------- -- -- -
------------------- --------- -- ------------------------
---注意事项
虽然 Server-sent Events 对于前端服务端通信很有用，但是还是需要注意一些事项：
- 对于旧版本的浏览器，如 IE，可能不支持 EventSource API，需要使用其他的通信方式。
- 因为 Server-sent Events 是基于 HTTP 长连接的，如果没有正确处理连接的关闭，可能会导致服务器资源的浪费。
- 由于服务端要保持连接，需要设定一定的超时时间，以防止服务端资源的浪费。
安全性
由于 Server-sent Events 是基于 HTTP 的，所以一些常见的安全问题，如跨域攻击（CORS attacks）、跨站脚本攻击（XSS）等问题也需要被注意到。具体来说，我们需要做下面几点：
- 服务端要进行严格的身份验证和授权，保障数据安全。
- 将数据处理为严格的格式，避免 XSS 攻击的发生。
- 避免跨域攻击，可以使用 CORS 或者反向代理来保证安全。
总结
Server-sent Events 是前端服务端通信的一个新的方式，它可以用于实时数据推送或者日志等场景，具有易于实现、与 HTTP 缓存兼容等优点。在使用前需要注意一些常见的问题，如数据格式安全，超时等问题。通过使用 Server-sent Events，我们可以更好地实现前端服务端通信，让应用更加实时化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647efe5948841e9894eaed24