介绍
SSE（Server-Sent Events，服务端推送事件）是一种基于 HTTP 的协议，它允许服务端向客户端推送实时的数据流。SSE 优于轮询的方法，因为它消耗更少的带宽和服务器资源，并且能够实现更快的响应时间。
在前端开发中，使用 SSE 可以实现实时更新的功能，例如实时的消息通知、实时的数据变化展示等。本文将介绍如何使用 SSE 实现服务端向 Web 客户端推送实时数据，以及实现一个简单的聊天室应用。
基本原理
使用 SSE 实现服务端推送数据到 Web 客户端的基本原理是，客户端通过向服务端发起 HTTP 连接请求，服务端开启一个长连接，并将数据流通过此连接推送到客户端。
SSE 使用 text/event-stream MIME 类型传输数据，所以服务端需要设置该 MIME 类型。同时，客户端通过监听 message 事件，实现接收到数据流后的一些处理操作。
开发实例
下面是一个简单的服务端推送数据到 Web 客户端的示例代码。这个示例基于 Node.js 平台和 Express 框架实现。
客户端实现
客户端通过监听 message 事件，来接收服务端推送过来的数据。具体实现如下：
const source = new EventSource('/messages');
source.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log(data);
};服务端实现
服务端代码如下，简要解释一下，首先在客户端发起一个请求，服务端创建一个 SSE 连接，将该连接发送给客户端。然后，服务端向客户端不断地推送数据。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-------------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------------
--- -- - --
-------------- -- -
-------------- ----------
---------------- ------------------ -------- ------ ------- ----------
-----
-- ------
---
---------------- -- -- -
---------------------- -- ---- -------
---实现一个聊天室应用
SSE 可以用来实现实时的聊天室应用，下面是一个简单的聊天室应用的示例代码：
客户端实现
客户端与之前相同，监听 message 事件的同时，将服务端推送过来的数据展示到页面上。
const source = new EventSource('/chat');
source.onmessage = function(event) {
const data = JSON.parse(event.data);
const messageEl = document.createElement('div');
messageEl.innerText = `${data.username}: ${data.message}`;
document.getElementById('messages').appendChild(messageEl);
};服务端实现
服务端代码包含了两个路由，分别用于接收用户发送的消息和服务端向客户端推送消息。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------------------
---------------------------- --------- ---- ----
----------------------------------
-------------------- ----- ---- -- -
----- ---- - ---------
-- --------------- -- -------------- -
------ ---------------------- ------ -------- -------- ---
-
----- ------- - -
--------- --------------
-------- ------------
--
---------------------- ------- ---
---
---------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------------
--- -- - --
-------------- -- -
----- ------- - -
--------- ------- -----
-------- ------ -------
--
-------------- ----------
---------------- ---------------------------------
-----
-- ------
---
---------------- -- -- -
---------------------- -- ---- -------
---总结
本文介绍了 SSE 的基本原理以及如何使用 SSE 实现服务端向 Web 客户端推送实时数据。同时，通过一个简单的聊天室应用实例，展示了 SSE 应用的实际场景。在实际开发中，可以使用 SSE 实现更多实时数据的展示和交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6540b4567d4982a6eba3d5ce