首页 游戏 软件 资讯 排行榜 专题
首页
科技数码
为什么前端项目不都采用 WebSocket?

为什么前端项目不都采用 WebSocket?

热心网友
84
转载
2025-12-15

你可能会想:微信、钉钉这些聊天软件,不也是靠类似的技术支撑的吗?它们能支撑上亿用户同时在线,那咱们的业务系统用 WebSocket,不就能统一交互方式、实时性直接拉满了?

在前端圈子里面,WebSocket一直自带 “高端感”,甚至有些中小厂在面试中会把 WebSocket 作为技术难点来问。

毕竟,WebSocket 能做到全双工通信,还能让前端和后端像打电话一样实时对话,听上去就是 HTTP 的“终极替代品”。

那问题来了:既然 WebSocket 这么强,为什么今天的 Web 应用没有全面抛弃 HTTP,只用 WebSocket?

你可能会想:微信、钉钉这些聊天软件,不也是靠类似的技术支撑的吗?它们能支撑上亿用户同时在线,那咱们的业务系统用 WebSocket,不就能统一交互方式、实时性直接拉满了?

很遗憾,事情远没有这么简单。

如果你真把所有接口都塞进 WebSocket,不仅不会变轻松,反而会掉进一个又一个大坑。

今天,我们就来拆解一下:

为什么会出现 WebSocket?WebSocket 的优势都有什么?WebSocket 的缺陷都有啥?实际开发中,WebSocket、SSE、HTTP 各自应该怎么选?

为什么会出现 WebSocket?

在 WebSocket 出现之前,前端要想实现“实时通信”,基本只能靠两种老办法:

轮询(Polling)前端每隔几秒发一次请求问:“有新数据吗?”缺点是显而易见的:浪费带宽,延迟还高。长轮询(Long Polling)前端发起请求,服务端不立刻返回,而是等到有新数据才响应。响应完了,前端再发起新的请求。延迟问题解决了一点,但依旧有大量连接在反复创建、销毁。

这两种方案其实都不好。

所以,在 2011 年,WebSocket 协议(RFC 6455)横空出世。

它的核心思想很简单:

先用一次 HTTP 握手(Upgrade),然后“升级”成一条持久化的 TCP 连接。从此以后,前后端可以像发短信一样随时互发消息,不再需要频繁建立 HTTP 请求。

这在当年绝对是革命性的体验:实时性大幅提升,同时 服务器压力也大幅度下降。

也正是因为这样,WebSocket 一度被视为 “Web 实时通信的未来”。

WebSocket 的优势都有什么?

虽然现在大家对 WebSocket 的评价趋于理性,但不得不承认,它依旧有一些“别人替代不了”的独家优势:

1. 所有消息走一条连接,时序可控

传统 HTTP 请求是一次一条通道,并行时序靠队列调度,没法保证严格的先后顺序。

而 WebSocket 不一样:所有请求、响应、通知消息都在同一条连接上传输。

这意味着你能精准掌控消息的时序:谁先谁后,完全由你决定。

2. 一次鉴权,状态长期有效

在 HTTP 世界里,每次请求都得带上 Token、Cookie 等鉴权信息,服务端要一遍遍校验。

WebSocket 则更简单:连接建立时完成一次认证,后续所有消息都基于同一个连接。换句话说,它天然就是“有状态”的通信方式,管理起来省心很多。

看起来是不是很爽?

但很遗憾,优势只有这两条。 剩下的都是问题.....

WebSocket 的缺陷都有啥

光看上面的介绍,你会感觉WebSocket真爽。

但是,如果你真的想要把 所有接口都搬到 WebSocket 上时,很快就会被教育了。

因为 WebSocket 带来的问题,往往比它解决的问题还多:

1. 认证机制不如 HTTP 简单

握手阶段可以带 Cookie 或 Token,但一旦连接建立,后续就是裸 TCP 流了。

想用 Header 做认证?不好意思,已经没有 HTTP 头了。

