什么是SSE
SSE（Server-Sent Events）是一种用于实现服务器向客户端推送实时数据的技术。它基于 HTTP 协议，使用简单的文本格式传输数据，与 WebSocket 相比，SSE 更加轻量级，易于实现。
SSE的优点
- 实时性：SSE 可以在服务器端有新数据时立即推送到客户端，实现实时更新。
- 简单易用：SSE 的实现非常简单，只需要一个 HTTP 服务器和一些 JavaScript 代码就可以实现。
- 兼容性好：SSE 在现代浏览器中都有很好的支持，即使在老旧的浏览器中也可以使用 polyfill 库来实现。
如何使用SSE实现即时聊天室
服务端实现
在服务端，我们需要创建一个 HTTP 服务器，并向客户端发送 SSE 事件。下面是一个使用 Node.js 实现的简单的 SSE 服务器代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ------ --- --
-------------- -- -
---------------- --------------------
-- ------
----------------上面的代码中，我们设置了响应头，告诉客户端返回的数据是 SSE 事件流，并使用 setInterval 定时向客户端发送事件。
客户端实现
在客户端，我们需要使用 JavaScript 代码来接收 SSE 事件，并将事件数据显示在页面上。下面是一个简单的聊天室页面的 HTML 和 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------
-------
------
---- --------------------
------
------ ----------- -------------
------- -------------------------
-------
--------
----- -------- - ------------------------------------
----- ------ - --- --------------------
---------------------------------- ----- -- -
----- ------- - ------------------------------
------------------- - -----------
------------------------------
---
----- ---- - -------------------------------
----- ----- - -----------------------------------
------------------------------- ----- -- -
-----------------------
----- ------- - ------------
----------- - ---
----------------- -
------- -------
-------- -
--------------- ------------------
--
----- -------------------------
---
---
---------
-------
-------上面的代码中，我们使用 EventSource 对象来接收 SSE 事件，使用 fetch 函数向服务器发送聊天消息。当接收到新的聊天消息时，我们使用 JavaScript 动态创建一个 div 元素，并将消息显示在页面上。
总结
通过本文的介绍，我们了解了 SSE 技术的优点和如何使用 SSE 实现即时聊天室。SSE 技术不仅可以用于实现聊天室，还可以用于实时数据展示、实时监控等场景。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65787940d2f5e1655d2664e5