SSE 与 Nginx 的结合使用方式介绍

前言

SSE（Server-Sent Events）是 HTML5 中的一个新特性，提供了一种从服务器向客户端推送事件的 HTTP 通讯方式。相对于传统的轮询和长轮询方式，SSE 建立在单个 HTTP 连接上，可以大量减少不必要的网络开销和服务器负载。Nginx 是目前非常流行的反向代理和 Web 服务器，它具有高效稳定和可扩展性等优势。结合 SSE 和 Nginx 的使用，可以构建高性能的实时通讯系统。

本文将介绍如何使用 SSE 和 Nginx 搭建一个简单的实时聊天室应用，并探讨其中的技术原理和实现细节。

准备工作

在开始之前，需要先安装并配置好以下工具：

  • Nginx：反向代理和 Web 服务器，用于接收和路由 SSE 请求。
  • Node.js：服务器端 JavaScript 运行环境，用于实现应用的逻辑部分。
  • Redis：内存数据库，用于保存和管理聊天室消息和在线用户。

实现过程

SSE 服务器

首先，我们需要一个 SSE 服务器，它将负责接收客户端的连接和推送实时事件。在 Node.js 中，可以使用 sse 模块来实现 SSE 服务器的功能，代码如下：

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

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

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

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

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

在上述代码中，我们首先创建了一个 HTTP 服务器，将响应头的 Content-Type 设置为 text/event-stream，表示这是一个 SSE 服务器对客户端的响应。然后，我们创建了一个 sse 实例，将其与当前请求和响应对象关联起来。当客户端向服务器建立连接时，我们使用 sse.send() 方法向其推送一个“connected”事件。最后，我们监听了 sse 实例的 close 事件，在客户端连接断开时打印一条消息。

消息和用户管理

接下来，我们需要实现一个消息管理器，用于保存和管理聊天室中的历史消息和在线用户。在 Node.js 中，可以使用 Redis 数据库来存储这些信息。以下是消息管理器的实现：

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

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

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

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

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

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

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

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

在这段代码中，我们创建了一个 Redis 客户端连接，并定义了五个函数，分别用于：

  • 添加一条新消息到 Redis 中。
  • 获取最近 count 条历史消息。
  • 添加一个在线用户到 Redis 集合中。
  • 从 Redis 集合中删除一个离线用户。
  • 获取所有在线用户。

路由和控制器

接下来，我们需要实现服务器端的路由和控制器，用于处理客户端请求和控制 SSE 服务器的行为。在路由和控制器之间，我们可以使用 Express 框架来实现。以下是路由和控制器的实现：

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

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

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

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

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

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

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

在上面的代码中，我们首先使用 Express 的 static() 方法将 public 目录作为静态文件目录服务出来。然后，我们定义了四个路由：

  • /messages：获取最近的 count 条历史消息。
  • /users：获取当前所有在线用户。
  • /messages（POST）：添加一条新的聊天消息。
  • /users（DELETE）：删除一个用户，表示其下线。

我们将这些路由定义在 app 实例中，并将其监听在 4000 端口上。

在控制器中，我们调用了 Message 模块提供的各种函数来实现相应路由的功能。其中，在 /messages 路由的控制器中，我们不仅向 SSE 服务器发送了一个新的事件，同时也将其保存到 Redis 中。

Nginx 配置

最后，我们需要将 Nginx 配置成一个反向代理，将客户端请求路由到 SSE 服务器，并进行负载均衡和安全性控制。以下是 Nginx 的配置文件：

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

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

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

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

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

在上述配置文件中，我们首先定义了一个 upstream 块，其中指定 SSE 服务器的地址和端口。然后，我们定义了一个 server 块，将其监听在 80 端口上。在 location 块中，我们将所有请求路由到 sse_backend 这个 upstream 中，并设置了几个代理头。

客户端代码

最后，我们需要编写一个客户端代码，用于与该聊天室应用进行互动。以下是简单的 HTML 和 JavaScript 代码：

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

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

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

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

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

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

在这段代码中，我们首先要求用户输入一个用户名，并对 DOM 元素进行了简单的选择和注册事件。当用户点击“加入聊天室”按钮时，我们使用 EventSource API 向 /events 路径建立 SSE 连接，并监听 message 和 error 事件。当用户发送一条新消息时，我们使用 fetch API 向 /messages 路径发送一个 POST 请求，并将消息内容和用户名打包在 JSON 格式的对象中。

总结

本文介绍了如何使用 SSE 和 Nginx 结合实现一个简单的实时聊天室应用。我们学习了如何在 Node.js 中使用 sse 模块实现 SSE 服务器、使用 Redis 实现消息和用户管理、使用 Express 实现路由和控制器、使用 Nginx 实现反向代理和负载均衡、以及使用 EventSource API 和 fetch API 实现客户端代码。在实现的过程中，我们遇到了很多技术难点，例如：兼容性问题、服务器推送和客户端接收、负载均衡和安全控制、数据持久化和管理等等。通过本文的学习和实践，读者可以掌握这些技术，并能够将它们应用到自己的项目中。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c0bd3f83d39b4881516ee2

阅读全文

