随着现代互联网的快速发展，实时通信的需求也在不断增长。为了满足这一需求，HTML5提供了两种实现实时通信的方案：SSE（Server-Sent Events）和WebSocket。
本文将详细介绍SSE和WebSocket的技术原理、优缺点、适用场景以及示例代码，旨在帮助前端开发者更好地理解和应用SSE和WebSocket技术。
技术原理
SSE
SSE是一种基于HTTP的服务器推送技术，它充分利用了HTTP协议的长连接特性，实现了服务器端向客户端实时推送数据的功能。SSE的工作原理如下：
- 客户端通过浏览器向服务器发起一个HTTP请求，请求一段特殊的URL。
- 服务器接收到请求后，返回一段特殊的响应头：
Content-Type:text/event-stream，并保持连接不断开。 - 服务器实时向客户端发送数据，每次发送都以一个特殊的事件名开头，然后接着一个JSON字符串，客户端通过监听这些事件名来处理数据。
WebSocket
WebSocket是一种全双工、双向通信的协议，它在建立连接之后，客户端和服务器之间可以通过这个连接实时发送和接收数据。WebSocket的工作原理如下：
- 客户端发送一个HTTP请求到服务器，请求建立WebSocket连接。
- 服务器接收到请求后返回一个HTTP响应，和一段特殊的头部：
Upgrade: WebSocket，表示连接已升级为WebSocket协议，这时候开始使用自定义的WebSocket协议进行通信。 - 之后客户端和服务器可以互相发送和接收数据，数据包可以直接进行二进制传输或者通过JSON等格式进行传输。
优缺点比较
SSE
优点
- SSE是基于HTTP的协议，与Web技术紧密结合，更容易使用和配置。
- SSE不需要额外的协议操作（例如打洞、握手等），将数据简单地打包并通过HTTP长连接推送即可，这使得它更加可靠，并且更容易受到防火墙的允许。
- SSE支持大多数现代浏览器，包括IE10+和移动端浏览器。
缺点
- SSE只支持单向通信，只能服务器向客户端推送数据，不能客户端向服务器发送数据。
- SSE长连接在网络不佳的情况下容易中断，需要考虑重连机制。
- SSE不支持二进制数据传输，在传输大量数据时效率不如WebSocket高。
WebSocket
优点
- WebSocket支持双向通信，实时性更高，能够满足更复杂的通信需求。
- WebSocket协议采用二进制传输，传输效率更高。
- WebSocket使用更多的二进制数据，在处理多媒体数据时更有效。WebRTC等实时流媒体传输使用的就是WebSocket协议。
缺点
- WebSocket需要额外的协议操作（例如打洞、握手等），需要更多的网络资源，且更容易受到防火墙的限制。
- WebSocket支持的浏览器和设备有限，不支持IE10以下的版本和部分移动端浏览器。
适用场景
- 在需要实现服务器向客户端推送数据，且数据量不大，需要对兼容性有要求的场景中，可以选择SSE。
- 在需要实现双向实时通信的场景中，需要对传输效率和数据量有要求的场景中，可以选择WebSocket。
示例代码
SSE
后端代码（Express框架）：
-- -------------------- ---- -------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
--- ----- - --
-------------- -- -
---------------- ---------------
--------
-- ------
---前端代码：
const source = new EventSource('/sse');
source.addEventListener('message', (event) => {
console.log(event.data);
});WebSocket
后端代码（Node.js）：
-- -------------------- ---- -------
----- --------- - --------------
----- ------ - --- ------------------ ----- ---- ---
----------------------- -------- -- -
------------------- -------------
-------------------- --------- -- -
---------------------
---
---前端代码：
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------------------------- ------- -- - ------------------- ---------- --- ---------------------------------- ------- -- - ------------------------ ---
结论
SSE和WebSocket在实时通信中各有优缺点，需要根据实际需求选择合适的技术方案。对于一些简单的通信场景，SSE是一个更为简单、兼容性更高的解决方案；而WebSocket则适用于更复杂、数据量更大的实时通信场景。希望本文能够为前端开发者在选择实时通信方案时提供一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67190523ad1e889fe22f774d