前言
现如今，网页已经不是只能展示静态内容的页面了，随着前端技术的不断更新迭代，越来越多的网页开始拥有实时或者近实时的展示和交互功能。这种功能的实现离不开客户端与服务器之间的通讯，常见的实现手段有 Ajax、Websocket、SSE 等方式。本文将重点探讨 SSE 在客户端长连接实现中的优劣和应用场景。
SSE 是什么
SSE（Server-Sent Events）是指服务器向浏览器推送数据的长连接技术，也就是在客户端与服务器建立一条持久连接，然后服务器通过这个连接不断地向浏览器推送数据。SSE 的好处在于，它是基于 HTTP 协议的，所以不需要额外的握手，能够支持跨域，同时也能够携带 Cookie 信息等。除此之外，SSE 相对于 Websocket，还有一个特点是属于单向通讯，即只有服务器向浏览器推送数据，而浏览器是无法主动向服务器发送数据的。
SSE 与 Ajax 和 Websocket 的对比
Ajax：Ajax 是基于 HTTP 的短连接技术，每次请求都需要先与服务器建立连接，然后发送请求，再等待服务器响应数据，最后再关闭连接。每次请求过程中，都需要进行完整的 TCP 握手，HTTP 请求和响应等。因此 Ajax 的请求速度通常会比较慢，但是却非常节省带宽。
Websocket：Websocket 是 HTML5 中新增的一种全双工的长连接技术，它需要通过额外的握手来建立连接，协议实现比较复杂，需要浏览器和服务器都支持这个协议。Websocket 能够用于实现双向通讯，而且实时性非常好，性能也相对较好。
SSE：SSE 技术相对于 Ajax 和 Websocket，处于他们之间的中间地带，它兼顾了单向通讯和长连接的优势，能够实现大量实时性较弱并且不需要双向通讯的场景，而且相对于 Websocket，SSE 的实现难度较低，能够兼容老版本的浏览器。
SSE 的应用场景
SSE 技术的应用场景主要有以下几个方面：
实时通知：比如社交网络、聊天应用、在线游戏中的实时通知消息等。
实时数据更新：比如股票市场行情、在线拍卖等需要被动更新实时数据的场景。
长轮询的替代方案：在某些场景下，Ajax 长轮询机制并不是很成熟，会存在一些问题，这时候可以尝试使用 SSE。
SSE 的代码实现
使用 SSE 技术需要建立一个服务器端的推送服务，同时客户端也需要监听这个服务，代码实现如下：
服务器端代码示例（Node.js）
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- -------------------- -- -- --- -------------
---------------- ----------- -- -------
------------- ------------ -- -- ---------- -----
---
-------------- -- -
---------------- - - --- --------------------------- - -------- -- ------------
-- ------
----------------客户端代码示例
const evtSource = new EventSource('http://localhost:3000'); // 创建 SSE 连接
evtSource.addEventListener('message', (event) => {
console.log('服务器推送的时间：' + event.data); // 接收服务器推送的信息
});总结
综合来说，SSE 技术与 Ajax 和 Websocket 技术相比，优劣势并存，它适合于实时性要求较弱但是需要长连接和单向通讯的场景，相对于 Websocket 更容易实现并且兼容性更好。开发者在选择技术方案的时候需要根据实际场景进行综合考虑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf16d7b5eee0b52568cb1b