后端Leader放话：“你们前端算个P？”，我直接怒了……

// 创建 EventSource 实例，连接到后端的 SSE 流
const eventSource = new EventSource('http://localhost:8080/sse');

// 处理接收到的消息
eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    console.log('Received message:', data);
    // 在这里处理数据，如更新UI等
    updateUI(data);
};

// 监听特定的事件类型
eventSource.addEventListener('customEvent', function(event) {
    const data = JSON.parse(event.data);
    console.log('Received custom event:', data);
    // 对 customEvent 做特定处理
    handleCustomEvent(data);
});

// 错误处理
eventSource.onerror = function(event) {
    console.error('SSE connection error:', event);
    // 可以尝试重连，或做其他处理
};

// 连接关闭
eventSource.onclose = function() {
    console.log('SSE connection closed');
};

// 更新UI的函数
function updateUI(data) {
    // 假设有一个 DOM 元素显示消息
    const messageContainer = document.getElementById('messages');
    const messageElement = document.createElement('div');
    messageElement.textContent = `Message: ${data.message}`;
    messageContainer.appendChild(messageElement);
}

// 特定事件的处理函数
function handleCustomEvent(data) {
    // 自定义事件的处理逻辑
    console.log('Handling custom event:', data);
}

复制

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;

import java.io.IOException;
import java.util.concurrent.TimeUnit;

@RestController
public class SseController {

    // SSE 端点，向客户端推送消息
    @GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter stream() {
        SseEmitter emitter = new SseEmitter();

        // 启动一个后台线程来推送数据
        new Thread(() -> {
            try {
                for (int i = 0; i < 5; i++) {
                    // 模拟服务器端发送的数据
                    String message = "Message " + (i + 1);
                    emitter.send(message);  // 发送消息
                    TimeUnit.SECONDS.sleep(1);  // 每秒发送一次
                }

                // 发送自定义事件
                emitter.send(SseEmitter.event().name("customEvent").data("Custom event data"));

                emitter.complete(); // 完成
            } catch (IOException | InterruptedException e) {
                emitter.completeWithError(e); // 错误处理
            }
        }).start();

        return emitter;
    }
}

复制