这就意味着你需要自己在消息体里定义认证字段,或者额外维护一套“请求上下文”。

2. 跨域风险更高

HTTP 有CORS来保护,WebSocket 默认是允许跨域的。

如果不额外校验Origin头,那么就非常容易出现数据泄露的问题。

3. 请求与响应要自己匹配

HTTP 天然是一问一答。

但是,WebSocket 没这个约束,你必须用request_id来区分不同请求的响应,不然消息一乱就麻烦大了。

4. 中间件和生态缺失

HTTP 里日志、监控、路由、缓存都有现成中间件。

但是,WebSocket 世界?几乎得自己造轮子,连调试都麻烦。

5. 部署和代理更复杂

不是所有代理、负载均衡器都默认支持 WebSocket。

配置不当的话,Upgrade头可能被吃掉,导致连接直接挂掉。

所以说,WebSocket 很酷,但坑点也很硬核。

你要是把 CRUD 接口都放进去,绝对是“自找麻烦”。

WebSocket、SSE、HTTP 各自应该怎么选

那么根据以上内容,大家应该就可以知道:WebSocket 是不可以无脑使用的。

那么具体应该怎么用呢?

1. 常规请求:老老实实用 HTTP

像用户登录、商品下单、列表查询这类标准 CRUD 操作,HTTP 永远是最优解。

2. 单向推送:优先 SSE(EventSource)

如果你的场景是服务端推消息给前端,比如:

系统通知订单进度更新股票/舆情行情

这类单向实时推送,SSE 更合适:

3. 双向交互:再考虑 WebSocket

只有在确实需要双向通信的时候,才该上 WebSocket,比如:

聊天系统在线协同编辑实时白板、游戏对战

这种场景下,客户端要告诉服务端“我订阅了哪个频道”,服务端再有针对性地推送。

给大家一个表单,来更清楚的展示 websocket、SSE、长轮询、HTTP 的使用场景:

图片图片


来源:https://www.51cto.com/article/824372.html
免责声明: 游乐网为非赢利性网站,所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系youleyoucom@outlook.com。

相关攻略

Object.seal方法锁定WebSocket状态管理对象的原子化操作指南
前端开发
Object.seal方法锁定WebSocket状态管理对象的原子化操作指南

Object seal仅能保护对象结构,禁止增删属性,但允许修改现有值。它无法实现原子化锁定或并发控制。WebSocket状态管理应关注状态合法性、时序控制和读写一致性。推荐使用类封装核心状态,通过只读访问器和受控方法管理状态流转,Object seal仅作为防止意外结构篡改的最后防线。

热心网友
05.07
WebSocket通信安全指南消息加密技术详解
网络安全
WebSocket通信安全指南消息加密技术详解

在开发实时交互应用时,WebSocket协议凭借其全双工通信与低延迟的优势,成为技术首选。然而,一旦传输内容涉及用户隐私或敏感业务数据,如何保障通信过程的安全,便成为每一位开发者必须解决的关键课题。仅仅建立连接并不足够,为每一条消息内容施加可靠的保护层,才是实现真正安全通信的核心。 那么,在实际开发

热心网友
05.06
如何利用 atob 处理 WebSocket 传输的 Base64 压缩报文并还原为文本
前端开发
如何利用 atob 处理 WebSocket 传输的 Base64 压缩报文并还原为文本

如何利用 atob 处理 WebSocket 传输的 Base64 压缩报文并还原为文本 很多开发者都踩过这个坑:直接用 atob 去解码 WebSocket 传过来的 Base64 压缩报文,结果要么报错,要么得到一堆乱码。问题出在哪?其实,atob 只能处理纯 ASCII 字符串,而经过 GZI

热心网友
04.24
如何利用“单例模式”配合闭包确保在单页应用中全局仅存在一个 WebSocket 长连接实例
前端开发
如何利用“单例模式”配合闭包确保在单页应用中全局仅存在一个 WebSocket 长连接实例

