EventSource 和 WebSocket的区别

北极冰雨

已于 2024-09-24 16:51:00 修改

阅读量521

点赞数 3

分类专栏： java 文章标签：网络协议 websocket

于 2024-09-24 16:47:45 首次发布

本文链接：https://blog.csdn.net/keizhige/article/details/142494114

版权

java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

EventSource 和 WebSocket 都是用于在客户端和服务器之间进行实时通信的技术，但它们之间存在一些区别：

一、连接方式

EventSource：
- 建立连接相对简单，客户端通过向服务器发送一个 HTTP 请求来初始化连接，请求的 URL 指向服务器上的一个资源，该资源会持续不断地向客户端推送事件。
- 连接是单向的，只能由服务器向客户端发送数据。
WebSocket：
- 建立连接时需要进行一个握手过程，这个过程是通过 HTTP 升级请求实现的。一旦连接建立，通信是双向的，可以在客户端和服务器之间互相发送数据。

二、数据传输类型

EventSource：
- 主要用于服务器向客户端发送文本数据，通常以事件流的形式进行推送。每个事件由一个事件类型和数据组成，客户端可以根据事件类型来处理不同的数据。
- 数据格式相对简单，适合传递简单的文本消息或事件通知。
WebSocket：
- 可以传输任意类型的数据，包括文本、二进制数据等。这使得 WebSocket 更加灵活，可以用于传输各种类型的实时数据，如图像、音频、视频等。

三、适用场景

EventSource：
- 适用于那些只需要服务器向客户端单向推送消息的场景，比如实时新闻更新、股票行情推送、服务器端日志实时输出等。
- 由于其连接建立相对简单，对于一些对实时性要求不是特别高的场景比较适用。
WebSocket：
- 适用于需要双向通信的场景，比如在线游戏、实时聊天应用、协作工具等。在这些场景中，客户端和服务器都需要能够随时发送数据。
- 对于对实时性要求非常高的应用，WebSocket 可以提供更低的延迟和更高的性能。

四、错误处理和重连机制

EventSource：
- 当连接出现问题时，EventSource 会自动尝试重新连接。客户端可以通过监听 error 事件来处理连接错误。
- 重新连接的行为是内置的，无需客户端进行复杂的错误处理和重连逻辑编写。
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>