前端实时更新已经成为现代 Web 开发的标配。除了 WebSockets 和 Ajax 长轮询这类技术之外，Server-Sent-Events（SSE）也是一种不错的选择。SSE 是一个 HTTP 基于的协议，它允许客户端从服务器端接收实时的推送数据。
借助 SSE，我们可以在前端无需常规的轮询方式下一次次询问服务器是否有新数据的情况下实现实时更新。考虑到 SSE 是一个 HTTP 基础协议，因此它适用于任何 Web 应用程序和框架。
在本篇文章中，我们将介绍如何使用 SSE 进行实时更新，以及如何结合 ASP.NET MVC 框架来实现这一目标。
了解 Server-Sent-Events
SSE 实现了可持续的 HTTP 连接，其支持一个持续开放的响应通道，从而使浏览器能够实时地从服务器端接收数据。它也支持使用 HTTP/1.1 中的 chunked 编码/解码。
SSE 协议为浏览器定义了一个新的 JavaScript API，即 EventSource，并且它可以使用响应头 "Content-Type: text/event-stream" 和响应主体的一系列按对齐的字符串表示各个数据段。每个数据段都包含一个或多个字段，通过换行符进行分隔。其示例如下：
-- -------------------- ---- ------- ------------- ----------------- ------ ---- ----- -------- ---- ------ ---- ----- -------- ---- ------ ---- ----- -------- ---- ------ -----
当浏览器接收到 SSE 数据流的数据段时，它会触发 JavaScript API onmessage 事件，从而让我们能够处理这些数据。
下面我们来看一个例子：
-- -------------------- ---- ------- --- ----------- - --- ------------------------ ------------------------------------ ----------- - -------------------- --- ------------------------------------- ----------- - ------------------------ ---------- --------- ---
在该例子中，我们在服务器端使用 SSE 向客户端发送了 ping 和 close 事件。然后我们在前端注册了事件监听器来接收事件数据。
结合 ASP.NET MVC 实现 SSE
了解了 SSE 和其原理，我们接下来考虑如何使用 SSE 并结合 ASP.NET MVC 实现实时更新。
首先，我们需要创建一个带有 SSE 响应的 ASP.NET MVC 控制器：
-- -------------------- ---- -------
------ ----- ------------- - ----------
-
------ ------------ -------
-
-------------------- - --------------------
--------------------- - -----------
--- -------- - ---------------------------
--- ------- - -------------------- --- ------ ---- --- --------- ----------
------------------------
-----------------
------ --- --------------
-
-在这个例子中，我们返回一个带有时间戳的数据段，然后将 SSE 响应的内容传递给客户端。
接下来，我们需要修改我们的视图（View）以便在浏览器中显示实时数据：
-- -------------------- ---- -------
------
------
------------- ---- -------------
-------
------
---- ------------------
--------
--- ------ - --- --------------------------
---------------- - --------------- -
------------------------------------------- -- ---------- - -------
--
---------
-------
-------最后，我们需要在浏览器中打开我们的应用程序并加载该视图即可。
到此为止，我们已经成功地使用 SSE 和 ASP.NET MVC 实现了实时更新。
结论
使用 SSE 和 ASP.NET MVC 实现实时更新非常简单。SSE 是一种轻量级、可伸缩、可靠的协议，它适用于各种 Web 应用程序和框架。
在使用 SSE 进行实时更新时，我们建议你考虑使用 ASP.NET MVC 框架。该框架使用简单，可用于构建任何规模的应用程序。
示例代码：
-- -------------------- ---- -------
----- -------
----- -----------------
----- ---------------
--------- ---------------
-
------ ----- ------------- - ----------
-
------ ------------ -------
-
-------------------- - --------------------
--------------------- - -----------
--- --- - --- --------------------------
--- ---- - --- ------------ -- --
-
-------- ----- - ------------------------------------------------------- - - ------------ ----------- ------------ ------------------------------------------------ ------------------------------------------
-------- ----- - ------------------------------------------------------- - - ------------ ----------- ------------ ------------------------------------------------ ------------------------------------------
-------- --- - -----------------------------
-------- --- - -----------------------------
-- ---------- -- - -- --------- -- ---------
-
---------------------- ----------- - - --------------------------- - --------
-----------------
-
----- ----------------------------------------
----- ------------------------------------
-
-------- -------- - -------------
------ ------- - -----------------------
---------------------- ------------------ - - ------- - --------
-----------------
----- ----------------------------------------
-
---
-------------
------ --- --------------
-
--------- -------- ---- -------------------------------------- --------------
-
-- ------------------------ -- -----
-
----------------------- --- - ------------------------------------------ -- ------------------------
-- ---- -- -----
-
-------------
-
-
-
-
--- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
------
------- ---------
---- -----------------------
---- ---------------------------
--------
--- --------- - --- --------------------------
----------------------------------------- -------- ----- -
--- ---------- - ------------------------------
-------------------- - ------- ----- - - ---------
--- ---------- - ---------------------------------------
----------------------------------- -----------------------
-- -------
---------------------------------- -------- ----- -
--- ---------- - ------------------------------
-------------------- - ----- -- -- ----- - - ---------
--- ------------ - -------------------------------------------
------------------------------------- -------------------------
-- -------
------------------------------------ -------- -- -
------------------
-- -------
--------------------- - -------- -- -
------------------
--
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c7bfdddd3a70eb6d854a0