在 Web 开发中，实时通信一直是一个重要的话题。在过去，WebSocket 和 Comet（长轮询、短轮询）是实现实时通信的主要方式。但是现在，Server-sent Events（SSE）也在逐渐流行起来。SSE 可以帮助我们快速、简单地实现服务器端到客户端的实时通信，并且不需要任何额外的库或框架。本文将介绍网页中使用 SSE 的实战开发过程，并提供详细的代码示例。
Server-sent Events 的简介
Server-sent Events 是一种新型的实时通信技术，它允许服务器向客户端发送自定义的事件流。这个事件流是一个基于文本的协议，并且仅支持单向通信。当客户端建立 SSE 连接后，服务器端就可以不断地向客户端发送自定义的事件，直到客户端关闭连接。SSE 支持断线重连，当网络连接中断后，客户端会自动重新连接服务器。
SSE 的优点：
- 常用的浏览器都支持 SSE，而且不需要额外的库或框架。
- SSE 具有更好的性能，因为它采用的是持久化连接，比轮询技术更有效率。
- SSE 很容易实现，并且支持自定义事件。
使用 SSE 实现实时通信
基础示例
在使用 SSE 之前，我们需要首先创建一个事件源（EventSource）对象，并将其连接到服务器，代码如下所示：
-- ---------
----- --------- - --- --------------------
-- ----------
------------------------------------- ----- -- -
------------------------
---
-- ------
---------------------------------- -- -- -
---------------------
---
----------------------------------- -- -- -
--------------------
---
----------------------------------- -- -- -
---------------------
---在这个代码片段中，我们向服务器发起一个 SSE 请求，URL 为 /sse，在连接建立后，我们可以监听服务器端发来的事件。在这个示例中，我们监听了 message 事件，这个事件对应服务器端发送的事件类型。当收到服务器发来的事件后，我们将收到的数据打印到控制台上。
服务器端实现
在服务器端实现 SSE 时，首先要设置响应头，告诉客户端响应是一个 SSE 事件流。服务器端的示例代码如下：
--------------- ------------- ---- -
-- -----
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- -----------------
----------------- ------------
---------------- ------------------ -------- ------- ----------
-- ------------
----- ----- - -------------- -- -
----------------- ------------
---------------- ------------------ -------- --------------- ----------
-- ------
-- ---------------------
--------------- -- -- -
---------------------
---
---在这个代码片段中，我们创建了一个 SSE 响应流，设置了响应头，然后向客户端发送一个 connect 事件，用于确认客户端与服务器的连接已建立。接着，我们模拟服务器发送事件的过程，在定时器中向客户端发送一条 message 事件，其中包含一条来自服务器端的消息。在每次发送事件后，我们需要在每行结尾添加两个换行符 \n\n，以告诉客户端这是一条新的事件。
最后，我们还需要监听连接断开的事件，在连接断开时清除定时器。
总结
Server-sent Events 是一种新型的实时通信技术，可以帮助我们快速、简单地实现服务器端到客户端的实时通信。在使用 SSE 时，我们需要首先创建事件源对象，并将其连接到服务器。服务器端需要设置对应的响应头，然后向客户端发送自定义的事件流。SSE 具有很多优点，比如支持自定义事件，具有更好的性能等。本文提供了详细的代码示例，希望能对大家在实现实时通信时有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64745103968c7c53b01b1ebf