前言
在 Web 应用开发中，前端通信是不可避免的一部分。传统的客户端向服务端请求数据的方式会让服务端的资源消耗非常大，而且每次请求都会消耗网络资源，导致网页加载速度变慢。因此，我们需要一种新的方式来实现客户端与服务端之间的实时通信，以满足各种业务场景的需求。
在这篇文章中，我将向大家介绍 SSE （Server-Sent Events）和 EventSource 对象，并讲述他们的全面解析和使用场景。
SSE 是什么？
SSE 是一种新的客户端/服务端通信协议，它允许服务端向客户端推送数据，而客户端不需要请求数据。服务端通过建立长连接向客户端传输数据，直到连接断开才结束传输。
相比于传统的 Ajax 请求和 Websocket 连接，SSE 具有以下优点：
- 简单易用：SSE 所需代码量较少，容易实现。
- 省资源：SSE 不需要像 Ajax 请求那样频繁向服务器发送请求，在有数据时才会向客户端推送数据，这样可以节省服务器资源。相比于 Websocket，SSE 不需要实现握手等繁琐的步骤，也能达到实时通信的效果。
- 安全：SSE 基于 HTTP 协议进行通信，因此可以通过 HTTPS 进行加密传输，从而保障数据传输的安全性。
EventSource 对象是什么？
EventSource 对象是 HTML5 提供的一个新的 API，它可以用来建立 SSE 长连接。EventSource 对象允许在客户端监听服务端的事件，并且在服务端推送数据时，可以通过 JavaScript 代码接收这些数据。
EventSource 对象常用的属性和方法包括：
- url：指定连接的 URL。
- withCredentials：异步请求时是否带上凭据。
- readyState：连接的当前状态，一共有三种状态：0 - 正在连接；1 - 连接成功；2 - 连接被关闭。
- onopen：当连接打开时触发的事件。
- onmessage：当服务端发送数据时触发的事件。
- onerror：当连接发生错误时触发的事件。
- close()：关闭连接。
使用场景
SSE 可以应用到很多实际场景中，例如：
- 实时股票报价：服务端从股票行情服务器接收行情数据，并使用 SSE 向客户端推送实时股票报价信息。
- 实时聊天室：客户端在进入聊天室时候向服务端发送一个 POST 请求，服务端将客户端添加到聊天室中。当有新用户加入聊天室时，服务端使用 SSE 向已经在聊天室的客户端推送新用户加入的消息。
- 在线竞技游戏：游戏客户端使用 SSE 与服务器建立长连接，服务端向客户端推送游戏进程中的时间、分数等信息。
下面是一个简单的 SSE 示例代码，实现了一个实时显示服务端时间的功能：
客户端 HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- ----------------
--------
---------------------- --- ------------ -
--- ------ - --- ------------------------------------------
---------------- - --------------- -
----------------------------------------- - -----------
--
- ---- -
----------------------------------------- - ------- ---- ------- ---- --- ------- ----------- -----------
-
---------
-------
-------服务端 Node.js 代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ---- - --- ----------------------
---------------- --------------
-- ------
----------------上面的代码使用 Node.js 创建了一个 HTTP 服务器，并且在客户端使用 EventSource 对象向服务端的 /time 接口建立 SSE 长连接。每秒钟服务端向客户端推送当前时间信息，客户端接收到数据后通过 JavaScript 代码更新 HTML 页面显示的时间。
总结
SSE 和 EventSource 对象是一种非常优秀的实现客户端与服务端实时通信的方式，可以广泛应用于各种业务场景中。在实际开发中，我们可以根据项目的实际需求选择合适的通信协议，从而实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476b437968c7c53b035b2e0