如何利用“单例模式”配合闭包确保在单页应用中全局仅存在一个 WebSocket 长连接实例 为什么不能直接 new WebSocket() 多次调用 在单页应用(SPA)开发中,如果每个页面或组件都随意调用 new WebSocket(url),会导致多个独立的物理连接同时建立。这不仅会造成服务端资

热心网友
04.23
如何利用 atob 处理 WebSocket 传输的二进制 Base64 数据并还原为高效的二进制流对象
前端开发
如何利用 atob 处理 WebSocket 传输的二进制 Base64 数据并还原为高效的二进制流对象

如何利用 atob 处理 WebSocket 传输的二进制 Base64 数据并还原为高效的二进制流对象 首先明确一个核心要点:不要期望 atob 函数可以直接处理 WebSocket 接收到的二进制 Base64 数据。它本质上是一个“字符串解码器”,仅能处理符合规范的 Base64 编码 ASC

热心网友
04.22

最新APP

宝宝过生日
宝宝过生日
应用辅助 04-07
台球世界
台球世界
体育竞技 04-07
解绳子
解绳子
休闲益智 04-07
骑兵冲突
骑兵冲突
棋牌策略 04-07
三国真龙传
三国真龙传
角色扮演 04-07

热门推荐

微星PRO MAX系列ATX 3.1白金全模组电源上市 579元起售
科技数码
微星PRO MAX系列ATX 3.1白金全模组电源上市 579元起售

微星PRO MAX系列ATX 3 1全模组电源现已于京东平台全面上市。该系列精心规划了850W、1000W与1200W三档功率规格,全线产品均严格通过80PLUS白金能效认证,为用户带来高效节能的供电体验。首发期间,850W版本售价579元,1000W版本679元,1200W版本799元,参与晒单活

热心网友
05.18
光帆科技发布首款带摄像头AI耳机5月15日正式上市
科技数码
光帆科技发布首款带摄像头AI耳机5月15日正式上市

行业首款集成视觉能力的AI智能耳机即将面世。光帆科技近日正式宣布,其创新产品“光帆全感AI耳机”定于5月15日全面发售。这款耳机以“全感知、主动式、个性化”为核心定位,旨在彻底革新用户与可穿戴音频设备之间的交互模式。 本质上,它颠覆了传统耳机的被动响应模式。根据官方介绍,这款AI耳机能够主动感知并理

热心网友
05.18
币安止损设置技巧与参考指标全解析
web3.0
币安止损设置技巧与参考指标全解析

止损是交易中控制风险的关键手段,在币安等交易平台设置止损时,主要参考市场波动率、技术分析关键位以及个人风险承受能力。合理的止损应基于对价格走势的客观判断,而非情绪化决策,同时需结合仓位管理,避免因单次止损过大而影响整体资金安全。动态调整止损位以适应市场变化,是提升交易纪律性的重要环节。

热心网友
05.18
Agent时代HTML逆袭 Markdown为何不再受宠
科技数码
Agent时代HTML逆袭 Markdown为何不再受宠

过去两年,要问大模型最习惯用什么格式交付内容,答案多半是Markdown。 原因不难理解:Markdown足够干净,没有冗余格式,复制到文档、知识库、GitHub,甚至直接粘贴到微信公众号后台,基本都不会出问题。某种程度上,它已经被公认为AI时代最理想的标记语言。 不过,随着Agent时代的到来,M

热心网友
05.18
iPhone 18 Pro七大升级曝光 小岛设计续航突破
科技数码
iPhone 18 Pro七大升级曝光 小岛设计续航突破

距离2026-2027年度旗舰手机的大幕拉开,大约还有四个月时间。按照惯例,届时在全球舞台上率先亮相的主流旗舰,很可能依然是苹果的iPhone 18 Pro系列。 就在昨天(5月8日),知名爆料人Jon Prosser发布了iPhone 18 Pro Max的视频渲染图,与此同时,关于该系列手机的七

热心网友
05.18