Server-sent Events 是一种允许服务器向客户端推送事件的技术。与 WebSocket 不同，它使用 HTTP 协议而不是 TCP 协议。这意味着它更容易实现、更具可扩展性，并且可以与现有的 HTTP 基础设施集成。
在本篇文章中，我们将讨论 Server-sent Events 的技术实现的思考，并且深入探讨其潜在的学习和指导意义。
什么是 Server-sent Events？
Server-sent Events（简称为 SSE）是一种用于向 Web 浏览器发送即时事件的 Web 技术规范。与长轮询（long-polling）等技术不同，SSE 中的服务器向客户端主动发送数据。这种技术旨在减少 Web 应用程序的轮询次数，从而节省带宽和资源。
服务器可以向浏览器发送包含任意文本消息的事件。浏览器可以通过 EventSource 接口订阅这些事件。最常见的用例是用 SSE 构建实时通知系统、股票价格更新或者用于在线聊天室。
如何实现 Server-sent Events？
在服务器端，需要发送应用/json 或者 text/event-stream 格式的消息，并且设置正确的 MIME 类型。text/event-stream 类型的数据是一系列以 “data:” 开头并以两个换行符结尾的数据块。例如：
data: This is the first message \n data: This is the second message \n data: This is the third message \n\n
其中，消息必须以 “data:” 开头，后面跟着要发送的文本消息。
在客户端中，可以使用 EventSource 对象来接收从服务器发送的事件。通过监听 message 事件，可以获取事件的数据。例如：
var source = new EventSource('/sse');
source.onmessage = function(event) {
console.log(event.data);
}这个例子中，当有新的事件被发送到 /sse 页面时，onmessage 回调被触发，并且可以将事件数据在控制台中进行打印。在实际应用中，可以将事件数据用于更新 UI 或者与服务器进行实时通信。
学习和指导意义
Server-sent Events 技术具有以下几个学习和指导意义：
实时通信：SSE 技术支持实时通信，这对于需要同时协作工作的团队非常重要。对于聊天室或者实时协作应用程序而言，这种技术是必备的。
节省带宽和资源：SSE 技术的另一个优点是能够减少无用的轮询。与常见的轮询模式相比，SSE 技术利用服务器发出事件的机制来实现更可靠的应用程序。
适用于广泛的应用场景：除了聊天室或者实时协作应用程序之外，SSE 技术还适用于数据可视化、实时股票价格追踪、在线游戏等多种应用场景。
支持老旧的浏览器：SSE 技术可以在最新的浏览器中使用，但也可以在老旧的浏览器上使用 polyfill 进行支持。这使得 SSE 技术能够适用于广泛的客户端环境。
示例代码
下面是一个基本示例代码，它使用 Node.js 和 Express 框架来实现服务器端 SSE 技术的支持：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- --------- ----------
-------------------------------- - ------------
--- ----------- - ---
--- --------- - --
-- -- --- --
--------------- ----- ---- -- -
-- ------
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ---------
-------------------
-- ----------- ----------- ---
----- ---- - -
--- ------------
---
--
-----------------------
-- ------
--------------- -- -- -
----------------------- ---------- ---------
----------- - -------------------- -- ---- --- ---------
---
---
-- -- ---- ----- --- ----
-------------------- ----- ---- -- -
--- ---- - ---
-------------- ----- -- -
---- -- -----------------
---
------------- -- -- -
--------------------- -- -
-- -------------------
------------------ --------------
---
--------------------
---
---
-- -----
----- ------ - ---------------- -- -- -
---------------------- -- ---- ---- -----------------------
---在客户端，我们可以使用如下代码来订阅这些事件：
const source = new EventSource('/sse');
source.addEventListener('message', function(event) {
console.log('New message:', event.data);
});在这个代码片段中，我们创建了一个新的 EventSource 对象，它会连接到 /sse 路由。当服务器向客户端推送新消息时，它们将通过 message 事件进行捕捉，并将其记录在浏览器的控制台中。
结论
在本篇文章中，我们深入探讨了 Server-sent Events 技术的实现方式，并且提到了它的学习和指导意义。通过使用 SSE 技术，我们可以在 Web 应用程序中实现实时通信、可靠的轮询模式以及减少带宽和资源的浪费。同时，我们提供了用于服务器端和客户端的示例代码，以帮助读者更好地理解如何使用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6723b0c42e7021665e11239e