简介
SSE（Server-Sent Events）是 HTML5 规范中的一种新的客户端和服务器之间的通信方式，它提供了一种非常简单、轻量级的实现方法，支持向浏览器推送数据，而无需轮询或刷新页面。与传统的 Ajax 以及 Websocket 相比，SSE 更适用于一些简单、低频的数据推送场景，例如天气预报信息等实时信息更新场景。
本文将介绍 SSE 的原理、实现方式，并与 Websocket 进行比较分析，为前端开发者提供了解 SSE 技术的详细指南。
SSE 原理
SSE 的实现原理基于一种长轮询（Long Polling）技术，而长轮询技术是 HTTP 的基本机制，也就是说，SSE 只是一种利用 HTTP 长轮询机制进行实现的技术。
长轮询技术的实现方式是在客户端向服务器发送一个异步请求，如果服务器没有数据更新，则会一直挂起这个请求，直到有数据更新时再返回给客户端，然后客户端再重新发起一次异步请求，如此循环进行，实现数据的实时推送。
SSE 的实现方式和长轮询类似，不过 SSE 支持服务器向客户端推送多条数据，不需要客户端不断地发起异步请求。
SSE 实现方式
SSE 的实现方式相对简单，如下是一个基本的 SSE 实现示例：
--- ------ - --- -----------------------------------------
---------------------------------- --------------- -
------------------------
-- -------
------------------------------- --------------- -
-------------------------
-- -------
-------------------------------- --------------- -
-- ----------------- -- ------------------- -
----------------------------
-
-- -------在以上示例中，EventSource 对象用于与服务器建立 SSE 连接，并通过 addEventListener 方法监听服务器发送的数据。如果需要发送多种类型的数据，可以通过自定义事件名进行区分，例如：
-- ------ ----------------------------------------- ---- ------- ---------- ---- ------ ---- -- --- ------------- ---- ------- ------------- ---- ------ ---- -- ------- --- ------------- -- ----- --------------------------------- --------------- - ------------------------ -- ---- -- --- ------- -- ------- ------------------------------------ --------------- - ------------------------ -- ---- -- ------- --- ------- -- -------
以上代码中，服务器通过发送自定义事件名以及数据，客户端通过监听事件名来处理不同的数据类型。
SSE 与 Websocket 比较
虽然 SSE 和 Websocket 都是用于实现实时数据推送的技术，但两者还是存在一些明显的区别，下面介绍它们的区别以及使用场景：
1. 连接方式不同
SSE 基于 HTTP 长轮询机制实现数据推送，而 Websocket 利用 TCP 连接实现数据推送。因此 SSE 只能在 HTTP 协议上使用，无法跨域访问，而 Websocket 支持跨域访问。
2. 通信方式不同
SSE 的通信方式是单向的，即服务器只能向客户端发送数据，不能接收客户端的数据，而 Websocket 的通信方式是双向的，服务器和客户端都能发送和接收数据。
3. 支持的数据格式不同
SSE 只支持文本格式的数据（即只能发送字符串），而 Websocket 可以发送任意类型的数据（包括二进制数据）。
4. 实时性表现不同
由于 SSE 的实现方式是基于 HTTP 长轮询机制的，因此 SSE 在实时性上的表现不如 Websocket。
5. 适用场景不同
由于 SSE 的实现方式比较简单，适用于一些简单、低频的数据推送场景，例如天气预报信息、股票信息等实时信息更新场景；而 Websocket 适用于一些复杂、高频的数据推送场景，例如在线游戏、视频直播等。
结论
本文介绍了 SSE 的原理、实现方式以及与 Websocket 的比较分析，可以看出 SSE 是一个轻量级、简单的实现实时数据推送的技术，但 Websocket 更加强大、灵活，对于一些复杂、高频的实时数据推送场景来说更加适用。
SSE 的实现方式相对简单，适用于一些简单、低频的实时数据推送场景，可以在一定程度上减轻服务器的压力，提高用户体验。而对于一些复杂、高频的实时数据推送场景，建议使用 Websocket 技术进行实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671346f1ad1e889fe20bc3e1