随着互联网技术的不断发展，实时通信技术越来越成为了前端开发的热门话题。实时通信（Real-time communication）顾名思义，指的是在用户和服务器之间进行实时性的数据传输，例如在线聊天室、实时游戏、股票行情等等。本文将详细介绍通过 SSE （Server-Sent Events）技术构建实时聊天室的实现方式。
SSE 概述
SSE 技术是一种建立在 HTTP 协议上的服务器推送技术，允许服务器主动向客户端发送数据，服务端与客户端可以保持长久的连接（一般基于 HTTP 长轮询实现）。SSE 技术与 WebSocket 技术最大的不同就是：SSE 是单向的数据传输，而 WebSocket 是双向的。SSE 协议具有以下特点：
- SSE 采用的是 HTTP 协议，属于轻量级通信协议，可以充分发挥 HTTP 缓存的优势。
- SSE 不需要客户端发起额外的连接，服务端和客户端之间可以保持长久连接。
- SSE 适用于实现服务端向客户端的实时消息推送功能。
SSE 使用场景
SSE 协议会对客户端的浏览器进行类型支持的检查。对于支持 SSE 协议的浏览器，例如 Chrome、Firefox、Safari 等等，我们可以在开发中使用 SSE 技术来实现以下场景：
- 实时聊天应用：即时收发消息，一般基于 HTTP 长轮询机制实现。
- 实时股票行情：股票价格变化及时同步给用户，一般采用 SSE 技术实现。
SSE 原理
SSE 的原理非常简单，我们只需要在服务端生成一个 EventStream 对象，并且保持连接即可。下面是 SSE 技术的实现细节：
服务端实现
服务端生成 EventStream 对象。
const eventStream = new EventSource('/real-time');设置 EventStream 对象的属性；调用 open() 方法。
const eventStream = new EventSource('/real-time'); eventStream.onopen = () => { console.log('连接已经成功建立！'); };服务端发送数据。
setInterval(() => { eventStream.send(`data: ${new Date()} \n\n`); }, 1000);
客户端实现
客户端通过浏览器的 EventSource 对象与服务器建立连接。
const eventStream = new EventSource('/real-time'); eventStream.onopen = () => { console.log('连接已经成功建立！'); };定义接收服务器数据的回调函数。
eventStream.onmessage = (event) => { console.log(`Received: ${event.data}`); };
SSE 实现实时聊天室
有了 SSE 技术的基础概念和原理，我们可以基于 SSE 技术来实现一个简单的实时聊天室应用。聊天室应用的核心功能有三个：
- 登录系统，输入昵称。
- 发送聊天信息，消息会实时同步到所有在线用户的聊天室。
- 在聊天室中实时接收其他用户发来的消息。
服务端实现
创建一个 express 项目，使用 npx express-generator-generator 自动化生成项目框架。
在项目根目录下，修改 app.js 文件中的代码。
-- -------------------- ---- -------
-- ------
----- ------- - -------------------
----- ----------- - -----------------------
----- ------ - -----------------
-- -----------
--- ----------- - ---
-- --- --
------------------ ----- ---- ----- -- -
------------------ -
------------------------------ ----
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ------------
-- -------
-------------- -- -
----- --------- - --- -----------------
----------------- -------------- -------------------
-- ------
---
-- ----
--------------- ------------- ---- ----- -
---------------- ---------
-------------------------------------------- -----
--------------------------------- -------------------------
---
-- ---------
--------------------- ----- ---- ----- -- -
-- -------
--- ---- - ---
-------------- ----------------
---- -- ------
---
------------- -----------
-- ------
--- -------- - --------------------------
-- ------
--- ----------- - ----------------------- -- -
------ ------------- --- ---------
---
-- -----------------------
-- ------------- -
------------------------------ --------------------
- ---- -
-- ------
------------------
--- --- -----------------
--------- --------
---
------------------------------ - ------------
-
---
---
-- ----
-------------- - -------客户端实现
静态页面中要包含以下 HTML 元素：一个昵称输入框，一个聊天框，一个聊天内容输入框和一个发送按钮。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- -------- ------------
-------
------
---- --------------
-------------
------ ----------- ------------- ----------------------
------- ----------------------------
------
---- ------------------
--------- ------------- --------- --------- --------------------
------ ----------- ------------ ----------------------
------- ---------------------------
------
------- -----------------------------------
-------
-------然后，我们来创建 SSE 相关的 JavaScript 文件。
编写 sse.js 文件代码：
-- -------------------- ---- -------
-- ----
--- -------- - ---
-- --- --
--- ----------- - -----
-- ------------------------
----- ------------- - ------------------------------------
----- -------- - ------------------------------------
----- ------------ - -----------------------------------
----- ---------- - --------------------------------------
-- ----
----- ----- - -- -- -
-- ------
--- -------- - --------------------
-- ----------
--- --- - --- -----------------
---------------- --------- ------
--------------------------------------------------------
---------------------- - ---------- -
-- --------------- -- -- -
-- ----------- -- ---- -
-- ---------------- --- --
----------------- - ---------
----------
---------------------- - -----
------------------- - ------
-------------- - --- ----------- ------------
- ---- -
-- -----------
--------------------------------------------
-
-
--
----- ---- - ------------------------- -----------
---------------
--
-- --- --- --
----- ------- - -- -- -
----------- - --- --------------------
--------------------------------------- ------- -- -
-----------------------
---
------------------------------------ -- -- -
-------------------------
---
------------------- - ------- -- -
--------------------
-- ----------------------- -- ------------------- -
-----------------------
-
--
--
-- -----
----- ---------- - --------- -- -
----- ---- - --- -------------------------------
----- ------- - --------------- - --- - ----------------- - --- - ------------------
-------------- -- ----------- --------------------- --------------
--
-- ----
----- ----------- - -- -- -
--- ------- - -------------------
----- --- - --- -----------------
----- ---- - -
-------- --------
--------- -----------------
--
---------------- -------- ------
--------------------------------------------------------
---------------------- - ---------- -
-- --------------- -- -- -
-- ----------- -- ---- -
------------------------------
--------------------
- ---- -
----------------------
-
-
--
-------------------------------
------------------ - ---
--
-- ----
------------------------------------ -------------总结
SSE 技术是一种建立在 HTTP 协议上的服务器推送技术，允许服务端向客户端发送数据，服务端与客户端可以保持长久的连接，适合实现推送实时数据，采用 HTTP 长轮询机制实现。本文详细讲述了 SSE 技术的基本概念、原理、使用场景，并通过实现一个实时聊天室的案例，展示了 SSE 技术的实际应用，帮助大家更好地理解 SSE 技术，掌握熟练运用 SSE 技术的技能，为构建更加优秀的前端应用提供技术支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654b37d47d4982a6eb524934