什么是Server Sent Event
SSE（Server Sent Event）指的是一种浏览器与服务器之间的实时通信技术。它允许服务器将实时数据主动推送到客户端。相比使用WebSockets或者长轮询来实现实时通信，SSE比较轻量，更容易实现和维护。但它也有一些限制，例如只支持从服务器到客户端的单向通信等。
SSE的应用场景
SSE可以用来实现很多有趣的功能，例如：
- 股票行情的实时更新
- 在线聊天室的实时消息通信
- 实时数据可视化的展示
SSE的实现方式
SSE的协议格式
SSE是基于HTTP协议实现的。客户端向服务器发送一个HTTP请求，请求的类型是GET。服务器通过响应头中的Content-Type字段告诉浏览器这是一个SSE请求。随后服务器会将实时数据通过内置的EventSource对象一条一条的发送给浏览器。
SSE的响应头内容如下:
------------- ------------------------------- -------------- -------- ----------- ----------
其中：
- Content-Type指定了响应的媒体类型，这里是text/event-stream。
- Cache-Control指定了缓存的控制方式，这里是no-cache。
- Connection指定了连接的类型，这里是keep-alive。
SSE的内置对象EventSource
在浏览器端，我们可以通过内置的EventSource对象来接收服务器推送的实时数据。
--- ------ - --- -----------------------------
---------------------------------- --------------- -
------------------------
---其中：
- EventSource构造函数调用时需要传入一个URL，表示向哪个URL发送SSE请求。
- source.addEventListener注册了一个事件处理函数，当有新的消息到达时就会执行该函数。
SSE的服务端实现方式
在Node.js中，我们可以使用第三方的express库来快速实现一个支持SSE的服务器。
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----- ---- - -----
----- - ------------ - - ------------------
----- ------- - --- ---------------
----------------
------------------------ ----- ---- -- -
---------
--------------- ----------------------------------
---------------- -----------
------------- ------------
---
----- -- - -----------
--------------------- ------ -- -
-------------- ------------- -------------- ------------------------------
---
--------------- -- -- -
-----------------------
---
---
-------------------- --------------- ----- ---- -- -
----------------------- ----------
---------- -------- ---- ---
---
---------------- -- -- -
------------------- --------- -- ------- ------
---上面的代码中，我们使用了EventEmitter对象来实现消息的推送。当有新的消息到达时，我们通过emitter.emit('message', data)来触发message事件，并将消息体作为参数传递给回调函数。回调函数会将消息发送给客户端。客户端通过向/event-stream这个URL发起GET请求和服务端建立连接，在连接断开之前不停的接收由服务端主动推送的消息。
为了方便测试，上面的代码中还实现了一个HTTP请求接口，用来向客户端推送消息。你可以使用类似下面的HTTP请求体：
-
------- -----
---------- ------- -------
-发送消息，然后在客户端接收到这条消息。
总结
在本文中，我们详细介绍了Node.js Server Sent Event（SSE）技术的实现原理和应用场景，并给出了完整的代码示例。学习并掌握SSE技术，可以让我们更好地实现实时通信和数据可视化等功能，相信这对你今后的工作和学习都是有益的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64816c1e48841e98940dff65