前言
当我们在使用网页应用程序时，需要实时获取到数据变化或者其他事件的通知，这时候我们就需要使用实时通知技术来实现。Server-sent Events (SSE) 是一种支持服务器向客户端推送数据的 HTML5 技术，它比 WebSocket 更加简单，使用起来也更加方便。本文将介绍 Server-sent Events 的工作原理、实践应用以及特点等相关知识。
什么是 Server-sent Events
Server-sent Events (SSE)是一种用于创建实时通讯应用程序的浏览器API。它建立在传输控制协议（TCP）上，并且与 HTTP 协议的一部分相对应。在 SSE 技术中，服务器通过 HTTP 将事件流（text/event-stream）推送到浏览器客户端。该事件流中的每个事件都是一个 JSON 数据。浏览器在收到事件流后，通过 JavaScript 代码来解析处理这些事件。
使用 SSE 技术的应用程序通常会有一个或多个事件流源，用于向客户端推送相关的数据。当事件流源中的数据发生变化时，服务器将相应的数据通过事件流发送给客户端。在事件流发送过程中，服务器还可以设置事件流的最大时长和重试时间。
SSE 的工作原理
SSE 技术通过 HTTP 长连接机制实现数据传输，HTTP 长连接是一种客户端与服务器之间一直保持连接的传输方式。在通信过程中，浏览器需要不断向服务器发送心跳包以保持连接。通过这种机制，服务器就能将数据实时地发送给客户端。
具体来说，使用 SSE 技术实现实时通知功能需要以下步骤：
在服务器端设置事件流。 在使用 SSE 技术之前，需要在服务器端创建一个服务，该服务监听与客户端的长连接。客户端可以使用该服务来接收事件流。
在事件流源端生成数据。 在事件流源端，可以设定数据更新的时间间隔和数据内容等相关信息。一旦数据发生变化，数据就会被封装在一个事件中，并且通过事件流源发送给客户端。
在客户端接受事件流。 在客户端使用 JavaScript 代码订阅 SSE 事件流，也即创建 SSE 对象，打开服务器的连接。一旦 SSE 实例被创建，浏览器就会建立一个 HTTP 长连接，并且在事件流源端更新数据时，实时向浏览器发送事件。浏览器接收到事件后，可以自动触发相应的事件处理函数。
SSE 的特点
相对于 WebSocket 技术，SSE 技术有以下特点：
SSE 协议基于标准的 HTTP 协议，并且仅使用一个 TCP 连接，因此更加稳定可靠。
SSE 协议仅支持服务器向客户端单向传输数据，这使得其更加简单和易于实现。
SSE 技术的编程方式与普通的 AJAX 请求非常类似。在使用 SSE 技术时，只需要使用浏览器的 API 就能轻松实现长连接，并且不需要使用其他的特殊程序库。
SSE 的实践应用
SSE 技术可以应用于很多需求实时传输数据的场景，例如：
- 在一个电商网站上实现实时显示库存数据。
- 在一个聊天应用程序中发送实时消息。
- 在一个股票行情网站上实时显示股票价格波动情况等。
接下来，我们将在一个简单的聊天室应用程序中，演示如何使用 SSE 技术来实时传输消息。
服务端
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
-- -------
----- -------- - ---
-------------------------------- - ------------
------------------------------- --------- ----- ----
-- -----
-------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
-- ---------------- - -- -
---------------- - - ------------------------ - --------
--------------- - --
-
-- ------
---
-- -------
--------------------- ----- ---- -- -
----- ----------- - ---------
---------------------------
---------------
---
-----------------在服务端实现中，我们首先设置了一个事件流，每秒钟向事件流中推送一个 JSON 格式的数据对象。该数据对象包含了聊天室中所有的消息记录。在 POST 请求处理函数中，将通过请求体中的消息创建一个 JSON 对象，并存储在 chatData 中。
客户端
--------- -----
------
------
----- ----------------
------------------
-------
------
------------
---- -------------------
------
----- -------------- --------------
------ ----------- ----------- ---------------- ----------
------ ----------- -------------- ------------------ ----------
------- -------------------------
-------
------- -----------------------
----- -------- - --- -------------------------
------------------------------------ --- -- -
----- ---- - -------------------
----- -------- - ---------------- -- -
------ ----- - ------------ - -- - - --------------- - -------
---
----- -------------- - ------------------
----- ------------ - -----------------------------------------
---------------------- - ---------------
---
----- -------- - -------------------------------------
----------------------------------- --- -- -
-------------------
----- -------- - --- -------------------
------------------ -
------- -------
----- --------
---
-----------------
---
---------
-------
------- 在客户端实现中，我们首先创建了一个 EventSource 对象，用于监听事件流中的消息变化。当浏览器接收到来自事件流的某个消息时，将自动触发一个 message 事件，我们可以在该事件的处理函数中来更新聊天窗口中的内容。同时，我们还需要在表单提交时将表单数据发送给服务器 端。
总结
本文介绍了 Server-sent Events 技术的实现原理、特点、实践应用等相关知识，希望读者能够在实际开发中使用该技术来实现实时通知功能。Server-sent Events 技术不仅方便实用，而且可以用于很多实时数据传输的场景，具有很强的实用性和推广价值。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64edc6e0f6b2d6eab37ef9a3