在现代 Web 应用中，实时通信已经成为了一个非常重要的功能，例如在线聊天、实时推送等。而在前端中，我们可以利用 SSE 技术（Server-Sent Events）来实现即时聊天功能。
SSE 的原理
SSE 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端发送事件流，而客户端可以通过监听这些事件流来实现实时通信。SSE 的原理非常简单，客户端通过 HTTP 连接到服务器，服务器端使用 Content-Type: text/event-stream 来指定响应的类型，并且发送一系列的事件流，每个事件流都包含一个事件名称和事件数据。客户端通过监听 EventSource 对象的 onmessage 事件来处理这些事件流。
实现 SSE 的服务器端代码
在服务器端，我们需要使用一些特定的工具来实现 SSE 功能。下面是一个使用 Node.js 和 Express 框架来实现 SSE 的代码示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
---------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ---- - ------ ----- ----------------------------------
----------------
-- ------
---
---------------- -- -- -
------------------- -- ------- -- ---- -------
---在上面的代码中，我们定义了一个 /chat 路由，当客户端连接到该路由时，服务器会向客户端发送一系列事件流，事件流的数据是当前时间的字符串。这里我们使用 setInterval 函数来模拟实时消息的发送。
实现 SSE 的客户端代码
在客户端，我们可以使用 EventSource 对象来监听服务器发送的事件流。下面是一个使用 Vue.js 来实现 SSE 的代码示例：
-- -------------------- ---- -------
----------
-----
-------------
----
--- -------------- -- --------- ----------------- ------- -------
-----
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
--
--
--------- -
----- ----------- - --- ---------------------
--------------------------------------- ------- -- -
-------------------------------
---
--
--
---------在上面的代码中，我们使用了 Vue.js 来实现前端界面的渲染，当组件被创建时，我们使用 EventSource 对象来监听 /chat 路由，当服务器发送事件流时，我们将事件流的数据添加到 messages 数组中，并通过 v-for 指令来渲染到页面上。
总结
通过 SSE 技术，我们可以非常简单地实现前端的即时聊天功能。在实际应用中，我们可以通过 SSE 来实现在线聊天、实时推送等功能，从而提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65061ea395b1f8cacd230b39