SSE 技术原理详解：从 push 到 comet，再到 websocket
前言
在 Web 2.0 时代，Web 应用程序被广泛使用，同时用户对实时性需求越来越高。为此，前端实时数据的推送逐渐成为了一种重要的需求。本文将介绍 SSE 技术的原理，从 push 到 comet，再到 websocket 的发展历程。我们将详细讨论 SSE 的工作原理如何满足前端实时数据推送的需求，并提供示例代码。
一、push
早年的前端推送技术主要以轮询为主，即客户端定时向服务器请求数据，不管是否有数据更新都进行请求。这种方式虽然可以实现数据更新，但是不仅在性能上浪费，而且在用户体验上也会显得十分不友好。因此，出现了 push 技术。
在 push 技术中，客户端不再需要自己发起请求，而是通过服务器发起推送。这种方式相比轮询在性能上有了明显提升，并且用户可以更及时的获取新数据。但是 push 的实现需要一些额外的配置和开发，同时也使用了一些较新的特性，因此该方案使用场景较为受限。
示例代码：
const evtSource = new EventSource("https://example.com/listen.php");
evtSource.addEventListener("message", function(event) {
console.log(event.data);
});二、comet
为了弥补 push 技术在浏览器支持上的缺陷，comet 技术应运而生。Comet 又称长轮询，是一种先进的前端推送技术。
在 Comet 技术中，客户端向服务器发起请求，但是服务器会在有新数据更新时才会响应该请求并返回数据。这种方式在需要保持数据流的场合下非常合适，因为客户端可以长时间等待新数据的到达。Comet 技术包括长轮询（Long Polling）和流（Streaming）两种模式。
虽然 Comet 技术解决了 push 技术的问题，不过它的代码可读性则比较差，而且这种方法会占用大量的浏览器线程带来很多性能问题。
示例代码：
-- -------------------- ---- -------
-------- ---------- -
--- --- - --- -----------------
--------------- ------------ ------
---------- - ---------- -
-- ----------- -- ---- -
------------------------------
-
-----------
--
-----------
-
-----------三、websocket
随着 HTML5 和 WebSockets 的出现，前端推送技术得到了非常好的改进。WebSocket 本质上是一种基于 TCP 协议的全双工通信协议。通过 WebSocket，我们可以实现服务器到客户端的实时数据推送。
在 WebSocket 中，服务器与客户端建立持久性的连接通道，在数据传输方便性以及交互样式等方面都做到了质的提升。因此越来越多的前端开发者都在使用 WebSocket 来进行实时推送。
示例代码：
客户端代码：
const socket = new WebSocket("wss://example.com/ws");
socket.onmessage = function(event) {
console.log(event.data);
};服务端代码：
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({port: 8080});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
console.log('received: %s', message);
});
ws.send('hello');
});结论
在 Web 应用程序中，实时数据交互作为重要部分，是用户使用体验的重要组成部分。前端推送技术的发展历程，从 push 到 comet，再到 WebSocket，均在不断的提升着数据到达的速度以及数据交互的效率，并给出了一些解决方案。
推荐使用 WebSocket 实现实时数据交互，因为 WebSocket 内部实现是标准化的，而且易于维护、开发。虽然在某些低版本IE遇到的兼容问题会多一些，但可以通过在低版本中使用 Flash 实现 WebSocket 的类似效果，并可以使用第三方库进行兼容。
希望这篇文章能够提供一些关于 SSE 技术的原理和应用的指导，使你可以轻松开始实时应用程序开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6706248fd91dce0dc858eaca