前言
随着互联网的飞速发展，人们获取新闻和社交动态的方式也在不断变化。Web 前端作为互联网的重要组成部分之一，为了更好地满足用户的需求，不断更新技术和提升用户体验也成为了我们工作的必修课。
在这篇文章中，我们将会介绍一种新的推送技术——Server-Sent Events（SSE），并通过一个实际案例来阐述它在社交动态和新闻资讯的应用方法。
Server-Sent Events 概述
SSE 是一种浏览器端接收服务器端数据推送的技术，使用 SSE 可以实现服务器向浏览器每秒钟发送多个可读事件。这种技术不需要 JavaScript 定时请求服务器，而是服务器定时向浏览器发送数据。相比于 AJAX 和 Websocket，SSE 是一种比较简单易懂的技术。
SSE 它的实现基于 HTML5 的 EventSource API。可能你已经听说过 EventSource API，如果你没有听说，它是一个接收来自服务器端的信息的 API，其使用方式非常简单。只需要在服务器上创建一个可发送带有特定 MIME 类型的数据流，然后客户端就可以在浏览器中通过 JavaScript 使用 EventSource() 函数来打开当前流，从而接收来自服务器端的数据。
SSE 的优点：
- 实时性，可以反映服务器端数据实时变化的情况。
- 稳定性高，与 WebSocket 不同，SSE 可以使用 HTTP1.1 协议连接服务器，极低的连接关闭率。
视频社交动态和新闻资讯应用实战
让我们来看一个使用 SSE 技术实现社交动态和新闻资讯的例子。
准备工作
- 创建一个新的 Node.js 项目；
- 安装 express 框架；
- 安装 body-parser 中间件。
-- -------------------- ---- -------
-- -- ------
----- ------- - ------------------
----- ---------- - ----------------------
----- --- - ---------
-- ---- --------
--------------------------
-- ------
---------------- ----- ---- -- -
------------
--------------- -------------------- -- --------- ---
---------------- -----------
------------- -------------
------------------------------ ---
--
-------------- -- -
------------- ------ --
---------------- ------------------ ----- ------- -------- -------- ---------
-- -----
--
-- ----
---------------- -- -- -
------------------- ---------
--接下来，在前端页面中通过以下代码使用服务器端 SSE 推送来自服务器的社交动态和新闻资讯：
-- -------------------- ---- -------
-- ------------
--------- -----
----- -------------
------
----- ----------------
------------------ --------------
------- -----------------------
---------------------- --- ------------ -
----- ------ - --- -----------------------------------------
---------------------------------- --------------- -
----- - ----- ------- - - ----------------------
-- ----- --- ------- -
----------------------------------------- - -------
- ---- -- ----- --- --------- -
------------------------------------------- - -------
-
--
- ---- -
------------------- ---- ------- ---- --- ------- ----------- ------------
-
---------
-------
------
-------- ----- -----------------------
-------- ----- ---------------------
-------
-------结论
本文介绍了如何使用 Server-Sent Events 推送社交动态和新闻资讯。因为该技术对 AJAX 和 WebSocket 可以有所补充，所以在某些实时性要求不高，但数据量较大的情况下，它是一个非常不错的选择。
当然，SSE 的缺点是它只支持单向通讯，也就是服务器只能向客户端发送数据，而不能接收客户端的数据。如果你的业务需要支持双向通讯，那么 WebSocket 将是一个更好的选择。
上述代码及结论已经比较详细了，你可以尝试将此技术应用到自己的项目中，以不断提高自己的技术能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efec9c6fbf96019731545a