随着 Web 技术的不断发展，为了实现实时性的互动体验，越来越多的 Web 应用程序开始启用实时通信技术。在这篇文章中，我们将探讨如何使用 .Net 平台和 Server-Sent Events 技术来构建实时 Web 应用程序。
什么是实时 Web 应用程序？
实时 Web 应用程序是指能够在客户端与服务端之间建立实时、持续的连接，并在服务端和客户端之间高效、即时地交换数据的应用程序。典型的实时 Web 应用程序包括聊天室、在线游戏、股票价格实时更新等。
Server-Sent Events 概述
Server-Sent Events (SSE) 是一种基于 HTTP 的服务器推送技术，在 SSE 中，服务端可以向客户端发送数据，而不需要客户端发送请求。这是与传统的 HTTP 请求/响应模型不同的一种通信方式。
SSE 的工作原理如下：
- 客户端与服务端建立长连接。
- 服务端将数据发送到客户端。
- 客户端接收到数据后，可以通过 JavaScript 处理数据。
SSE 常用的 MIME 类型是 text/event-stream，服务端可以使用 http://example.com/api 的形式进行 URL 设计。
如何使用 .Net 和 Server-Sent Events 构建实时 Web 应用程序
- 新建 .Net Web 应用程序
在 Visual Studio 中新建一个空的 .Net Web 应用程序，并定义一个 http://example.com/api 的路由。
- 声明一个 SSE 控制器
在 Controllers 文件夹下新建一个 SSEController.cs 文件，并添加以下代码：
-- -------------------- ---- -------
----- ---------------
--------- --------------------------
-
------ ----- ------------- - ----------
-
------ ------------ -------
-
-------------------- - --------------------
--------------------- - ------
------ --- --------------
-
-
-在 Index 方法中，我们设置响应的内容类型为 text/event-stream，设置缓冲输出为 false，返回一个空的 ActionResult。
- 编写 SSE 事件处理程序并绑定到 SSE 控制器
在 SSEController.cs 文件中添加以下代码：
-- -------------------- ---- -------
------ ----- ------------- - ----------
-
------ ------------ -------
-
-------------------- - --------------------
--------------------- - ------
--- ---- - - -- ----- ----
-
-- -- --- --
------ ------- - ------- ---------
-- -- --- --
------------------------
-----------------
-- -- - --
-------------------
-
-
-在这个控制器中，我们使用一个 for 循环产生服务器发送的事件流数据，每次发送时等待 1 秒钟，向客户端发送一个带有 data 字段内容的数据。
- 在客户端添加 JavaScript 处理 SSE 数据
在 js 文件中添加以下代码：
var source = new EventSource('/api/sse');
source.onmessage = function (event) {
console.log(event.data);
};在客户端我们使用 JavaScript，创建一个 EventSource 对象，并在事件源上添加了一个 onmessage 属性，当服务端发送的数据到达时，调用 onmessage 函数来处理数据，这里我们只是简单的将数据打印在控制台上。
- 运行应用程序并测试
现在我们可以运行我们的应用程序，并在控制台上观察到 SSE 服务器不间断发送着数据到客户端。
总结
本文讲述了如何使用 .Net 平台和 Server-Sent Events 技术来构建实时 Web 应用程序。通过了解 SSE 技术的原理和使用方法、编写 SSE 服务器代码以及编写 JavaScript 处理 SSE 数据代码，并在浏览器上测试了服务器的 SSE 数据推送效果。这种实时通信技术已被广泛应用于实现实时性的互动体验，希望本篇文章对读者有所启发，让大家在开发实时 Web 应用程序时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cbff895b1f8cacd43efa3