使用原生 JS 实现 SSE 的方法和实现
Server-sent events (SSE) 是一种基于 HTTP 的简单通信协议，它允许客户端接收服务器发送的事件。SSE 是一个轻量级、实时、可靠的网络协议，在前端开发中被广泛使用。本文将介绍如何使用原生 JS 实现 SSE。
什么是 SSE？
Server-sent events 允许客户端通过 HTTP 连接接收实时的事件流，这个事件流是由服务器端不断推送的。SSE 可以用于推送后端数据到前端，包括通知、即时消息、新闻更新等。
SSE 的优点在于它不需要建立长轮询或 WebSockets 连接，它只需要使用标准的 HTTP 连接即可工作。这意味着 SSE 可以比其他技术更好地处理单向数据推送。
如何实现 SSE？
实现 SSE 最重要的三个步骤是建立连接、接收服务器发送的消息、以及关闭连接。
- 建立连接
使用原生 JS 建立 SSE 连接十分简单。首先，创建一个新的 EventSource 对象，并将服务器端 SSE URL 传递给它。然后，使用 onopen 事件监听器启动连接。
const eventSource = new EventSource("sse.php");
eventSource.onopen = (event) => {
console.log("SSE connection established.");
};- 接收服务器发送的消息
SSE 不同于 WebSockets，在 SSE 中服务器会把事件作为多个消息发送。使用 onmessage 事件监听器来处理服务器发送的消息。
eventSource.onmessage = (event) => {
console.log("Message received: " + event.data);
};在服务器端，发送的消息需要按照 SSE 标准进行格式化。在 PHP 中，可以使用以下代码来发送 SSH 消息：
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
---------- - ------
------- -- ----------
------ -- ------- -------
--
---- ------ - - ----------------------- - -------- 关闭连接
当不需要 SSE 连接时，需要将其关闭以释放网络资源。可以使用 onerror 或 onclose 事件监听器监听 SSE 连接状态的变化，并在这些事件触发时关闭连接。
eventSource.onerror = (event) => {
console.log("SSE connection error.");
eventSource.close();
};
eventSource.onclose = (event) => {
console.log("SSE connection closed.");
};示例代码
以下是一个实现 SSE 的完整例子。此例子通过定期随机生成数字的方式演示了 SSE 的效果。
HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- --------------------
------- ----------------------
-------
-------JavaScript 代码：
-- -------------------- ---- -------
----- ------- - ------------------------------------
----- ----------- - --- -----------------------
------------------ - ------- -- -
---------------- ---------- ---------------
--
--------------------- - ------- -- -
----- --------- - -----------------------
----- ----------- - ----------------
----- ----------- - ---------------
------ ------------- -
---- -------------
----------------- - ---- ------- - - ------------
------
-
--
------------------- - ------- -- -
---------------- ---------- ---------
--------------------
--
------------------- - ------- -- -
---------------- ---------- ----------
--
-------------- -- -
----- --------- - ------------------------ - -----
----- ------------ - -
-------- -------------
------- ---------
--
--------------------- -
------- -------
----- ----------------------------
---
-- ------PHP 代码：
-- -------------------- ---- -------
--------------------- --------------------
---------------------- -----------
---------- - ------
------- -- -------------
------ -- ------- ----
--
---- ------ - - ----------------------- - -------注意事项
- SSE 使用的是长连接，需要考虑连接的超时和断开重连的问题。
- SSE 发送的事件流应该按照标准格式进行格式化，包括事件类型和数据内容。
- SSE 可以很好地应用于一些单向数据推送场景，但如果需要进行双向通信，则需要使用其他通信技术（例如 WebSockets）。
结论
本文介绍了如何使用原生 JS 实现 SSE，以及如何将 SSE 应用到前端开发中。SSE 是一种轻量级、实时、可靠的网络协议，在现代 Web 应用中具有广泛的应用前景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67120526ad1e889fe2023226