随着互联网化的发展，实时消息已经成为了一种重要的通信方式。而直接使用WebSocket可能并没有很好的可靠性，于是就有了Server-sent Events这种协议。前端可以通过SSE直接从服务端获取实时的数据流，而不需要频繁的客户端和服务端的连接和断开操作。在本篇文章中，我们将介绍如何使用Server-sent Events推送实时消息到浏览器。
理解Server-sent Events
Server-sent Events(SSE)是HTML5规范中的一部分，与WebSocket相似。但WebSocket是一种双向通信协议，而SSE则是单向通信协议，只允许服务器向客户端发送数据。
WebSocket
Server-sent Events
SSE采用HTTP连接，因此可以互通于任何能够建立HTTP连接的设备，比如Web浏览器和移动设备。SSE的最大优势在于它的可靠性与简单性——SSE遵循文本协议，它只需要在HTTP响应中添加一些特定的头，就可以实现事件流的推送。同时，SSE支持跨域，可以通过CORS进行数据传输。
实现Server-sent Events
实现一个适合生产环节的Server-sent Events需要考虑很多方面，比如数据传输的可靠性、性能、安全等等。当然，我们在这里只介绍最基本的方法。
创建EventSource对象
在前端创建EventSource对象，即可开始接收来自服务端的数据。EventSource对象将接收数据流，并触发指定的回调函数，将数据传递给前端页面。
const src = new EventSource("/stream"); // 连接server-sent events
src.onmessage = function(event) {
console.log(event.data);
}服务器端实现
下面我们将给出实现Server-sent Events的一个简单示例，假设我们有一个“Hello World”服务器端的应用程序。
-- -------------------- ---- -------
----- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
----- --- - --- ----------------------------
----- ----- - -
----- ------------ ------ - - ----
--- -----------
------ ----- -- --------
--
----------------- ---------
-------------- - - -------- - ------
---------------- - - -------------------------- - --------
-- ------ -- ----------
----------------上述代码的关键点：
首先确保在响应头设置文本类型为text/event-stream，这是SSE规范的要求。
设置"Cache-Control": "no-cache"标头来确保EventSource不会在浏览器缓存中缓存事件流。
在一个无限循环中每秒向客户端推送一个事件chunk：id、event和data。注意，data的值必须是一个JSON字符串。
以空行\ n\n结束响应，告诉客户端我们完成了当前的事件块。
结言
Server-sent Events是一个通用、易于使用和轻巧的实时消息传输协议。本文通过介绍SSE基本原理以及如何在Node.js环境下实现SSE功能，较为详尽地介绍了SSE的使用方法。希望读者可以通过本文加深对SSE的理解。
上面的代码上传到服务器，便可以看到浏览器实时地获取到数据流。使用Server-sent Events，我们可以轻松实现实时消息通信，也可以进行简单的直播，应用场景非常多样化。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6793d30d504e4ea9bd840b25