前言
在 Web 开发中，常常需要实时地将数据从服务器推送到客户端。这通常可以通过轮询的方式来实现，但轮询的效率并不高，而且对服务器和客户端都造成了一定程度的负担。为了解决这个问题，出现了 SSE 和 WebSocket 这两种技术。
本文将重点介绍 SSE 和 WebSocket 的异同点，并且分析 SSE 在实际项目中的使用场景。
SSE 和 WebSocket 的异同点
SSE（Server Sent Events）和 WebSocket 都是用于实现服务器端向客户端实时推送数据的技术。它们的共同点是：都能够实现双向通信，都不需要客户端轮询服务器来获取数据，而且都能够实现实时性。
但是，它们之间也存在一些差异。下面将从一些关键方面进行比较。
协议不同
SSE 基于 HTTP 协议，属于 HTTP 扩展协议，而 WebSocket 不是基于 HTTP 协议的，它有自己的协议（WebSocket Protocol）。
实现方式不同
SSE 是基于事件的，它通过在服务器端建立一个持久化的连接（长连接），然后服务器会把数据包装成一个事件，发送到客户端。客户端通过监听 onmessage 事件来接收数据。而 WebSocket 则是基于消息的，它通过在客户端和服务器之间建立一个双向的长连接，然后通过 send() 方法来实现双向通信。
兼容性不同
SSE 的兼容性比 WebSocket 更好，因为 SSE 是基于 HTTP 协议的，支持所有的浏览器。而 WebSocket 则不支持 IE10 以下的浏览器，需要使用 polyfill 来实现兼容性。
SSE 在实际项目中的使用场景
SSE 在实际项目中的使用场景很多，下面列举了一些常见的场景。
股票实时行情
在股票行情网站中，需要实时推送股票的最新价格、涨跌幅等信息给用户。SSE 可以通过在服务器端连接股票数据源（如新浪财经、东方财富等），将最新的行情数据实时推送给客户端显示。
聊天室
在聊天室中，需要将用户发送的聊天消息实时推送给其他用户。SSE 可以通过在服务器端建立一个持久化的连接，将聊天消息实时推送给所有在线用户。
内容更新提醒
在一些新闻、博客等网站中，需要实时地将更新的内容通知给用户。SSE 可以通过在服务器端监视内容更新，将新的内容推送给客户端并实时更新页面。
实时数据监控
在一些管理系统中，需要实时地监控系统的运行状态、数据库的连接情况等数据。SSE 可以通过在服务器端连接这些数据源，实时地将监控数据推送给管理员。
代码示例
下面是一个使用 SSE 实现股票实时行情的简单示例：
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -------- ------- -------- -- ------
----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- ----------
---
--- -- - --
-------------- -- -
----- ----- - ------------------------------- - ----------------
----- ----- - -------------- - -----------------
----- ---- - --- ----------------------------
----- ---- - - --- ----- ------ ------ ---- --
----- ----- - ------ -----------------------------
-----------------
-- ------
- ---- -
-------------------
----------
-
----------------
------------------- ------- -- ------------------------客户端代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------
-------
------
--- -----------------
--------
----- -------- - ----------------------------------
----- ------ - --- -----------------------
---------------- - - -- -
----- - --- ------ ------ ---- - - -------------------
----- -- - -----------------------------
------------ - -------- -------- - -------- -----------
-------------------------
--
---------
-------
-------这个示例会定期随机生成股票的价格数据，然后通过 SSE 技术实时推送给客户端，在客户端使用 JavaScript 监听 onmessage 事件来接收数据，并将数据实时地更新到页面上。
总结
本文主要介绍了 SSE 和 WebSocket 的异同点，并分析了 SSE 在实际项目中的使用场景。可以看到，SSE 是一种轻量级且易于使用的推送技术，它可以满足各种实时推送数据的需求，但也有一些局限性，比如数据传输量不能太大，而且只能从服务器到客户端推送数据。在选择使用 SSE 还是 WebSocket 的时候，需要根据具体的业务需求进行评估。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c21c8283d39b488163abca