在 Web 开发中，前后端交互是非常重要的一个环节。传统做法是利用 AJAX 或 WebSocket 向后端发送请求，并接收响应。然而，这种方式有时并不理想，因为它会增加服务器的负担，同时也有跨域的限制。近年来，Server-Sent Events（SSE）成为一种新的前后端交互方式，它能解决以上问题，并且具有高效、可靠、易用等特点。
什么是 Server-Sent Events
Server-Sent Events 是一种 Web 技术，用于实现服务器端向客户端实现单向实时通信。它基于传统的 HTTP 协议，使用 SSE 的页面通过 HTTP 连接与服务器保持长连接，并从服务器端接收事件流。SSE 协议定义了一些特定的 HTTP 头字段和事件类型，以及一种特定的数据格式。可以说，它是推送技术、流技术、长轮询等技术的综合，同时避免了这些技术所存在的缺点。
SSE 构成
SSE 很少使用新的技术组件，而是建立在以下三个基础之上：
HTTP：SSE 建立在 HTTP 的基础上，使用 HTTP 协议从服务器获取事件流数据，包含一些特定的头部字段和数据格式。EventSource对象：SSE 是通过 EventSource 对象在 JavaScript 中启用的。客户端通过将 URL 传递给构造函数来连接服务器，然后处理来自服务器的事件流。文字事件流：SSE 是通过纯文本事件流传递数据的。这种简单的数据格式使它容易处理。使用 SSE，在服务端产生的每个事件都与一个默认或指定的事件类型相关联。
SSE 的工作原理
使用 SSE，客户端首先与服务器建立长连接，直到肯定状态。在此期间，服务器不断向客户端推送不同的信息，可以是以 JSON 格式传递的文本数据、二进制数据或 HTML 片段。服务器会给每个事件设置一个指定的名称或事件类型，以便让客户端能够理解它。在某些情况下，客户端可以通过设置上次接收事件的 ID 来避免重复获取事件。
从技术上讲，SSE 背后的工作原理是使用 HTTP 长连接和“MIME 类型 text/event-stream”（每个数据块之间带有换行符）。这意味着服务器会持续推送数据块，每个数据块都是一个事件，并且以响应的 MIME 类型传输。客户机必须通过创建“EventSource”对象打开连接，该对象通过JavaScript API 获取从服务器端发送的事件。通过 SSE，客户端可以轻松地接收不同类型的事件，并且不需要实现任何复杂的方案。
SSE 的优点
相比传统的Request/Response模式，SSE有以下特点：
- 服务器可以主动推送新信息，而不需要等待客户端的请求。
- SSE 基于 HTTP，并且不需要一个远程主机的 WebSocket 或特殊的服务器配置。
- 可以轻松处理跨域问题。
- 无需轮询，减轻了服务器和浏览器的负荷。
- SSE 有超时机制，避免节省的时间和资源浪费在无用的连接。
- SSE API简单易用，适合前端开发者使用。
Grunt 的安装与配置
如果你不熟悉 Grunt ，推荐阅读一下初识 Grunt，接下来以 Windows 系统为例，介绍 Grunt 的安装及相关配置。
首先，你需要安装 Node.js 。可以直接从Node.js 官网下载安装程序，安装完成后在命令行输入以下命令验证 Node.js 是否安装成功：
node -v
若返回版本号，则说明 Node.js 安装成功。
下载安装 Grunt ，在命令行执行以下命令：
npm install -g grunt-cli
注意，上述命令可能需要以管理员身份运行，安装完成后，我们可以通过以下命令验证 Grunt 是否安装成功：
grunt -version
若返回版本号，则说明 Grunt 安装成功。
在使用 Grunt 之前，我们需要创建一个 package.json 文件，在命令行执行以下命令：
npm init
在执行过程中，按照提示逐步输入项目的名称、版本、描述等信息，最后会生成一个 package.json 文件。
安装 Grunt 插件，执行以下命令：
npm install grunt-contrib-watch grunt-contrib-sass grunt-contrib-uglify --save-dev
使用 --save-dev 可以将安装的插件信息自动添加到 package.json 文件中的 devDependencies 属性中。
在项目的根目录下，创建一个 Gruntfile.js 文件，这是 Grunt 的配置文件。在这个配置文件中，你需要定义你将如何使用 Grunt 来构建和测试你的项目。
-- -------------------- ---- ------- -------------- - --------------- - -- ------- -------------- ------------------ ---- ------------------------------------ -- ---- ------ - -------- - ----------- ---- -- ---- - ------ ---------- -------------- ------ --------- -------- - ------ ----- - -- --- - ------ ------------- ------ ----------- -------- - ------ ----- - - -- -- -- ---- -- ----- - ----- - ------ - ----------------------- --------------- - - -- -- ---- ------- - -------- - ------- ---- --- -------- -- --- ---------------------------------- -- ----- -- ------ - ---- ----------- ----- -------------------------- - - --- -- -- ----- -- ------------------------------------------ ----------------------------------------- ------------------------------------------- -- ---- ----------------------------- ----------- --
配置文件由三部分组成：initConfig()、loadNpmTasks() 和 registerTask()。
SSE 与 Grunt 的结合
下面，我们来实现 SSE 和 Grunt 的结合。首先，我们需要一个能够生成 SSE 事件的后端程序。在本例中，使用 Python 进行后端开发，代码如下：
-- -------------------- ---- -------
---- ----- ------ ------ --------
------ ----
--- - ---------------
---------------------
--- ---------
--- -----------
- - -
----- -----
----- ------- ------------ ------- - -
- -- -
-------------
------ -------------------- ---------------------------------
-- -------- -- -----------
---------在 stream() 函数中，每隔 1 秒钟生成一个名为 count 的事件，并推送给前端。客户端可以在收到事件时进行相应的处理。
在 Grunt 配置文件中，我们主要定义了三个任务：
watch任务用于监控文件的修改情况。一旦发生变化，我们就会调用sass或uglify任务来编译文件。sass任务用于编译 Sass 文件，并将编译后的 CSS 文件输出到dist/styles/main.css文件中。uglify任务用于压缩 JavaScript 文件，并将输出结果输出到dist/scripts/main.min.js文件中。
-- -------------------- ---- -------
-------------- - --------------- -
-- ------- --------------
------------------
---- ------------------------------------
-- ----
------ -
-------- -
----------- ----
--
---- -
------ ---------- --------------
------ ---------
-------- -
------ -----
-
--
--- -
------ -------------
------ -----------
-------- -
------ -----
-
-
--
-- -- ---- --
----- -
----- -
------ -
----------------------- ---------------
-
-
--
-- ----
------- -
-------- -
------- ---- --- -------- -- --- ---------------------------------- -- -----
--
------ -
---- -----------
----- --------------------------
-
-
---
-- -- ----- --
------------------------------------------
-----------------------------------------
-------------------------------------------
-- ----
----------------------------- -----------
--最后，我们在前端页面中使用 SSE 实现前后端的交互。下面是一个简单的页面示例：
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------ ------------
----- --------------------------- -----------------
-------
------
---- ------------------
--------------- ------ ---------
-- ----------------
------
--------
--- --------- - --- -----------------------
------------------- - ----------- -
--- ------ - ----------------------------------
--- ---- - -------------------
---------------- - ------- - - -----------
-
---------
-------
-------在页面中，我们使用 EventSource 对象创建 SSE 连接，并且在接收到后端信息时进行更新。通过 SSE 的方式，我们可以实现在页面不刷新的前提下，实现前后端之间的实时交互。
总结
本文主要介绍了 Server-Sent Events（SSE）的基本概念和工作原理，以及如何在 Grunt 中使用 SSE 实现前后端实时交互。与传统的 AJAX 和 WebSocket 相比，SSE 具有跨域容易、无需轮询、降低服务器压力和易用等优点，具有很好的应用前景。对于前端工程师而言， Grunt 作为一个强大的前端构建工具，也可以方便的与 SSE 集成，实现高效的前后端交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648b171648841e9894976fba