在现代 Web 应用程序中，数据的实时通信变得越来越重要。在这个领域里，一些新的技术被开发出来，以满足实时通信需求。其中两种常见的技术是 Server-sent Events (SSE) 和 WebSocket。它们能够让服务器向客户端推送数据，而不需要客户端发送请求来获取数据。本文将探讨 Server-sent Events 和 WebSocket 的区别和联系。
什么是 Server-sent Events (SSE)？
Server-sent Events (SSE) 是一种基于 HTTP (Hyper Text Transfer Protocol) 的协议，用来向客户端发送实时数据。SSE 是单向通信，只能从服务器向客户端发送数据。SSE 的通信流程如下：
- 客户端向服务器请求 SSE 服务，发起 HTTP 连接。
- 服务器创建一个持久化的连接，通过这个连接发送数据。
- 服务器不断向客户端发送数据，客户端接收并处理数据。
- 服务端关闭连接，或者客户端断开连接。
SSE 是轻量级的，也易于实现。它和使用 Ajax 不同，因为 SSE 可以在有新数据到达时立即通知客户端，而不需要客户端一直发送请求。
什么是 WebSocket？
WebSocket 是一种全双工通信协议，用来实现客户端和服务器之间的实时通信。它允许客户端和服务器之间双向通信，而且是基于 TCP (Transmission Control Protocol) 的。WebSocket 的通信流程如下：
- 客户端向服务器请求建立 WebSocket 连接。
- 服务器允许连接并握手，客户端和服务器之间建立起连接。
- 双方之间可以发送数据，无需再发送 HTTP 请求。
- 连接结束后，客户端和服务器都可以关闭连接。
WebSocket 使用一个基于事件驱动的 API 来接收和发送消息。开发者可以自定义消息协议，以满足应用程序的需求。WebSocket 还支持心跳检测和连接状态等功能。
区别
尽管 SSE 和 WebSocket 都能在 Web 应用程序中实现实时通信，但是它们之间还有很多区别。
协议
SSE 是一种基于 HTTP 的协议，而 WebSocket 是基于 TCP 的。SSE 使用了长连接，而 WebSocket 需要一个握手过程来建立连接。
消息大小
SSE 能够发送任意大小的消息，而 WebSocket 可以发送较大的消息，因为它使用二进制消息传递。
浏览器兼容性
WebSocket 有较好的浏览器兼容性；几乎所有的现代浏览器都支持 WebSocket。而 SSE 则可能有兼容性问题，因为 IE 和 Edge 不支持 SSE。
服务器实现
SSE 的实现相对简单，而 WebSocket 则需要使用 Socket API，这会增加服务器的复杂度。
联系
SSE 和 WebSocket 都是为了实现 Web 应用程序中实时通信而设计的。它们之间的联系在于它们都能传递消息，而且都支持服务器向客户端推送数据。此外，它们还有以下共同的点：
实时性
SSE 和 WebSocket 都能实现实时通信，客户端不需要等待服务器响应。
轻量级
SSE 和 WebSocket 都是轻量级的，不需要复杂的协议和数据包格式。
数据格式
SSE 和 WebSocket 都没有格式限制，可以发送文本和二进制数据。
示例代码
以下是使用 SSE 和 WebSocket 实现实时通信的示例代码。
SSE 示例
-- -------------------- ---- -------
-- -----
----- ---- - ----------------
----- -- - --------------
----------------------- ---- -- -
------------------ -
--------------- -------------------- -- --------
---------------- -----------
------------- ------------ -- ----
---
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
----------------
-- -----
----- ------ - --- --------------------
---------------- - ------- -- -
------------------------ -- ----------
--WebSocket 示例
-- -------------------- ---- -------
-- -----
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- ---- -- -
--------------- -------------
---------------- --------- -- -
---------------------- -------------
------------ ----- -------------
---
---
-- -----
----- -- - --- ---------------------------------
--------- - -- -- -
---------------------- -- --------- ----------
--
------------ - ------- -- -
------------------------ -- ----------
--结论
SSE 和 WebSocket 都可以在 Web 应用程序中实现实时通信，但它们之间还有不同之处。开发者需要根据应用程序的实际需求来选择合适的技术。SSE 适用于需要推送较小数据量的场景。如果需要发送大量的数据，或者需要实现双向通信，那么 WebSocket 可能更适合。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67471bab555db9718d033a3a