如何使用 Server-Sent Events 在 ASP.NET 中构建实时聊天室

在这个快速变化的时代，实时通信变得越来越重要。而对于前端开发人员而言，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 项目。这可以通过执行以下命令来完成：

------ --- --- -- --------

执行完上述命令后，将会创建一个名为 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

阅读全文

猜你喜欢

  • .NET 多线程编程中的性能优化

    在 .NET 中，多线程编程是一项关键技术，不仅在后端服务器端开发中得到广泛应用，也在前端 Web 开发中变得日益重要。当应用程序负责处理大量并发请求时，多线程能够让你的应用程序响应更快，但也带来了一...

    1 年前
  • React 中使用 React-Router 实现页面路由切换

    React 是目前最流行的前端框架之一，它让开发者可以轻松地构建复杂的交互式用户界面。而 React-Router 则提供了一种方便的方式来管理前端路由，让开发者可以更加轻松地实现页面之间的切换，使得...

    1 年前
  • 在 Sequelize 中使用 Scope 的方法及示例

    Sequelize是Node.js的一个ORM(Object Relational Mapping)库，它能方便地映射数据库中的表到JS中的对象，同时具备CRUD操作和数据关系管理等功能。

    1 年前
  • 《生产环境中如何减少 ESLint 检查对代码性能的影响》

    在前端开发过程中，ESLint 是一个常用的代码检查工具。它能够帮助我们发现代码中的错误、潜在问题以及风格问题，让我们的代码更加健壮、可维护和规范化。然而在生产环境中，ESLint 检查对代码性能可能...

    1 年前
  • 如何在 Tailwind CSS 中使用 PurgeCSS 来缩小生成的 CSS 文件

    在使用 Tailwind CSS 进行项目开发时，常常会遇到生成的 CSS 文件过大的问题。为了解决这个问题，我们可以使用 PurgeCSS 对生成的 CSS 文件进行精简，减少文件的大小和加载时间。

    1 年前
  • 使用 ECMAScript 2017（ES8）中的 Trailing Commas 语法优化代码

    在 ES8 中，新增了 Trailing Commas 的语法，即对象或数组最后一个元素后可以添加逗号。这个语法看起来很微不足道，但是在日常的前端开发中却能起到一定的优化作用。

    1 年前
  • RxJS 详解之 Subject：解决数据流在多个 Observer 之间的交互问题

    前言 在前端开发中，随着 Web 应用的日渐复杂，异步编程已经成为了基本的技能之一。而 RxJS 作为一个强大的异步编程库，已经得到了广泛的应用。其中，Subject 是 RxJS 中的一个关键概念，...

    1 年前
  • PWA 技术如何优化 WebAPP 的首屏渲染速度？

    随着移动设备的普及，WebAPP 的使用率也越来越高。但是，WebAPP 在渲染速度上却存在一定的问题，尤其是在低端设备上。为了解决这个问题，PWA 技术应运而生。

    1 年前
  • 解决 Jest 测试框架在 CI/CD 环境下的 pipeline 错误问题

    Jest 是一个非常流行的 JavaScript 测试框架，它可以帮助开发人员进行单元测试、集成测试等多种类型的测试。然而，在 CI/CD 环境下，我们经常会遇到 Jest 在 pipeline 运行...

    1 年前
  • MongoDB 使用 $unwind 操作符处理数组数据的技巧探讨

    在前端开发中，我们经常需要从后端接口中获取包含有数组类型数据的 JSON 结构数据。在 MongoDB 中，我们可以使用 $unwind 操作符来将包含数组的文档拆分成多个文档，这样可以使得数据更加易...

    1 年前
  • 从 ECMAScript 2019 到 ES6：JavaScript 基础语法总结

    前言 JavaScript 是现代 Web 开发中必不可少的编程语言之一。随着 ECMAScript 标准的不断更新和提升，JavaScript 不断地发生变化。因此，及时掌握最新的 ECMAScri...

    1 年前
  • ECMAScript 2021 中的 Class 元素使用教程及其代表的编程范式

    ECMAScript 2021 中的 Class 元素使用教程及其代表的编程范式 ECMAScript（简称 ES）是一种脚本语言，主要用于网络上的浏览器应用程序（例如网页）的编写。

    1 年前
  • Koa2 实现权限控制之 jsonwebtoken

    引言 在前后端分离的应用开发过程中，实现后端接口的权限控制是非常必要的，常见的标准是采用 JSON Web Token（JWT）。 JWT 是一个开放标准，由三部分组成：Header、Payload ...

    1 年前
  • PM2 进程重启后如何保证状态恢复

    在前端开发中，我们经常会使用 PM2 来管理我们的 Node.js 应用程序。但是，在应用程序的运行过程中，我们难免会遇到一些问题，例如应用程序出现了错误或崩溃。 为了解决这些问题，我们通常使用 PM...

    1 年前
  • 解决 Serverless 部署时出现 Lambda 函数无法执行的问题

    Serverless 架构是一种比传统架构更为现代化的方式，它消除了对服务器的依赖，使得开发者可以专注于业务逻辑而不是服务器的配置和维护。AWS Lambda，Azure Functions 和 Go...

    1 年前
  • SASS 中的颜色类型及转换方法

    在前端开发中，颜色是一个常见的元素。使用 SASS 可以极大地提高前端开发效率，其中颜色类型及转换方法是 SASS 的重点之一。 颜色类型 在 SASS 中，颜色类型有以下四种： 十六进制颜色（He...

    1 年前
  • Web Components 的跨框架复用问题及解决方案

    随着 Web 技术的发展，Web Components 作为一种前端技术被越来越广泛地应用于项目开发中，具有良好的可复用性和可维护性。然而，在跨框架使用 Web Components 的过程中，可能会...

    1 年前
  • Babel 项目升级到 7.x，原来的配置遇到了什么问题？

    随着前端技术的不断发展，许多项目需要采用最新的语言特性来提高开发效率和代码质量。然而，由于支持不同浏览器和环境的差异，新特性在不同环境下的支持情况也不尽相同。这就需要我们使用 Babel 这样的转译工...

    1 年前
  • 使用 ES9 的正则表达式提高代码的可靠性（Improving code reliability with ES9 regular expressions）

    随着互联网技术的发展，前端开发迅速发展。然而，面对着越来越复杂的业务需求，代码的可靠性成为了前端开发人员关注的焦点。幸运的是，ES9 的正则表达式使得编写可靠的代码变的更加容易。

    1 年前
  • 解决 Next.js 在 IE11 上出现白屏的问题

    背景 近年来，在项目开发中使用前端框架已成为了一种趋势，Next.js 是一个基于 React 的框架，具有多种优秀的特性，例如自动代码分割，服务器端渲染以及静态导出等等。

    1 年前

相关推荐

    暂无文章