在这个快速变化的时代，实时通信变得越来越重要。而对于前端开发人员而言，Server-Sent Events（SSE）是构建实时通信功能的一个不错的选择。在本文中，我们将探讨如何在 ASP.NET 中使用 SSE 构建实时聊天室。
什么是 Server-Sent Events？
Server-Sent Events（SSE）是 HTML5 新增的一种浏览器与服务器通信方式。SSE 使得浏览器可以接收来自服务器的事件流（Event Stream），并实时展示给用户。SSE 的优势在于它可以与 HTTP 协议兼容，即不需要像 WebSocket 那样额外建立握手连接。
SSE 的工作原理
SSE 是一种简单的“长连接”实现方式，也就是说 SSE 可以通过保持连接的方式，持续接收来自服务器的事件流，从而将这些事件流实时展示给用户。下图为 SSE 的工作原理：
构建实时聊天室
在本文的示例中，我们将构建一个简单的实时聊天室应用。在这个聊天室中，任何人都可以发送消息，而这些消息将会在所有连接到聊天室的用户中实时展示。
准备工作
在我们开始编写代码之前，需要先安装一些必要的软件。首先，我们需要安装 ASP.NET Core 和 Visual Studio（建议使用 Visual Studio 2019）。
接下来，我们需要创建一个 ASP.NET Core 项目。这可以通过执行以下命令来完成：
dotnet new web -n ChatRoom
执行完上述命令后，将会创建一个名为 ChatRoom 的 ASP.NET Core 项目。
编写代码
添加聊天室页面
我们首先需要添加聊天室的页面。在 Views 目录下创建一个名为 ChatRoom.cshtml 的文件，并将其内容设置为以下内容：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------------
-------
------
---- -----------------------------
----- ------------------
------ ----------- -------------------
------- ---------------------------
-------
-------
-------上述代码创建了一个简单的 HTML 页面，其中包含一个消息输入框、一个发送消息按钮和一个消息展示容器。
实现 SSE
接下来，我们需要实现 SSE。在 Controllers 目录下创建一个名为 SSEController.cs 的文件，并将其内容设置为以下代码：
-- -------------------- ---- -------
----- -------------------------
----- -----------------------------------------
----- -------
----- ------------
----- -----------------------
--------- --------------------
-
------ ----- ------------- - ----------
-
------- -------- -------------------- ---------------------
------ ---------------------------------- --------------------
-
-------------------- - --------------------
-
-----------------
------ ----- ---- -----
-
--- -------- - ---------
------------------------------------ ---------------------
------------------------------------- ------------
---------------------------------- --------------
--- ------ - --- --------------------------- ---------------
--- --------- - --------------------------
----- -------------------------- ---------------- ------------------
----- ------
-
---
-
--- ----- - -----------------------------------
--- --------- - -----------------------------------------------------------------
--- ----------- - ----- ------------------------------------
------- ---- - -- ------------
-
----- ------------------------- ------------------
-
-
----- ---------- --
-
----- -------------------------- ------------ ------------------
------
-
----- --------------------
----- -----------------
-
-
-
-上述代码创建了一个名为 SSEController 的控制器，并实现了 SSE。在 SSE 中，我们使用了 StreamWriter 将事件流写入到 Response 中，并在循环中实时检查数据库中是否有新的聊天记录。在这个示例中，我们使用了 Entity Framework Core 进行数据库操作。
处理消息发送请求
接下来，我们需要处理用户发送消息的请求。在 Controllers 目录下创建一个名为 ChatController.cs 的文件，并将其内容设置为以下代码：
-- -------------------- ---- -------
----- -------------------------
--------- --------------------
-
------ ----- -------------- - ----------
-
------- -------- -------------------- ---------
------ ----------------------------------- --------
-
-------- - --------
-
---------------------------
------ ------------- ---------------------- ------ --------
-
-- -------------------------------
------ -------------
---------------------------- -----------
-
------- - --------
---
-----------------------
------ -----
-
-
-上述代码创建了一个名为 ChatController 的控制器，并处理了用户发送消息的请求，这里我们使用了 Entity Framework Core 进行数据库操作。
实现前端代码
最后，我们需要实现前端代码。在 wwwroot 目录下创建一个名为 chat-room.js 的文件，并将其内容设置为以下代码：
-- -------------------- ---- -------
--- ------ - --- --------------------
--- ---------------- - ---------------------------------------------
--- ----------- - ----------------------------------------
--- ------------ - -----------------------------------------
---------------- - -------- ------- -
--- ------- - -----------------------
-------------------------- - -------------------------------------------------
--
-------------------------------------- -------- ------- -
-----------------------
--- ------- - --------------------------
-- -------- --- --- -
-------
-
---------------------- -
------- -------
-------- -
--------------- -----------------------------------
--
----- ----------------------------------------
---
------------------ - ---
---
-------------- - -------- ------- -
------------------ ------- -------
--上述代码实现了前端代码，并在 source.onmessage 中实时接收服务器发送的 SSE 事件并展示在聊天室页面上。
总结
本文介绍了如何在 ASP.NET 中使用 SSE 构建实时聊天室应用，包括如何实现 SSE、如何处理消息发送请求和如何实现前端代码。希望此文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e6d5e95b1f8cacd614046