猜你喜欢

  • Socket.io 和 Vue 结合使用实现即时聊天系统

    在当今的数字时代，即时聊天成为了人们生活中不可或缺的一部分，它能够方便人们随时随地地交流信息。在前端类技术中，Socket.io 和 Vue 结合使用具有极高的可扩展性和可定制性，能够很容易地实现一个...

    1 年前
  • ECMAScript 2017 中的 Object.getOwnPropertyDescriptors：如何使用

    ECMAScript 2017 中的 Object.getOwnPropertyDescriptors：如何使用 ECMAScript 2017 添加了 Object.getOwnPropertyDe...

    1 年前
  • 使用 Headless CMS 构建多平台沉浸式阅读体验

    前言 如今，Web 端不再是唯一的数字媒体传播方式。移动应用和互动电子书的普及使得阅读经历越来越多样化和丰富化。在这篇文章中，我们将探讨如何使用 Headless CMS 构建一个多平台的沉浸式阅读体...

    1 年前
  • 使用 create-react-app 快速构建 React SPA 应用

    前言 React 是一个非常流行的开源 JavaScript 库，主要用于构建用户界面。在 React 中，将界面分解成多个组件，使得代码更容易维护、复用和测试。单页面应用程序（SPA）是一种使用 A...

    1 年前
  • 解决 Material Design 中 EditText 光标颜色不跟随主题变化的问题

    在 Material Design 主题下，Android EditText 的光标颜色默认是蓝色的。然而，当我们改变主题风格时，光标颜色并不会跟随主题变化，导致与主题不搭配，给用户带来困扰。

    1 年前
  • CSS Reset 的设计思路与实现方法

    前言 在网页开发的过程中，我们经常遇到样式的不兼容问题。例如，不同浏览器对于某些属性的默认值不同，在不同设备上显示也会有所差异。解决这些问题有多种方法，其中一种就是使用 CSS Reset。

    1 年前
  • CSS Grid 布局与传统布局的对比

    CSS Grid 布局是一种用于网页布局的新技术，它支持更加灵活和复杂的布局操作，提供了更加优秀的视觉效果，可以极大地提升网页的用户体验。与传统布局相比，CSS Grid 布局具有许多优势。

    1 年前
  • React Redux 如何处理大数据量的展示

    React Redux 是一个基于 React 框架的状态管理工具，它可以帮助开发者更加方便地管理 React 应用的状态并增强应用的性能。然而，当应用需要处理大量的数据时，就需要一些优化手段来提高性...

    1 年前
  • 通过 AR 技术实现市区无障碍导览系统

    身为一个前端开发工程师，我们能够想象到如何通过 AR（增强现实）技术来构建市区无障碍导览系统。 无障碍导览在现代社会中已经很普遍，它是为了方便聋哑人士，视觉障碍者以及行动不便的人而存在的。

    1 年前
  • Babel 编译 react-native 项目时出现”Error: The package @babel/runtime@^7.15.0 does not satisfy its siblings'“怎么办？

    背景 Babel 是一款用于编译 JavaScript 代码的工具，它可以将你写的新版 JavaScript 代码转换成旧版 JavaScript 代码，以支持旧版本的浏览器或 Node.js 等环境...

    1 年前
  • Webpack Encore 学习笔记

    什么是 Webpack Encore？ Webpack Encore是一个Web开发工具，它为您提供了使用先进的前端工具构建网站所需的工作流程和配置。Webpack Encore可以用于JavaScr...

    1 年前
  • 如何构建自己的 Web 服务器并启动多个 Node.js 进程

    在开发前端项目的过程中，我们经常会需要搭建自己的 Web 服务器来测试和调试我们的应用程序。而 Node.js 提供了强大的库和工具来构建和启动我们自己的 Web 服务器。

    1 年前
  • ECMAScript 2016: 如何使用函数参数解构？

    ECMAScript 2016: 如何使用函数参数解构？ 前言 如果你是一名有经验的 JavaScript 开发者，那么你一定已经听过 ECMAScript 2016（又称 ES7）的函数参数解构特性...

    1 年前
  • PWA 开发常见错误及其修复方法

    PWA（Progressive Web App）是一种新型的 Web 应用程序开发模式，具有类似于原生应用的体验。PWA 应用程序可以被添加到主屏幕，离线时也可以运行。

    1 年前
  • RxJS debounceTime 方法在 Angular 应用中的实际应用

    RxJS debounceTime 方法在 Angular 应用中的实际应用 随着前端应用的复杂性越来越高，我们需要使用更高效的代码来解决问题，以提升用户体验和应用性能。

    1 年前
  • 如何使用 Express.js 实现 GitHub 登录

    GitHub 是全球最大的开源代码托管平台，有数百万的开发者在上面分享代码和协作开发。为了方便开发者登录和授权使用 GitHub，GitHub 提供了 OAuth2.0 授权登录机制，开发者可以使用现...

    1 年前
  • Sequelize 中的数据操作实践及技巧

    Sequelize 是一个 Node.js 中的 ORM（对象关系映射）框架，它能够方便地与多种数据库进行交互，包括 MySQL、PostgreSQL、SQLite 和 Microsoft SQL S...

    1 年前
  • Redis 如何解决由于内存碎片导致的内存溢出问题

    Redis 是一个流行的内存数据结构存储系统，被广泛用于缓存、消息队列、会话存储等应用。内存是 Redis 最重要的资源，但长时间运行后，Redis 可能会遭受内存碎片（Memory Fragment...

    1 年前
  • 如何使用 gulp 和 ESLint 来自动化代码格式化

    前端开发的过程中，一个人写代码生产效率是高的，但是在团队中，要想保持代码的规范性，必须对代码进行格式化。而代码格式化的过程往往需要花费开发者很多时间和精力，因此，我们需要使用自动化工具来降低这种负担。

    1 年前
  • 通过 Web Components 实现前端集成开发

    在现代的前端开发中，一个项目可能会包含多个模块或组件，而这些模块或组件往往需要实现相似的功能，如表格、弹框、轮播图等。如果每个模块或组件都是独立开发、独立维护的，对于开发效率和代码复用率都是很不利的。

    1 年前

相关推荐

    暂无文章