在前端开发中，服务器推送是一个非常重要的功能，可以让客户端实时获取服务器端的更新数据，从而提高用户体验，减少网络延迟。目前实现服务器推送的两种主要技术是 SSE 和 WebSocket。虽然 WebSocket 比 SSE 更为流行，但是在某些情况下，SSE 可以更适合一些特定的应用场景。
SSE 的优点
SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术。SSE 的优点包括：
简单易用：SSE 的 API 很简单，只需要用一个 EventSource 对象来建立连接并监听事件就可以了。
高兼容性：由于 SSE 是基于 HTTP 协议的，所以它可以和任何服务器端语言配合使用，包括 PHP、Java、Node.js 等。
可控制的重连机制：SSE 可以自动尝试重新连接服务器，但是这个重新连接机制是可控制的，可以根据需要进行调整。
支持跨域请求：虽然 SSE 是基于 HTTP 的，但是它可以支持跨域请求，只需要在服务器端进行相应的配置就可以了。
WebSocket 的局限
WebSocket 是一种基于 TCP 的双向通信协议。WebSocket 相比 SSE 的优点在于它可以支持双向通信，更适合一些复杂的交互场景，同时也有一些局限：
需要专门的服务器：WebSocket 必须要在服务器端实现一个专门的协议，而且这个协议并不是所有的服务器都支持的，因此需要进行兼容性测试和环境部署。
需要更多的网络带宽：由于 WebSocket 是基于 TCP 的，在发送数据的时候需要更多的网络带宽，因此在一些网络条件比较差的情况下，可能会导致延时较高或者丢包的情况。
无法支持某些浏览器：虽然大多数现代浏览器都支持 WebSocket，但是在某些老版本的浏览器中，WebSocket 可能会存在兼容性问题。
使用 SSE 的示例代码
接下来，我们来看一个使用 SSE 来实现服务器推送的简单示例代码：
-- -------------------- ---- ------- ----- ------ - --- ------------------------------ ------------- - -------- -- - ----------------------- -- --------- - ---------------- - -------- ------- - ----------------------- - -------------- - -------- ------- - ------------------ -
在上面的示例代码中，我们首先使用 EventSource 对象建立连接并监听 '/server/stream' 的事件。当连接建立成功之后，会触发 onopen 事件，然后在 onmessage 事件中处理服务器推送的数据。如果连接出现错误，则会触发 onerror 事件。
在服务器端，我们需要设置 Content-Type 为 text/event-stream，并且在每次推送数据时，都需要使用 data: 和 event: 对数据进行包装，例如：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('data:' + JSON.stringify({msg: 'Hello World'}) + '\n\n');总结
SSE 和 WebSocket 都是实现服务器推送功能的有效技术。对于一些简单的应用场景，使用 SSE 可以更加简单和方便，同时也具有更好的兼容性和可控性。而对于一些复杂的交互场景，WebSocket 可以更好地实现双向通信。在实际开发中，可以根据具体的需求来选择使用哪种技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5cbf8f6b2d6eab3e99ee8