【简单易懂】SSE 和 WebSocket（Java版）

最新推荐文章于 2025-05-14 21:45:37 发布

在努力的韩小豪

最新推荐文章于 2025-05-14 21:45:37 发布

阅读量957

点赞数 18

文章标签： websocket java 网络协议实时通信 SSE WebSocket 网络编程

本文链接：https://blog.csdn.net/weixin_68138311/article/details/147916042

版权

一、前言

SSE（Server-Sent Events）和 WebSocket 是两种用于实现实时通信的 Web 技术；
但它们在设计、用途和实现方式上有显著区别。

二、SSE（Server-Sent Events）

定义：基于 HTTP 的单向通信协议，允许服务器主动向客户端推送数据。
特点：
- 单向通信：仅支持服务器 → 客户端的单向数据推送。
- 基于 HTTP：使用简单，无需额外协议，兼容现有 HTTP 基础设施。
- 自动重连：内置断线重连机制，客户端会自动尝试重新连接。
- 轻量级：数据格式为纯文本（如 text/event-stream），适合推送简单数据，如新闻、股价。
适用场景：
- 实时通知（如新闻、天气更新）。
- 服务器主导的实时数据推送（如日志流、进度条更新）。
局限性：
- 不支持客户端向服务器发送消息。
- 部分旧浏览器（如 IE）不支持。

三、WebSocket

定义：基于 TCP 的全双工通信协议，支持客户端与服务器双向实时通信。
特点：
- 双向通信：客户端和服务端可以同时发送和接收数据。
- 独立协议：通过 HTTP 升级握手建立连接（ws:// 或 wss://），之后脱离 HTTP 独立运行。
- 低延迟：持久化连接，适合高频交互场景（如聊天、游戏）。
- 支持二进制数据：可传输文本或二进制数据（如图片、音频）。
适用场景：
- 实时聊天、协作工具。
- 多人在线游戏、实时交易系统。
局限性：
- 实现复杂度较高（需处理连接状态、心跳检测等）。
- 需要服务器和客户端同时支持 WebSocket 协议。

四、核心区别对比

在这里插入图片描述

五、代码示例（基于Java的Spring Boot）

1、SSE

A.服务端代码

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

@RestController
public class SseController {

    @GetMapping(path = "/sse-stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter streamEvents() {
        SseEmitter emitter = new SseEmitter(60_000L); // 超时时间 60 秒

        // 模拟实时数据推送（实际可能从数据库或外部服务获取）
        new Thread(() -> {
            try {
                for (int i = 0; i < 10; i++) {
                    SseEmitter.SseEventBuilder event = SseEmitter.event()
                            .data("SSE 数据 - " + i) // 推送的数据
                            .id(String.valueOf(i))   // 事件 ID（可选）
                            .name("sse-event");      // 事件名称（可选）
                    emitter.send(event);
                    Thread.sleep(1000); // 间隔 1 秒
                }
                emitter.complete(); // 完成推送
            } catch (Exception e) {
                emitter.completeWithError(e); // 异常处理
            }
        }).start();

        return emitter;
    }
}

B.客户端代码（JavaScript）

const eventSource = new EventSource('/sse-stream');
eventSource.onmessage = (e) => {
    console.log("收到 SSE 数据:", e.data);
};
eventSource.onerror = (e) => {
    console.error("SSE 连接错误:", e);
};

C.关键点

服务端使用 SseEmitter 发送事件流。
客户端通过 EventSource 监听数据。

2、WebSocket

A. [服务端]依赖引入（pom.xml）

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

B. [服务端]WebSocket配置类

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws")
                .setAllowedOrigins("*"); // 允许跨域
    }
}

C. [服务端]WebSocket处理器

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 连接建立时触发
        session.sendMessage(new TextMessage("服务端：连接成功！"));
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 收到客户端消息时触发
        String clientMsg = message.getPayload();
        System.out.println("收到客户端消息: " + clientMsg);

        // 回复客户端
        session.sendMessage(new TextMessage("服务端回复: " + clientMsg));
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        // 连接关闭时触发
        System.out.println("WebSocket 连接关闭");
    }
}

D. 客户端测试（JavaScript）

const socket = new WebSocket('ws://localhost:8080/ws');

// 连接成功
socket.onopen = () => {
    console.log("WebSocket 连接已建立");
    socket.send("Hello WebSocket!");
};

// 接收消息
socket.onmessage = (e) => {
    console.log("收到消息:", e.data);
};

// 连接关闭
socket.onclose = () => {
    console.log("WebSocket 连接已关闭");
};