引言
在我们的 web 应用中，实时消息通常是必须的功能之一。前端实现实时消息通常采用轮询或者是使用 WebSocket 技术。然而，当数据量很大时，轮询技术在性能上表现并不好。而 WebSocket 等技术需要在服务器上部署，且需要进行一些复杂的配置，对于没有服务器运维经验的前端开发人员来说，这是一个门槛。
那么，有没有一种方式，可以用简单的方式实现实时消息推送，并且能够优化性能？有的，这就是 SSE 技术。
SSE 技术是什么？
SSE（Server-Sent Events）是一种服务器向浏览器推送实时数据的技术。与轮询技术不同的是，SSE 采用单向传输，即从服务器到浏览器，浏览器不能向服务器发送任何请求。SSE 是 HTML5 新增加的特性之一，它与 WebSocket 类似，但比 WebSocket 更加简单易用。
如何使用 SSE 技术？
下面让我们介绍一下使用 SSE 技术进行实时消息推送的流程。
第一步：服务器端设置
在服务器端设置 SSE 需要向浏览器发送的数据和其它相关信息。在我们的示例中，我们使用 Node.js 作为实例演示环境。
安装 Node.js
在终端（或 Windows 命令提示符）中输入以下命令安装 Node.js：
sudo apt-get install nodejs
安装 http 模块
在终端中输入以下命令安装 http 模块：
npm install http
编写服务器端代码
在终端中输入以下命令创建一个名为 'server.js' 的新文件：
touch server.js
将以下代码复制到 'server.js' 文件中：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
---------- --- ---------- -
------------------ ------------------------------------ --------------------------- ----------------------------
-------------- -- -
---------------- -----------------------
-- ------
-
---
--------------------启动服务器
在终端中输入以下命令启动服务器：
node server.js
输出：
Server running at http://localhost:3000/
第二步：客户端设置
创建客户端页面
在终端（或 Windows 命令提示符）中输入以下命令创建一个名为 'index.html' 的新文件：
touch index.html
将以下代码复制到 'index.html' 文件中：
-- -------------------- ---- -------
--------- -----
------
------
----------- ------------
-------
------
-------- ---------
----- ---------------
---------
----- ----------- - --- -----------------------
--------------------------------------- - -- -
------------------------------------------ - -------
---
------------------------------------- - -- -
---------------- -------- ---
---
----------
-------
-------运行客户端页面
在终端中输入以下命令启动客户端页面：
firefox index.html
第三步：检查输出
在服务器和客户端的设置完成后，现在打开浏览器，前往 'http://localhost:3000' 以查看实时消息。
如何优化 SSE 技术的性能？
SSE 技术会在每次连接建立时创建一个新的连接，因此浏览器需要频繁地连接到服务器，并且服务器需要花费额外的内存资源来维护这些连接。为了优化 SSE 技术的性能，我们需要使用一些技巧，如下所述：
使用 nginx 进行反向代理
在使用 SSE 技术时，为了减少频繁的连接请求，我们可以使用 nginx 进行反向代理。反向代理会在多个客户端请求服务器时，只建立一个连接，服务器将数据流写入该连接中，而不是向每个客户端都建立连接。
禁用 Keep-Alive
在使用 SSE 技术时，我们可以禁用 Keep-Alive 功能。Keep-Alive 是一种将多个 HTTP 请求捆绑在一起的技术，它可以减少每个请求对应的 TCP 连接数量，从而提高性能。但是，对于 SSE 技术来说，每个请求都应该只处理一个数据流，所以禁用 Keep-Alive 功能可以避免不必要的连接。
使用缓存控制头部
在使用 SSE 技术时，我们可以使用缓存控制头部来优化性能。我们可以设置 Cache-Control 头部来告知浏览器不要缓存数据流的内容，这样可以避免客户端从浏览器缓存中访问服务端。
res.writeHead(200, {'Content-Type':'text/event-stream', 'Cache-Control':'no-cache', 'Connection':'keep-alive'});结论
SSE 技术是一种简单而有效的实现实时消息推送的技术。与轮询和 WebSocket 技术相比，SSE 技术更加简洁，易于实现。同时，我们也介绍了一些优化 SSE 技术性能的技巧，希望这些技巧可以帮助你更好的进行 SSE 技术的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67709142e9a7045d0d7dba48