在线聊天室是 Web 应用程序中的一个常见功能。这种功能通常基于 WebSocket 技术实现，但是 WebSocket 应用程序需要一个额外的服务器来处理传入和传出的消息。然而，Nginx 在新版本中增加了一个 Server-sent Events （SSE）功能，使得开发者可以使用 Nginx 服务器来轻松地构建一个在线聊天室应用程序。本文将分享如何使用 SSE 和 Nginx 构建一个在线聊天室应用程序。
SSE 简介
Server-sent Events（SSE）是一种服务器推送技术，它通过 HTTP 连接实现单向实时通信。与 WebSocket 不同，SSE 只允许服务器将消息推送给客户端，而客户端只能接收这些消息。SSE 采用纯文本格式（text/event-stream），使得客户端能够实时接收服务器端推送的消息。下面是一个 SSE 响应的示例：
-------- --- -- ------------- ----------------- ------ ------- ----- ------ ------ ------ ------- ----- --- --- ----
SSE 首先发送一个标头 content-type: text/event-stream，随后一行一行地发送文本消息。每个消息由两部分组成，第一行是以 event: 开头的事件名称（可选），第二行是以 data: 开头的消息实体。如果消息是事件的特定子类，那么还可以在消息体中添加可选的属性。
在线聊天室实现
本文中所构建的在线聊天室基于 Express.js 框架实现。聊天室应用程序的主要组成部分如下：
- HTML 页面：聊天室页面使用 HTML 和 JavaScript 实现。它包括发送消息、接收消息和在线用户列表等功能。
- Express.js 应用程序：使用 Express.js 应用程序处理 HTTP 请求并发送 SSE 响应。
- Nginx Web 服务器：配置 Nginx 服务器以支持 SSE 响应。
HTML 页面
下面是一个简单的 HTML 页面，实现了发送消息、接收消息和在线用户列表的功能。
--------- -----
------
------
----- ----------------
---------- -------- ---------------
-------
------
------- -------- ------------
--- -------------------
------ ----------- ------------ ----------------- ---------
------- -------------------------------------
----
---------- ----------
--- ----------------
--------
--- ------ - --- -----------------------
---------------------------------- --------------- -
--- -- - -----------------------------
------------ - -----------
----------------------------------------------------
---
------------------------------- --------------- -
--- -- - -----------------------------
------------ - -----------
-------------------------------------------------
---
-------- ------------- -
--- ------- - -----------------------------------------
--- --- - --- -----------------
---------------- ------------
------------------
-
---------
-------
-------该页面使用 EventSource API 接收 SSE 响应，并添加到页面上的消息列表中。它还提供了一个输入框，用户可以在输入框内输入消息并通过 Ajax 请求将其发送到服务器。
Express.js 应用程序
下面是一个使用 Express.js 框架实现的聊天室后端应用程序。它处理 POST 请求以发送消息，并使用 SSE 发送消息和在线用户列表。
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
--- ----- - ---
---------------------------
-------------------- ----- ---- -- -
--------------------- -------- --------------
----------
---
------------------ ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ----------- ----------------
-------------------
-------------- -- -
--- ------- - ------- ------ ------ ----------
----------------- -------------- -----------------
-- ------
---
---------------- -- -- ------------------- ------- -- ---- ---------该应用程序接受来自 HTML 页面的 POST 请求，并使用 console.log 打印消息。在 /stream 路由上，它发送一个 SSE 响应，并在每秒钟向 SSE 发送一条“Hello, World!”消息。此外，每当新的客户端连接到 /stream 路由的 SSE 服务时，应用程序会将请求地址添加到在线用户列表中，并通过 event: user 类型的事件将该用户的 IP 地址发送给 HTML 页面。
Nginx Web 服务器配置
下面是一个使用 Nginx Web 服务器配置的聊天室后端应用程序。它将 Nginx 配置为反向代理，将所有 HTTP 请求代理到 Express.js 应用程序上。它还支持 SSE 和 WebSocket 的代理传输。
---------------- -----
------ -
------------------ -----
-
---- -
-------- --- -
------ ---------------
-
------ -
------ ---
-------- - -
---------- -----------
------------------ ----
---------------- ------- --------------
---------------- ---------- ----------
-
-------- ------- -
---------- -----------
------------------ ----
---------------- ---------- ---
------------------ -------------
---------------------- ---
------------------------- ---
---------- ---------------- -----
-
---------- --- ----------
-------- - --------- -
---------
---- ----------------------
-
-
-该 Nginx 配置文件配置了一个 upstream，用于将所有流量代理到 Express.js 应用程序的端口 3000。location / 将所有普通 HTTP 请求代理到 app，而 location /stream 代理所有 SSE 和 WebSocket 请求到 app。还需要注意的是 Nginx 缓存设置，这对于 SSE 和 WebSocket 传输非常重要。在 SSE 和 WebSocket 中，一旦同一连接关闭，就无法重复建立，因此不能使用缓存。
结论
本文展示了如何使用 SSE 和 Nginx 构建一个在线聊天室应用程序。虽然 SSE 相对于 WebSocket 功能较少，但是对于某些应用程序，它是一种更加轻量和简单的方案。本文的示例代码可以作为初学者学习 SSE 怎样在服务器和前端之间进行通信的一个好的参考。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67038f9fd91dce0dc84bb20b