引言
在前端开发中，实现实时通信对于用户体验来说是非常重要的。WebSocket 协议作为一种双向通信方式，被广泛应用于实现实时通信。但在一些较为简单的场景下，我们可以使用 SSE 来替代 WebSocket，来实现服务器向客户端发送实时数据更新的功能。本文将介绍 SSE 在实现 WebSocket 协议中的应用案例。
理解 SSE
为了更好地理解 SSE，我们首先需要理解 HTTP 协议的工作方式。HTTP 协议是一种无状态的协议，每次请求完毕后连接就会断开，因此无法实现双向实时通信。
SSE 则是通过 HTTP 协议模拟长轮询来实现服务器向客户端发送实时数据更新。客户端向服务器发送一个 HTTP 请求，服务器将一直保持连接打开，直到有新数据需要发送，才会将数据推送给客户端。
SSE 的实现主要依赖于以下两个API：
EventSource：客户端使用EventSource这个对象来建立和服务器的 SSE 连接，然后监听服务端推送的消息。Server-Sent Events：服务器端发送的 SSE 事件。每个 SSE 事件包含一个标识事件 ID，一个事件类型和一个事件数据。
实现 SSE
接下来我们来看一下如何使用 SSE 来实现一个简单的实时推送功能。这里我们将会模拟一个简单的股票实时更新功能，服务器会定时推送一条最新股票价格数据给客户端。
服务器端实现
服务器端需要使用 Node.js 的 http 模块来实现 SSE。我们先创建一个 Node.js 服务，然后在客户端与服务端之间建立 SSE 连接。代码如下：
-- -------------------- ---- -------
-- -- ---- --
----- ---- - ---------------
-- -----
----- ------ - ----------------------- ---- -- -
-- ------------- -----------------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
-- ----------------
-------------- -- -
----- ---------- - ------------- - ---- -- --------
----------------- ---------------- -- ----
---------------- ------------------- -- ----
-- -----
--
-- ----
-------------------代码中，我们设置了响应头的 Content-Type 为 text/event-stream，这样的话浏览器会知道该响应数据的格式。
然后我们利用 setInterval 定时向客户端推送最新的股票数据，每次推送时我们向客户端发送一个 stock-update 的 SSE 事件，事件的数据为最新的股票价格。
客户端实现
客户端可以使用 EventSource 对象来建立和服务器的 SSE 连接，来监听服务器推送的数据。代码如下：
const eventSource = new EventSource('http://localhost:8080')
// 监听服务器推送的消息
eventSource.addEventListener('stock-update', (event) => {
const stockPrice = event.data
console.log(`最新股票价格：${stockPrice}`)
})代码中，我们使用 EventSource 对象建立和服务器的 SSE 连接，并监听 stock-update 事件。当收到服务器推送的数据时，我们打印出最新的股票价格。
总结
本文介绍了 SSE 在实现 WebSocket 协议中的应用案例。通过 SSE，我们可以在不使用 WebSocket 的情况下，实现服务器向客户端发送实时数据更新的功能。此外，SSE 还有一定的浏览器兼容性，对于一些老旧的浏览器来说 SSE 更加稳定、可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651917d995b1f8cacd152ff3