一句话总结本文给出SSE vs WebSocket的标准答案含对比表格、AI场景选型分析、完整代码面试直接背。一、面试原题同程旅行/美团/字节等大厂AI前端面试高频题“请简述一下SSE和WebSocket的区别为什么在AI聊天场景中通常选择SSE”这道题考察3个能力基础协议理解HTTP vs WebSocket场景分析能力AI聊天的通信特征工程实践经验是否落地过AI产品二、标准答案面试直接背2.1 核心区别对比表维度SSEServer-Sent EventsWebSocket协议基础HTTP/1.1标准HTTPWebSocket协议RFC 6455通信模式单向服务端→客户端全双工双向通信连接建立普通HTTP请求自动支持需要握手升级Upgrade: websocket自动重连✅ 原生支持EventSource自动重连❌ 需手动实现心跳重连数据格式文本text/event-stream二进制或文本浏览器兼容现代浏览器都支持现代浏览器都支持穿透防火墙✅ 容易HTTP端口⚠️ 部分企业防火墙会拦截实现复杂度低前端几行代码中需处理握手、心跳、重连适用场景服务端推送、实时通知双向实时通信、在线协作2.2 一句话总结面试开场“SSE是基于HTTP的单向推送技术适合服务端向客户端持续推送数据WebSocket是全双工协议适合需要双向高频通信的场景。AI聊天选择SSE是因为通信模式以服务端推送为主且SSE实现更简单、兼容性更好。”2.3 为什么AI聊天选SSE4个技术点1. 通信模式匹配AI聊天的数据流是用户发送一条消息 → LLM生成大量文本 → 服务端持续推送给前端。这是典型的请求-持续响应模式不是双向高频通信。SSE的单向推送完全匹配。2. 自动重连适合长连接LLM生成可能持续30-60秒期间网络可能抖动。SSE的EventSource原生支持自动重连constsourcenewEventSource(/api/chat);// 连接断开时浏览器自动重连无需代码处理source.onerror(e){// 这里只是通知浏览器会自动尝试重连console.log(连接异常浏览器自动重连中...);};WebSocket断开需要手动写重连逻辑// WebSocket需要手动重连letws;functionconnect(){wsnewWebSocket(wss://api.example.com);ws.onclose(){setTimeout(connect,3000);// 手动延迟重连};}3. HTTP兼容穿透性更好SSE走标准HTTP企业内网、防火墙、代理服务器都能正常通过。WebSocket的ws:///wss://协议可能被企业防火墙拦截。4. 实现简单维护成本低前端SSE代码constsourcenewEventSource(/api/chat);source.onmessage(e)appendText(e.data);// 5行代码搞定前端WebSocket代码letwsnewWebSocket(wss://api.example.com);ws.onopen()ws.send(JSON.stringify({type:init}));ws.onmessage(e)handleMessage(JSON.parse(e.data));ws.onclose()reconnect();ws.onerror(e)handleError(e);// 需要处理握手、心跳、重连、错误代码量3-5倍2.4 什么场景必须用WebSocket展示深度面试中要展示我知道SSE不是万能的场景为什么用WebSocket实时协作编辑如腾讯文档需要前端主动推送给服务端光标位置、编辑操作在线游戏双向高频低延迟通信股票行情推送下单既要接收行情又要主动发送交易指令IM即时通讯需要发送消息接收消息双向对等“AI聊天如果未来支持’实时语音输入’或’协同编辑AI回答’可能需要WebSocket或SSEHTTP混合架构。”三、完整代码对比3.1 SSE实现前端30行classSSEChatClient{constructor(url){this.urlurl;this.sourcenull;this.onMessagenull;this.onErrornull;}connect(message){// POST请求开启SSE需要fetch API配合fetch(this.url,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({message})}).then(response{constreaderresponse.body.getReader();constdecodernewTextDecoder();constread(){reader.read().then(({done,value}){if(done){this.onMessage?.([DONE]);return;}consttextdecoder.decode(value);// 解析SSE格式data: xxx\n\nconstlinestext.split(\n\n);lines.forEach(line{if(line.startsWith(data: )){constdataline.slice(6);if(data![DONE]){this.onMessage?.(data);}}});read();});};read();}).catch(errthis.onError?.(err));}disconnect(){this.source?.close();}}// 使用constclientnewSSEChatClient(/api/chat/stream);client.onMessage(token){document.getElementById(output).innerHTMLtoken;};client.connect(你好请介绍自己);3.2 WebSocket实现前端80行classWebSocketChatClient{constructor(url){this.urlurl;this.wsnull;this.reconnectAttempts0;this.maxReconnectAttempts5;this.reconnectDelay3000;this.onMessagenull;this.onErrornull;this.heartbeatIntervalnull;}connect(){this.wsnewWebSocket(this.url);this.ws.onopen(){console.log(WebSocket连接成功);this.reconnectAttempts0;this.startHeartbeat();// 发送初始化消息this.ws.send(JSON.stringify({type:init,sessionId:generateId()}));};this.ws.onmessage(event){constdataJSON.parse(event.data);if(data.typepong)return;// 忽略心跳响应this.onMessage?.(data.content);};this.ws.onclose(){this.stopHeartbeat();this.attemptReconnect();};this.ws.onerror(error){this.onError?.(error);};}startHeartbeat(){this.heartbeatIntervalsetInterval((){if(this.ws?.readyStateWebSocket.OPEN){this.ws.send(JSON.stringify({type:ping}));}},30000);// 30秒心跳}stopHeartbeat(){clearInterval(this.heartbeatInterval);}attemptReconnect(){if(this.reconnectAttemptsthis.maxReconnectAttempts){this.onError?.(newError(重连次数超限));return;}this.reconnectAttempts;setTimeout(()this.connect(),this.reconnectDelay);}send(message){if(this.ws?.readyStateWebSocket.OPEN){this.ws.send(JSON.stringify({type:chat,content:message}));}}disconnect(){this.stopHeartbeat();this.ws?.close();}}// 使用constclientnewWebSocketChatClient(wss://api.example.com/chat);client.onMessage(token)appendText(token);client.connect();client.send(你好);四、后端Spring Boot实现4.1 SSE后端Spring WebFluximportorg.springframework.http.MediaType;importorg.springframework.web.bind.annotation.*;importreactor.core.publisher.Flux;importjava.time.Duration;RestControllerRequestMapping(/api/chat)publicclassChatController{PostMapping(value/stream,producesMediaType.TEXT_EVENT_STREAM_VALUE)publicFluxStringchatStream(RequestBodyChatRequestrequest){returncallLLM(request.getMessage()).delayElements(Duration.ofMillis(50))// 模拟流式输出.map(token-data: token\n\n);// SSE格式}privateFluxStringcallLLM(Stringmessage){// 调用LLM API返回FluxStringreturnwebClient.post().uri(https://api.openai.com/v1/chat/completions).bodyValue(buildRequest(message)).retrieve().bodyToFlux(String.class).filter(line-line.startsWith(data:)).map(line-extractToken(line));}}4.2 WebSocket后端Spring Bootimportorg.springframework.web.socket.handler.TextWebSocketHandler;importorg.springframework.web.socket.TextMessage;importorg.springframework.web.socket.WebSocketSession;publicclassChatWebSocketHandlerextendsTextWebSocketHandler{OverrideprotectedvoidhandleTextMessage(WebSocketSessionsession,TextMessagemessage){Stringpayloadmessage.getPayload();// 解析消息类型ChatMessagechatMessageparseMessage(payload);switch(chatMessage.getType()){caseping:session.sendMessage(newTextMessage({\type\:\pong\}));break;casechat:handleChat(session,chatMessage.getContent());break;}}privatevoidhandleChat(WebSocketSessionsession,Stringcontent){// 调用LLM流式推送给前端callLLM(content).subscribe(token-{try{session.sendMessage(newTextMessage({\type\:\token\,\content\:\token\}));}catch(Exceptione){e.printStackTrace();}});}}五、面试答题模板5.1 30秒快速回答一面“SSE是基于HTTP的单向推送适合服务端持续推送数据WebSocket是全双工协议适合双向高频通信。AI聊天选SSE是因为1通信模式以服务端推送为主2SSE自动重连适合长连接3HTTP兼容穿透性好4实现简单维护成本低。”5.2 2分钟详细回答二面首先SSE和WebSocket的核心区别在于通信模式和协议基础。SSE基于HTTP是单向推送服务端可以持续向客户端发送数据WebSocket是独立协议支持全双工双向通信。AI聊天场景选择SSE我有4个考量通信模式匹配AI聊天是’用户提问→LLM生成→持续推送’单向推送足够自动重连LLM生成可能持续几十秒SSE原生支持断线重连兼容性SSE走HTTP企业防火墙、代理都能通过实现成本前端EventSource几行代码WebSocket需要处理握手、心跳、重连但我也清楚SSE的局限如果未来需要’协同编辑AI回答’或’实时语音输入’可能需要WebSocket或混合架构。5.3 5分钟深度回答三面项目复盘在上面的基础上加入“我在XX项目中实际对比过两种方案…”“SSE的自动重连在弱网环境下表现…”“我们最终选择了SSE但做了XX优化…”“如果让我重新设计我会考虑XX…”六、扩展问题预判追问答案要点“SSE的自动重连机制是怎样的”EventSource内部实现指数退避可配置retry时间“SSE怎么支持POST请求”原生EventSource只支持GET需要fetchReadableStream或库如eventsource“SSE和WebSocket性能对比”SSE连接开销小HTTPWebSocket帧头小2-14字节大流量时WebSocket更优“如何实现SSE的断线续传”Last-Event-ID头部服务端记录offset重连时从断点续传“SSE在移动端表现如何”iOS Safari支持好Android Chrome支持好但App WebView可能需要测试七、总结考察点你的回答基础概念SSEHTTP单向推送WebSocket全双工协议选型依据AI聊天单向推送为主长连接简单实现选SSE深度思考知道WebSocket适用场景不盲目说SSE万能工程实践能写出SSE和WebSocket的完整代码优化意识提到断线续传、弱网处理、移动端适配 关于作者JavaAgent架构师— 十年Java分布式架构老兵专注AI Agent企业级落地。主导过数字员工、SOP智能引擎等项目开发过RPC框架、消息中间件、ORM框架。正在输出三个专栏《前端AI工程化》— SSE/流式渲染/Function Calling/企业级架构《Java体系也能玩转AI》— Spring AI/Agent框架/MCP/工作流《从0构建Agent系统》— 数字员工/SOP模型库/生产部署让Java开发者不转Python让前端工程师掌握AI核心竞争力。关注专栏点赞收藏评论区见 这是《前端AI工程化》专栏面试题系列第1篇。专栏覆盖SSE/流式渲染/打字机效果/Function Calling/RAG优化/企业级架构
AI前端面试必考：SSE和WebSocket区别？为什么AI聊天选SSE？（标准答案+代码）
一句话总结本文给出SSE vs WebSocket的标准答案含对比表格、AI场景选型分析、完整代码面试直接背。一、面试原题同程旅行/美团/字节等大厂AI前端面试高频题“请简述一下SSE和WebSocket的区别为什么在AI聊天场景中通常选择SSE”这道题考察3个能力基础协议理解HTTP vs WebSocket场景分析能力AI聊天的通信特征工程实践经验是否落地过AI产品二、标准答案面试直接背2.1 核心区别对比表维度SSEServer-Sent EventsWebSocket协议基础HTTP/1.1标准HTTPWebSocket协议RFC 6455通信模式单向服务端→客户端全双工双向通信连接建立普通HTTP请求自动支持需要握手升级Upgrade: websocket自动重连✅ 原生支持EventSource自动重连❌ 需手动实现心跳重连数据格式文本text/event-stream二进制或文本浏览器兼容现代浏览器都支持现代浏览器都支持穿透防火墙✅ 容易HTTP端口⚠️ 部分企业防火墙会拦截实现复杂度低前端几行代码中需处理握手、心跳、重连适用场景服务端推送、实时通知双向实时通信、在线协作2.2 一句话总结面试开场“SSE是基于HTTP的单向推送技术适合服务端向客户端持续推送数据WebSocket是全双工协议适合需要双向高频通信的场景。AI聊天选择SSE是因为通信模式以服务端推送为主且SSE实现更简单、兼容性更好。”2.3 为什么AI聊天选SSE4个技术点1. 通信模式匹配AI聊天的数据流是用户发送一条消息 → LLM生成大量文本 → 服务端持续推送给前端。这是典型的请求-持续响应模式不是双向高频通信。SSE的单向推送完全匹配。2. 自动重连适合长连接LLM生成可能持续30-60秒期间网络可能抖动。SSE的EventSource原生支持自动重连constsourcenewEventSource(/api/chat);// 连接断开时浏览器自动重连无需代码处理source.onerror(e){// 这里只是通知浏览器会自动尝试重连console.log(连接异常浏览器自动重连中...);};WebSocket断开需要手动写重连逻辑// WebSocket需要手动重连letws;functionconnect(){wsnewWebSocket(wss://api.example.com);ws.onclose(){setTimeout(connect,3000);// 手动延迟重连};}3. HTTP兼容穿透性更好SSE走标准HTTP企业内网、防火墙、代理服务器都能正常通过。WebSocket的ws:///wss://协议可能被企业防火墙拦截。4. 实现简单维护成本低前端SSE代码constsourcenewEventSource(/api/chat);source.onmessage(e)appendText(e.data);// 5行代码搞定前端WebSocket代码letwsnewWebSocket(wss://api.example.com);ws.onopen()ws.send(JSON.stringify({type:init}));ws.onmessage(e)handleMessage(JSON.parse(e.data));ws.onclose()reconnect();ws.onerror(e)handleError(e);// 需要处理握手、心跳、重连、错误代码量3-5倍2.4 什么场景必须用WebSocket展示深度面试中要展示我知道SSE不是万能的场景为什么用WebSocket实时协作编辑如腾讯文档需要前端主动推送给服务端光标位置、编辑操作在线游戏双向高频低延迟通信股票行情推送下单既要接收行情又要主动发送交易指令IM即时通讯需要发送消息接收消息双向对等“AI聊天如果未来支持’实时语音输入’或’协同编辑AI回答’可能需要WebSocket或SSEHTTP混合架构。”三、完整代码对比3.1 SSE实现前端30行classSSEChatClient{constructor(url){this.urlurl;this.sourcenull;this.onMessagenull;this.onErrornull;}connect(message){// POST请求开启SSE需要fetch API配合fetch(this.url,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({message})}).then(response{constreaderresponse.body.getReader();constdecodernewTextDecoder();constread(){reader.read().then(({done,value}){if(done){this.onMessage?.([DONE]);return;}consttextdecoder.decode(value);// 解析SSE格式data: xxx\n\nconstlinestext.split(\n\n);lines.forEach(line{if(line.startsWith(data: )){constdataline.slice(6);if(data![DONE]){this.onMessage?.(data);}}});read();});};read();}).catch(errthis.onError?.(err));}disconnect(){this.source?.close();}}// 使用constclientnewSSEChatClient(/api/chat/stream);client.onMessage(token){document.getElementById(output).innerHTMLtoken;};client.connect(你好请介绍自己);3.2 WebSocket实现前端80行classWebSocketChatClient{constructor(url){this.urlurl;this.wsnull;this.reconnectAttempts0;this.maxReconnectAttempts5;this.reconnectDelay3000;this.onMessagenull;this.onErrornull;this.heartbeatIntervalnull;}connect(){this.wsnewWebSocket(this.url);this.ws.onopen(){console.log(WebSocket连接成功);this.reconnectAttempts0;this.startHeartbeat();// 发送初始化消息this.ws.send(JSON.stringify({type:init,sessionId:generateId()}));};this.ws.onmessage(event){constdataJSON.parse(event.data);if(data.typepong)return;// 忽略心跳响应this.onMessage?.(data.content);};this.ws.onclose(){this.stopHeartbeat();this.attemptReconnect();};this.ws.onerror(error){this.onError?.(error);};}startHeartbeat(){this.heartbeatIntervalsetInterval((){if(this.ws?.readyStateWebSocket.OPEN){this.ws.send(JSON.stringify({type:ping}));}},30000);// 30秒心跳}stopHeartbeat(){clearInterval(this.heartbeatInterval);}attemptReconnect(){if(this.reconnectAttemptsthis.maxReconnectAttempts){this.onError?.(newError(重连次数超限));return;}this.reconnectAttempts;setTimeout(()this.connect(),this.reconnectDelay);}send(message){if(this.ws?.readyStateWebSocket.OPEN){this.ws.send(JSON.stringify({type:chat,content:message}));}}disconnect(){this.stopHeartbeat();this.ws?.close();}}// 使用constclientnewWebSocketChatClient(wss://api.example.com/chat);client.onMessage(token)appendText(token);client.connect();client.send(你好);四、后端Spring Boot实现4.1 SSE后端Spring WebFluximportorg.springframework.http.MediaType;importorg.springframework.web.bind.annotation.*;importreactor.core.publisher.Flux;importjava.time.Duration;RestControllerRequestMapping(/api/chat)publicclassChatController{PostMapping(value/stream,producesMediaType.TEXT_EVENT_STREAM_VALUE)publicFluxStringchatStream(RequestBodyChatRequestrequest){returncallLLM(request.getMessage()).delayElements(Duration.ofMillis(50))// 模拟流式输出.map(token-data: token\n\n);// SSE格式}privateFluxStringcallLLM(Stringmessage){// 调用LLM API返回FluxStringreturnwebClient.post().uri(https://api.openai.com/v1/chat/completions).bodyValue(buildRequest(message)).retrieve().bodyToFlux(String.class).filter(line-line.startsWith(data:)).map(line-extractToken(line));}}4.2 WebSocket后端Spring Bootimportorg.springframework.web.socket.handler.TextWebSocketHandler;importorg.springframework.web.socket.TextMessage;importorg.springframework.web.socket.WebSocketSession;publicclassChatWebSocketHandlerextendsTextWebSocketHandler{OverrideprotectedvoidhandleTextMessage(WebSocketSessionsession,TextMessagemessage){Stringpayloadmessage.getPayload();// 解析消息类型ChatMessagechatMessageparseMessage(payload);switch(chatMessage.getType()){caseping:session.sendMessage(newTextMessage({\type\:\pong\}));break;casechat:handleChat(session,chatMessage.getContent());break;}}privatevoidhandleChat(WebSocketSessionsession,Stringcontent){// 调用LLM流式推送给前端callLLM(content).subscribe(token-{try{session.sendMessage(newTextMessage({\type\:\token\,\content\:\token\}));}catch(Exceptione){e.printStackTrace();}});}}五、面试答题模板5.1 30秒快速回答一面“SSE是基于HTTP的单向推送适合服务端持续推送数据WebSocket是全双工协议适合双向高频通信。AI聊天选SSE是因为1通信模式以服务端推送为主2SSE自动重连适合长连接3HTTP兼容穿透性好4实现简单维护成本低。”5.2 2分钟详细回答二面首先SSE和WebSocket的核心区别在于通信模式和协议基础。SSE基于HTTP是单向推送服务端可以持续向客户端发送数据WebSocket是独立协议支持全双工双向通信。AI聊天场景选择SSE我有4个考量通信模式匹配AI聊天是’用户提问→LLM生成→持续推送’单向推送足够自动重连LLM生成可能持续几十秒SSE原生支持断线重连兼容性SSE走HTTP企业防火墙、代理都能通过实现成本前端EventSource几行代码WebSocket需要处理握手、心跳、重连但我也清楚SSE的局限如果未来需要’协同编辑AI回答’或’实时语音输入’可能需要WebSocket或混合架构。5.3 5分钟深度回答三面项目复盘在上面的基础上加入“我在XX项目中实际对比过两种方案…”“SSE的自动重连在弱网环境下表现…”“我们最终选择了SSE但做了XX优化…”“如果让我重新设计我会考虑XX…”六、扩展问题预判追问答案要点“SSE的自动重连机制是怎样的”EventSource内部实现指数退避可配置retry时间“SSE怎么支持POST请求”原生EventSource只支持GET需要fetchReadableStream或库如eventsource“SSE和WebSocket性能对比”SSE连接开销小HTTPWebSocket帧头小2-14字节大流量时WebSocket更优“如何实现SSE的断线续传”Last-Event-ID头部服务端记录offset重连时从断点续传“SSE在移动端表现如何”iOS Safari支持好Android Chrome支持好但App WebView可能需要测试七、总结考察点你的回答基础概念SSEHTTP单向推送WebSocket全双工协议选型依据AI聊天单向推送为主长连接简单实现选SSE深度思考知道WebSocket适用场景不盲目说SSE万能工程实践能写出SSE和WebSocket的完整代码优化意识提到断线续传、弱网处理、移动端适配 关于作者JavaAgent架构师— 十年Java分布式架构老兵专注AI Agent企业级落地。主导过数字员工、SOP智能引擎等项目开发过RPC框架、消息中间件、ORM框架。正在输出三个专栏《前端AI工程化》— SSE/流式渲染/Function Calling/企业级架构《Java体系也能玩转AI》— Spring AI/Agent框架/MCP/工作流《从0构建Agent系统》— 数字员工/SOP模型库/生产部署让Java开发者不转Python让前端工程师掌握AI核心竞争力。关注专栏点赞收藏评论区见 这是《前端AI工程化》专栏面试题系列第1篇。专栏覆盖SSE/流式渲染/打字机效果/Function Calling/RAG优化/企业级架构
