在很多开发者的认知里，Web 开发似乎总是围绕着 HTTP 请求 → 服务器响应 这套经典流程。
比如：
刷新页面获取新数据轮询接口查看是否有更新每隔几秒请求一次服务器
但问题来了——
如果你要做 聊天系统、实时股票行情、在线游戏、协同编辑、直播弹幕 呢？
难道每一秒都发一次 HTTP 请求？
服务器可能会直接“原地去世”。
于是，一个改变 Web 实时通信方式的技术诞生了：
WebSocket。
今天这篇文章，我们就从零开始，一次性把 WebSocket 讲透。
看完你将会明白：
WebSocket 为什么会出现WebSocket 和 HTTP 的区别WebSocket 的工作原理WebSocket 的实际应用场景WebSocket 在项目中的使用方式
如果你是 大三计算机学生 / 后端开发初学者 / 正在准备实习，这篇文章绝对值得收藏。
一、为什么会有 WebSocket？
在 WebSocket 出现之前，浏览器和服务器通信几乎全部依赖 HTTP 协议。
HTTP 有一个非常重要的特点：
它是“请求-响应”模型。
也就是说：
客户端必须先发起请求，服务器才能返回数据。
简单来说就是：
客户端问一句
服务器答一句
比如：
浏览器：给我用户信息
服务器：好的，这是数据
但如果服务器想主动通知客户端呢？
比如：
新消息来了股票价格变化了游戏玩家位置更新协同文档被别人修改
HTTP 就有点尴尬了。
因为：
服务器不能主动推送数据。
传统解决方案
在 WebSocket 出现之前，开发者尝试过很多“曲线救国”的方案。
1 轮询（Polling）
最简单粗暴：
每隔1秒请求一次服务器
伪代码：
setInterval(()=>{
fetch("/message")
},1000)
问题也很明显：
请求数量爆炸服务器压力巨大很多请求其实没有新数据
总结一句话：
浪费资源。
2 长轮询（Long Polling）
改进版的轮询。
流程是：
1 客户端请求服务器
2 如果没有数据，服务器先不返回
3 等到有数据再返回
然后客户端再发起下一次请求。
虽然减少了一些无效请求，但本质上还是：
HTTP 请求不断建立与关闭。
依然不优雅。
二、WebSocket 是什么？
WebSocket 是一种：
在客户端和服务器之间建立“长连接”的通信协议。
它最大的特点只有一句话：
连接建立后，双方可以随时互相发送数据。
简单理解就是：
HTTP 像 打电话
打→说→挂
而 WebSocket 像 开着语音聊天
连上以后
随时说话
不断交流
这就是所谓的：
全双工通信（Full Duplex）
也就是：
客户端可以发
服务器也可以发
双方都是主动方。
三、WebSocket 工作原理
WebSocket 的连接建立其实很有意思。
它一开始是：
HTTP 请求。
然后再“升级”为 WebSocket。
这个过程叫：
协议升级（Protocol Upgrade）
第一步：客户端发起请求
浏览器会发送一个 HTTP 请求：
GET/chatHTTP/1.1
Host:server.example.com
Upgrade:websocket
Connection:Upgrade
Sec-WebSocket-Key:abc123
Sec-WebSocket-Version:13
关键字段是：
Upgrade:websocket
意思是：
我要升级成 WebSocket。
第二步：服务器同意升级
服务器返回：
HTTP/1.1101SwitchingProtocols
Upgrade:websocket
Connection:Upgrade
看到 101 状态码说明：
升级成功。
从这一刻开始：
HTTP 结束，WebSocket 正式开始。
之后所有通信都走：
WebSocket 数据帧（Frame）。
四、WebSocket 的优势
WebSocket 能流行起来，主要因为几个关键优势。
1 真正的实时通信
服务器可以主动推送数据。
比如：
聊天消息一发出：
服务器→立即推送给所有在线用户
无需轮询。
2 减少网络开销
HTTP 请求头通常有：
几百字节
而 WebSocket 数据帧可能只有：
2~10字节
差距非常明显。
3 长连接
连接建立后不会频繁关闭。
减少：
TCP 握手HTTP 建立TLS 开销
性能大幅提升。
4 双向通信
客户端可以发：
send()
服务器也可以发：
push()
双方完全对等。
五、WebSocket 的典型应用
WebSocket 在很多系统里都是核心技术。
1 在线聊天系统
比如：
微信网页版SlackDiscord
流程：
用户A发消息
↓
服务器接收
↓
推送给用户B
整个过程几乎是实时的。
2 实时股票行情
证券软件里：
股票价格每秒变化。
如果用 HTTP：
服务器会被请求淹没。
而 WebSocket 可以：
服务器→实时推送行情
3 在线游戏
多人游戏需要实时同步：
玩家位置技能释放血量变化
这些数据都必须：
毫秒级更新。
WebSocket 是非常适合的选择。
4 协同编辑
比如：
在线文档系统。
类似：
Google Docs飞书文档
一个人修改文字：
服务器→推送给所有在线用户
大家看到的内容是同步的。
5 直播弹幕
当你在直播间发送弹幕：
服务器→推送给所有观众
这背后基本都是：
WebSocket。
六、WebSocket 简单使用
我们用一个简单例子看看。
前端 JavaScript
创建 WebSocket：
constsocket=newWebSocket("ws://localhost:8080/chat");
监听连接：
socket.onopen=function(){
console.log("连接成功");
};
发送消息：
socket.send("helloserver");
接收消息：
socket.onmessage=function(event){
console.log("收到消息:",event.data);
};
关闭连接：
socket.close();
Node.js 服务器示例
使用 ws 库：
安装：
npminstallws
代码：
constWebSocket=require('ws');
constserver=newWebSocket.Server({port:8080});
server.on('connection',function(socket){
console.log("客户端连接");
socket.on('message',function(msg){
console.log("收到消息:",msg);
socket.send("服务器收到："+msg);
});
});
运行后：
浏览器和服务器就可以实时通信。
七、WebSocket 和 HTTP 的区别
特性
HTTP
WebSocket
连接方式
短连接
长连接
通信模式
请求-响应
双向通信
服务器主动推送
不支持
支持
实时性
较差
非常好
数据开销
较大
很小
总结一句话：
HTTP 适合请求数据
WebSocket 适合实时通信
八、WebSocket 的一些注意点
虽然 WebSocket 很强，但也不是万能的。
1 连接管理
如果有 10 万用户在线：
服务器要维护：
10万条连接
这对服务器是挑战。
通常需要：
NettyNginx负载均衡分布式架构
2 心跳机制
WebSocket 连接可能断开。
所以需要：
心跳包（Heartbeat）
比如：
客户端每30秒发送ping
服务器返回pong
用来保持连接。
3 断线重连
网络波动很常见。
所以客户端通常会：
连接断开→自动重连
这是生产环境必备。
九、WebSocket 在后端技术栈中的实现
不同语言都有支持。
例如：
Java
常见方案：
Spring Boot WebSocketNetty
Python
常见库：
websocketsFastAPI WebSocket
Node.js
最常见：
ws
socket.io
其中：
Socket.IO 是 WebSocket 的增强版。
支持：
自动重连事件机制房间管理
非常适合做聊天系统。
十、总结
如果只用一句话总结 WebSocket：
它让浏览器和服务器建立了一条可以随时聊天的“专线”。
相比传统 HTTP：
WebSocket 带来了：
实时通信双向数据流更低网络开销更好的用户体验
所以在今天的 Web 世界里：
只要涉及 实时互动 的场景，
几乎都离不开 WebSocket。
比如：
聊天系统在线游戏协同编辑直播弹幕实时数据监控
如果你是准备找实习的计算机学生，建议至少：
理解 WebSocket 原理写一个简单聊天 Demo了解心跳和重连机制
这在面试中是非常加分的。
如果这篇文章对你有帮助，欢迎 点赞 + 在看 + 收藏。后面我还会继续分享WebSocket在后端中的配置与使用。
我们下篇见。
WebSocket如何实现浏览器与服务器实时通信？
摘要：在很多开发者的认知里，Web 开发似乎总是围绕着 HTTP 请求 → 服务器响应 这套经典流程。 比如： 刷新页面获取新数据轮询接口查看是否有更新每隔几秒请求一次服务器 但问题来了—— 如果你要做 聊天系统、实时股票行情、在线游戏、协同编辑