一、EventSourceSSE / 服务器发送事件通俗理解相当于服务器给客户端开了一个“专属推送通道”一旦连接建立服务器就能随时给客户端发消息客户端只能接收不能主动发送就像老师给学生单方面发通知不用学生反复问。专业定义EventSource 是浏览器原生 API用于建立单向、持久的 HTTP 长连接让服务器主动向客户端推送实时数据也被称为 SSEServer-Sent Events是轻量级实时推送解决方案。1. 核心特点必背单向通信仅支持「服务器 → 客户端」单向推送区别于 WebSocket 的双向通信适合只需要服务器主动发消息的场景比如公告推送。基于标准 HTTP无需升级协议普通后端接口就能支持不用像 WebSocket 那样单独配置协议接入成本极低。自动重连网络断开、服务器异常时浏览器会自动重试连接默认重试间隔几秒无需手动写重连逻辑降低开发成本。事件驱动支持自定义事件类型比如 userUpdate、systemNotice还能设置消息 ID实现断线续连重连时会携带上一次的消息 ID避免漏收消息。轻量简单API 简洁、代码量少比 WebSocket 更轻量无需处理复杂的双向通信逻辑适合简单实时场景。2. 前端基本用法可直接默写// 1. 建立连接参数是后端 SSE 接口地址constesnewEventSource(/api/sse);// 2. 监听默认消息服务器未指定 event 时触发es.onmessage(e){console.log(收到默认消息:,e.data);// e.data 是服务器发送的字符串需自行解析 JSON};// 3. 监听自定义事件服务器通过 event: 字段指定事件名es.addEventListener(userUpdate,(e){constdataJSON.parse(e.data);// 通常服务器会发 JSON 字符串需解析console.log(用户信息更新:,data);});// 4. 监听连接状态es.onopen()console.log(SSE 连接成功);// 连接建立时触发es.onerror(err){console.error(SSE 连接出错/断开:,err);// 特殊场景可手动关闭避免无效重连// es.close();};// 5. 手动关闭连接不需要时调用比如页面销毁时// es.close();3. 服务器端要求关键考点SSE 能正常工作服务器响应必须满足两个核心要求正确设置响应头 规范的数据格式缺一不可。1必须设置的响应头Content-Type: text/event-stream // 告诉浏览器这是 SSE 流数据 Cache-Control: no-cache // 禁止缓存避免浏览器缓存旧消息 Connection: keep-alive // 保持 HTTP 长连接避免连接被断开2规范的数据格式数据必须以\n\n结尾表示一条消息结束支持三种核心字段可组合使用// 1. 普通消息仅含数据触发前端 onmessage data: 这是一条普通消息\n\n // 2. 带自定义事件名触发前端对应 addEventListener 监听的事件 event: userUpdate // 事件名与前端监听的一致 data: {id:1,name:张三}\n\n // 数据建议用 JSON 字符串 // 3. 带消息 ID用于断线续连重连时浏览器会发送 Last-Event-ID 头 id: 1001 // 消息唯一 ID data: 带 ID 的消息内容\n\n4. 适用场景区分记忆避免混淆实时通知类系统公告、用户消息提醒、订单状态通知只需要服务器推客户端不用回。数据刷新类股票/基金行情、实时监控数据如服务器负载、设备状态、日志流展示。进度展示类文件上传/下载进度、任务执行进度服务器实时推送进度百分比。简单聊天场景仅需要服务器转发消息如广播消息无需客户端主动发消息的场景。5. EventSource vs WebSocket vs 轮询面试高频对比特性EventSource (SSE)WebSocket轮询 (Polling)通信方向单向服务→客双向客↔服客户端主动拉取客→服→客底层协议标准 HTTP 协议独立 WebSocket 协议握手用 HTTP标准 HTTP 协议重连机制浏览器自动重连需手动实现重连逻辑无内置重连靠定时发送请求模拟开发复杂度低原生 API无需额外依赖中需处理双向通信、重连、心跳低简单请求响应但低效延迟低服务器实时推送极低长连接双向实时传输高取决于定时间隔如10秒轮询则延迟最高10秒适用场景简单单向实时推送高频双向交互实时性要求低、简单场景一句话记忆必背需要简单单向实时推送 → 用 EventSource需要全双工、高频交互 → 用 WebSocket实时性要求低、开发最简单 → 用轮询不推荐。6. EventSource 面试常考问题直接背诵答案问题1EventSource 是什么和 WebSocket 的核心区别是什么答EventSource 是浏览器原生 API基于 HTTP 长连接实现服务器到客户端的单向实时推送SSE核心区别是通信方向SSE 单向WebSocket 双向和协议SSE 基于 HTTPWebSocket 是独立协议。问题2EventSource 服务器端需要满足什么要求答一是设置3个核心响应头Content-Type: text/event-stream、Cache-Control: no-cache、Connection: keep-alive二是数据格式必须以 \n\n 结尾支持 data、event、id 三个字段。问题3EventSource 为什么能自动重连断线续连是怎么实现的答浏览器原生内置自动重连机制网络断开后会定期重试断线续连靠消息 IDid 字段重连时浏览器会发送 Last-Event-ID 请求头服务器根据该 ID 推送未接收的消息避免漏收。问题4EventSource 的适用场景有哪些举2个例子。答适合单向实时推送场景比如系统公告推送、股票行情刷新、任务进度展示例子1. 网站实时公告弹窗2. 后台任务执行进度实时展示。二、WebSocket面试重点通俗理解相当于客户端和服务器之间架了一条“双向通话线路”一旦接通双方都能随时说话、听对方说话不用反复拨号不像 HTTP 每次请求都要建立连接适合实时互动场景。专业定义WebSocket 是一种在单个 TCP 连接上进行全双工、长连接的网络协议允许客户端和服务器之间实时双向通信建立连接后可持续收发数据无需频繁创建 HTTP 请求解决了 HTTP 无法主动推送、轮询低效的问题。1. 核心特点必背全双工通信客户端和服务器双向通信双方都能随时主动发送消息比如聊天时你发消息给服务器服务器也能主动推别人的消息给你。长连接一次握手成功后TCP 连接持续保持直到客户端或服务器主动关闭无需每次通信都建立新连接减少开销。轻量高效数据传输的帧头非常小远小于 HTTP 请求头传输效率高适合高频实时数据交互。协议兼容基于 TCP 协议端口通常使用 80ws/443wss兼容大部分防火墙不易被拦截。协议升级不属于 HTTP 协议但握手阶段依赖 HTTP 协议完成“升级”握手成功后不再使用 HTTP 协议。2. 建立过程关键考点必背WebSocket 建立连接分为“握手阶段”和“通信阶段”核心是握手时完成 HTTP 协议升级步骤如下客户端发起 HTTP 请求携带“协议升级”相关请求头告知服务器要升级为 WebSocket 协议Connection: Upgrade // 表示要升级协议 Upgrade: websocket // 要升级的目标协议是 WebSocket Sec-WebSocket-Key: xxxxxxxx // 随机字符串用于服务器校验 Sec-WebSocket-Version: 13 // WebSocket 版本固定为13服务器接收请求后校验 Sec-WebSocket-Key确认可以升级协议返回 101 状态码Switching Protocols完成握手HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: websocket Sec-WebSocket-Accept: xxxxxxxx // 服务器对 Sec-WebSocket-Key 加密后的结果握手成功后HTTP 协议正式升级为 WebSocket 协议后续双方通过 WebSocket 数据帧进行双向通信不再使用 HTTP 协议。3. 前端基本使用可直接默写// 1. 创建 WebSocket 连接ws 是普通连接wss 是加密连接类似 http/httpsconstwsnewWebSocket(ws://localhost:8080);// 2. 连接成功握手完成后触发ws.onopen(){console.log(WebSocket 连接成功);// 连接成功后客户端可主动发送消息ws.send(hello server我是客户端);// 发送的是字符串复杂数据需转 JSON};// 3. 接收服务器发送的消息ws.onmessage(e){// e.data 是服务器发送的内容可根据需求解析 JSONconsole.log(收到服务器消息:,e.data);};// 4. 连接错误如服务器异常、网络断开ws.onerror(err){console.error(WebSocket 连接出错:,err);};// 5. 连接关闭客户端或服务器主动关闭ws.onclose(event){console.log(WebSocket 连接关闭,event.code,event.reason);// 可在这里实现手动重连逻辑};// 补充主动关闭连接// ws.close();4. 核心区别面试高频对比记忆1WebSocket vs HTTPHTTP短连接、单向通信、无状态每次通信都要建立 TCP 连接客户端发起请求后服务器才会响应无法主动推送。WebSocket长连接、双向通信、有状态一次握手后持续连接双方可随时主动发送消息无需频繁建连。2WebSocket vs EventSourceSSEEventSource单向通信服务→客、基于 HTTP、自动重连轻量简单适合简单推送场景。WebSocket双向全双工、独立协议、需手动重连功能更强适合高频交互场景开发复杂度稍高。5. 适用场景精准记忆避免混淆实时交互类在线聊天、弹幕、直播互动如点赞、评论实时展示。高频数据类在线游戏玩家操作实时同步、股票行情实时刷新、实时监控大屏。协作编辑类多人在线文档协作如腾讯文档、实时白板。6. 补充细节面试加分点WebSocket 数据传输格式分为文本帧和二进制帧可传输字符串、JSON、图片等数据。心跳机制由于网络波动长连接可能被网关断开通常需要手动实现心跳客户端定期发送空消息服务器回应维持连接。加密连接wss 是 WebSocket 的加密版本基于 TLS/SSL 加密和 https 类似更安全生产环境推荐使用。7. 一句话总结必背WebSocket 是一种双向实时长连接协议基于 TCP 实现通过 HTTP 握手升级协议解决了 HTTP 无法主动推送、轮询低效的问题适合高实时性交互场景。8. WebSocket 面试常考问题直接背诵答案问题1WebSocket 是什么核心特点有哪些答WebSocket 是基于 TCP 的全双工长连接网络协议允许客户端和服务器实时双向通信核心特点是全双工、长连接、轻量高效、基于 HTTP 握手升级、兼容防火墙。问题2WebSocket 的建立过程是什么关键请求头和响应头有哪些答建立过程分3步1. 客户端发 HTTP 请求携带 Connection: Upgrade、Upgrade: websocket、Sec-WebSocket-Key 等头2. 服务器返回 101 状态码携带 Sec-WebSocket-Accept 头完成协议升级3. 升级为 WebSocket 协议开始双向通信。问题3WebSocket 和 HTTP、EventSource 的核心区别是什么答和 HTTP 比WebSocket 是长连接、双向通信HTTP 是短连接、单向请求响应和 EventSource 比WebSocket 是双向全双工需手动重连EventSource 是单向推送自动重连基于 HTTP。问题4WebSocket 为什么需要心跳机制如何实现答因为网络波动、网关超时等原因长连接可能被断开心跳机制用于维持连接实现方式客户端定期如30秒发送空消息或特定心跳消息服务器收到后回应若客户端长时间未收到回应则触发重连。问题5ws 和 wss 的区别是什么生产环境为什么推荐用 wss答ws 是 WebSocket 普通连接明文传输wss 是加密连接基于 TLS/SSL 加密数据传输更安全生产环境用 wss 可避免数据被窃听、篡改符合安全规范。三、HTTP超文本传输协议基础必背通俗理解相当于互联网的“通信规则”客户端比如浏览器和服务器之间要传输数据必须遵守这个规则本质是“一问一答”——客户端问请求服务器答响应是互联网最基础的通信协议。专业定义HTTPHyperText Transfer Protocol超文本传输协议是一种基于请求-响应模型、无状态的应用层协议用于客户端和服务器之间传输超文本HTML、JSON、图片等是互联网数据传输的基础。1. 核心特点必背基于请求-响应模型严格遵循“客户端发起请求 → 服务器处理请求 → 服务器返回响应”的流程一问一答没有请求就没有响应。无状态Stateless服务器不记住任何客户端的上下文信息每次请求都是独立的服务器无法通过前一次请求判断当前请求的客户端身份需要维持状态如登录状态需借助 Cookie、Session、Token 等机制。明文传输HTTP 传输的内容不加密数据在传输过程中可能被窃听、篡改安全性低因此有了 HTTPSHTTP TLS/SSL 加密。可扩展性强支持自定义请求头/响应头、扩展请求方法、扩展状态码能适应不同的业务场景如跨域预检、缓存控制。基于 TCP 可靠传输底层默认使用 TCP 协议保证数据能可靠到达TCP 有重传、校验机制但也因此存在建立连接的延迟三次握手。2. 请求结构必背面试常考一次 HTTP 请求由「请求行、请求头、空行、请求体」四部分组成缺一不可结构如下请求行Request Line核心部分包含请求方法、请求 URL、HTTP 协议版本格式请求方法 空格 URL 空格 协议版本 换行GET /api/user HTTP/1.1 // 示例GET 方法请求地址 /api/user协议版本 1.1请求头Request Headers用于传递客户端信息、请求参数等键值对形式常见字段Host请求的服务器域名如 www.baidu.com。User-Agent客户端信息如浏览器版本、设备型号。Content-Type请求体的数据格式如 application/json、multipart/form-data。Cookie携带客户端的 Cookie 信息用于维持登录状态。Authorization身份验证信息如 Token、Basic 认证。空行用于分隔请求头和请求体必须存在即使没有请求体告诉服务器请求头已结束。请求体Request Body可选用于携带客户端提交的数据如 POST 请求的表单数据、JSON 数据GET 方法通常没有请求体参数放在 URL 中POST、PUT、PATCH 等方法常用请求体。3. 常用请求方法必背区分含义和使用场景请求方法核心含义关键特点使用场景GET获取服务器资源参数在 URL 中可缓存幂等多次请求结果一致查询数据如查询用户信息、商品列表POST向服务器提交数据参数在请求体不可缓存非幂等提交表单、创建资源如注册、新增订单PUT更新服务器资源完整覆盖参数在请求体幂等完整更新资源如修改用户所有信息PATCH更新服务器资源部分更新参数在请求体幂等部分更新资源如只修改用户手机号DELETE删除服务器资源幂等删除资源如删除订单、删除用户HEAD获取响应头不获取响应体和 GET 类似仅返回头部检查资源是否存在、获取资源缓存信息OPTIONS预检请求获取服务器支持的方法跨域场景下自动触发跨域请求前验证服务器是否允许当前请求补充幂等性多次执行同一请求结果一致不会因为多次请求导致资源状态变化GET、PUT、DELETE、PATCH 是幂等的POST 是非幂等的。4. 响应结构必背和请求结构对应一次 HTTP 响应由「状态行、响应头、空行、响应体」四部分组成结构如下状态行Status Line包含 HTTP 协议版本、状态码、状态描述格式协议版本 空格 状态码 空格 状态描述 换行HTTP/1.1 200 OK // 示例协议 1.1状态码 200描述 OK成功响应头Response Headers传递服务器信息、响应参数等常见字段Content-Type响应体的数据格式如 application/json、text/html。Set-Cookie服务器向客户端设置 Cookie。Cache-Control缓存控制策略如 no-cache、max-age3600。Location重定向地址配合 3xx 状态码使用。空行分隔响应头和响应体必须存在。响应体Response Body服务器返回给客户端的具体数据可能是 HTML、JSON、图片、视频等。5. 常见状态码必背按类别记忆状态码分为5大类每类有核心常用码记住类别含义常用码即可无需记所有码1xx信息类表示服务器已接收请求正在继续处理很少用到。100 Continue服务器已接收请求头客户端可继续发送请求体。2xx成功类请求成功被服务器处理。200 OK请求成功最常用。201 Created资源创建成功如 POST 新增用户、订单。204 No Content请求成功但无响应体如 DELETE 删除成功。3xx重定向类请求需要客户端进一步操作跳转。301 永久重定向请求的资源已永久迁移到新地址后续请求需用新地址如域名更换。302 临时重定向请求的资源临时迁移后续请求仍可用原地址如登录后跳转。304 Not Modified协商缓存命中服务器无需返回资源客户端直接用本地缓存。4xx客户端错误类请求有问题服务器无法处理客户端责任。400 Bad Request请求参数错误如格式错误、缺少必填参数。401 Unauthorized未登录需要身份验证如未传 Token。403 Forbidden已登录但无权限访问如普通用户访问管理员接口。404 Not Found请求的资源不存在如 URL 写错。405 Method Not Allowed请求方法不被允许如用 GET 访问需要 POST 的接口。429 Too Many Requests请求过于频繁限流。5xx服务端错误类服务器处理请求时出错服务器责任。500 Internal Server Error服务器内部错误最常见如代码报错。502 Bad Gateway网关错误如服务器依赖的服务不可用。503 Service Unavailable服务不可用如服务器过载、维护。504 Gateway Timeout网关超时服务器依赖的服务响应太慢。6. HTTP 版本演进必背核心差异HTTP 经历了多个版本核心演进方向是“提升性能、降低延迟、增强安全性”重点记 1.0、1.1、2、3 四个版本HTTP/1.0早期版本一次请求一个 TCP 连接用完就断开短连接。串行请求一个请求完成后才能发起下一个请求效率极低。HTTP/1.1目前最常用支持长连接Keep-Alive一个 TCP 连接可发送多个 HTTP 请求减少建连开销。存在队头阻塞Head-of-line Blocking同一 TCP 连接中一个请求卡住后面所有请求都要等待。支持管道化、分块传输编码优化传输效率。HTTP/2性能优化版二进制分帧将请求/响应拆分为二进制帧传输更高效。多路复用一个 TCP 连接可并行处理多个请求彻底解决队头阻塞。头部压缩HPACK压缩请求头/响应头减少传输体积。服务器推送Server Push服务器可主动向客户端推送资源如 HTML 所需的 CSS、JS。HTTP/3最新版本底层改用QUIC 协议 UDP不再依赖 TCP。彻底解决队头阻塞UDP 无连接帧独立传输。连接迁移更稳定如手机切换网络无需重新建立连接传输速度更快、更可靠。7. 核心区别面试高频HTTP vs HTTPSHTTP 是明文传输不安全HTTPS 是 HTTP TLS/SSL 加密数据传输安全端口用 443HTTP 用 80。HTTP vs WebSocketHTTP 是请求响应式、短连接、单向WebSocket 是长连接、双向全双工基于 HTTP 握手升级协议。HTTP vs EventSourceSSEHTTP 是单向请求响应无法主动推送SSE 是基于 HTTP 长连接服务器单向推送自动重连。8. 一句话总结必背面试直接用HTTP 是基于 TCP 的请求响应式无状态应用层协议负责客户端与服务器的数据传输通过请求方法、URL、头部、状态码完成通信HTTP/1.1 支持长连接但有队头阻塞HTTP/2 用多路复用优化性能HTTP/3 改用 QUIC 协议进一步提升效率。9. HTTP 面试常考问题直接背诵答案问题1HTTP 是什么核心特点有哪些答HTTP 是基于 TCP 的请求响应式无状态应用层协议用于客户端和服务器传输数据核心特点是请求响应模型、无状态、明文传输、可扩展、基于 TCP 可靠传输。问题2HTTP 请求和响应的结构分别是什么答请求结构请求行 请求头 空行 请求体响应结构状态行 响应头 空行 响应体。问题3GET 和 POST 的核心区别是什么至少3点答1. 用途GET 用于获取资源POST 用于提交资源2. 参数位置GET 参数在 URLPOST 参数在请求体3. 缓存GET 可缓存POST 不可缓存4. 幂等性GET 幂等POST 非幂等5. 安全性GET 明文传输参数暴露POST 相对安全参数在请求体。问题4常见的 HTTP 状态码分类及常用码有哪些答分5类1xx 信息类100、2xx 成功类200、201、204、3xx 重定向类301、302、304、4xx 客户端错误400、401、403、404、429、5xx 服务端错误500、502、503、504。问题5HTTP/1.1 和 HTTP/2 的核心差异是什么答1. 传输方式HTTP/1.1 是文本传输HTTP/2 是二进制分帧2. 队头阻塞HTTP/1.1 有队头阻塞HTTP/2 多路复用解决队头阻塞3. 头部压缩HTTP/2 支持 HPACK 头部压缩HTTP/1.1 不支持4. 服务器推送HTTP/2 支持HTTP/1.1 不支持。问题6HTTP 为什么是无状态的如何解决无状态的问题答无状态是因为服务器不记住客户端的上下文信息每次请求都是独立的解决方式使用 Cookie、Session、Token 等机制存储客户端状态信息如登录状态。问题7HTTP 和 HTTPS 的区别是什么HTTPS 的加密原理是什么答区别HTTP 明文传输、不安全、端口80HTTPS 加密传输、安全、端口443基于 HTTP TLS/SSL。加密原理采用对称加密传输数据 非对称加密交换对称密钥 数字证书验证服务器身份保证数据机密性、完整性、真实性。面试复习提示重点背诵「核心特点、一句话总结、面试常考问题」代码示例可默写核心片段对比类知识点如三者对比、版本对比重点记差异点确保面试时能快速应答、不混淆。