EventSource 和 WebSocket 都是用于在客户端和服务器之间进行实时通信的技术，但它们之间存在一些区别：
一、连接方式
- EventSource：
- 建立连接相对简单，客户端通过向服务器发送一个 HTTP 请求来初始化连接，请求的 URL 指向服务器上的一个资源，该资源会持续不断地向客户端推送事件。
- 连接是单向的，只能由服务器向客户端发送数据。
- WebSocket：
- 建立连接时需要进行一个握手过程，这个过程是通过 HTTP 升级请求实现的。一旦连接建立，通信是双向的，可以在客户端和服务器之间互相发送数据。
二、数据传输类型
- EventSource：
- 主要用于服务器向客户端发送文本数据，通常以事件流的形式进行推送。每个事件由一个事件类型和数据组成，客户端可以根据事件类型来处理不同的数据。
- 数据格式相对简单，适合传递简单的文本消息或事件通知。
- WebSocket：
- 可以传输任意类型的数据，包括文本、二进制数据等。这使得 WebSocket 更加灵活，可以用于传输各种类型的实时数据，如图像、音频、视频等。
三、适用场景
- EventSource：
- 适用于那些只需要服务器向客户端单向推送消息的场景，比如实时新闻更新、股票行情推送、服务器端日志实时输出等。
- 由于其连接建立相对简单，对于一些对实时性要求不是特别高的场景比较适用。
- WebSocket：
- 适用于需要双向通信的场景，比如在线游戏、实时聊天应用、协作工具等。在这些场景中，客户端和服务器都需要能够随时发送数据。
- 对于对实时性要求非常高的应用，WebSocket 可以提供更低的延迟和更高的性能。
四、错误处理和重连机制
- EventSource：
- 当连接出现问题时，EventSource 会自动尝试重新连接。客户端可以通过监听
error事件来处理连接错误。 - 重新连接的行为是内置的，无需客户端进行复杂的错误处理和重连逻辑编写。
- 当连接出现问题时，EventSource 会自动尝试重新连接。客户端可以通过监听
- WebSocket：
- 客户端和服务器都可以检测到连接错误，并可以根据需要手动实现重连逻辑。
- 由于 WebSocket 的双向通信特性，错误处理和重连机制通常需要客户端和服务器共同协作来实现。
五、兼容性
- EventSource：
- 在现代浏览器中具有较好的兼容性，几乎所有主流浏览器都支持 EventSource。这使得它在开发面向广泛用户群体的应用时具有一定的优势。
- WebSocket：
- 虽然也得到了广泛的支持，但在一些旧版本的浏览器中可能需要使用 polyfill 或降级方案来实现兼容性。
后端示例代码
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Date;
import java.util.Random;@RestController
public class EventSourceController {@GetMapping(value = "/events", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public String eventSource() {Random random = new Random();while (true) {try {Thread.sleep(2000);int randomNumber = random.nextInt(100);return "data: 当前随机数：" + randomNumber + "\n\n";} catch (InterruptedException e) {e.printStackTrace();}}}
}前端示例代码
<!DOCTYPE html>
<html><head><script>if (typeof (EventSource)!== "undefined") {var source = new EventSource("/events");source.onmessage = function (event) {document.getElementById("result").innerHTML += event.data + "<br>";};} else {document.getElementById("result").innerHTML = "你的浏览器不支持 Server-Sent Events。";}</script>
</head><body><div id="result"></div>
</body></html>
![BUUCTF [SCTF2019]电单车详解两种方法（python实现绝对原创）](https://i-blog.csdnimg.cn/direct/6ab9804db47447efbe17ba9dc39d1f04.png)
