“你们前端算什么？不就是切图仔？”。当后端甩出这句话时，作为前端开发者，我已经在项目中见过无数技术上的争论，但这一次的冲突，真的是让我彻底爆发了。

我先是一愣，紧接着，我直接怒喷了：“你问我前端算什么东西？现在我就告诉你！后端做不了的我前端做，后端做得了的我前端更要做，先斩后奏，CTO特许，这就是前端！ ”

整个会议室静默了几秒，大家的目光都集中在我身上。是的，我当时情绪激动，但实话说，这场冲突背后我真是一点错没有。

【事件背景】【折中方案】

在一番拉扯过后，我们终于达成了妥协。我坚持要提高用户体验，要求尽量减少轮询的频率并结合一些缓存策略来降低服务器负担；后端则表示愿意优化服务器的性能，准备对SSE进行适当的技术调研，看看是否可以在未来的迭代中支持更高效的长连接。

最终，我们决定：在当前的架构下，采用轮询解决问题，同时为未来的系统升级保留SSE的支持。

【技术升级】

两个月后，后端和我一起完成了升级SSE的改造，解决了技术债务。

// 创建 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;
    }
}

【总结】【后记】

这些语录不是子弹，而是前后端大战的残骸。当我们把这些对话裱进相框挂在工位，终有一天会笑着回忆：

「当年他骂我菜，我笑他土，如今我们合力搞垮了三个测试环境，这才是真正的战友情！」

（温馨提示：

阅读完毕请深呼吸三次，默念「世界如此美好，我却如此暴躁」，毕竟明天还要联调新接口呢：）