WebSocket 技术详解（原理 + 使用 + 面试总结）

随着 Web 应用的发展，很多场景都需要 实时通信，例如：

• 在线聊天系统

• 实时通知

• 在线游戏

• 股票行情

• 协同编辑

传统 HTTP 协议很难满足这些需求，因此 WebSocket 技术应运而生。

---

一、什么是 WebSocket

WebSocket 是 HTML5 提供的一种 网络通信协议 ，用于 浏览器和服务器之间建立持久连接并进行双向通信。

简单理解：

WebSocket 是一种可以让浏览器和服务器进行 实时双向通信的协议。

WebSocket 的特点：

• 全双工通信（双方可以同时发送数据）

• 长连接

• 低延迟

• 服务器可以主动推送消息

---

二、为什么需要 WebSocket

传统 Web 通信使用 HTTP 协议。

HTTP 的通信模式：

客户端 → 请求 → 服务器
服务器 → 响应 → 客户端

特点：

• 必须由客户端发起请求

• 服务器无法主动推送消息

如果需要实时通信，只能使用以下方案：

1 轮询（Polling）

客户端不断请求服务器

客户端 → 请求
服务器 → 返回数据
客户端 → 再次请求

缺点：

• 请求次数多

• 浪费带宽

• 服务器压力大

---

2 长轮询（Long Polling）

客户端请求后服务器等待数据再返回。

缺点：

• 仍然是 HTTP

• 连接效率不高

---

因此出现了 WebSocket 技术。

---

三、WebSocket 工作原理

WebSocket 的连接建立分为两个阶段：

第一阶段：HTTP 握手

WebSocket 连接 最开始是 HTTP 请求。

客户端发送请求：

GET /chat HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xxxxx

关键字段：

Upgrade: websocket
Connection: Upgrade

表示：

请求升级为 WebSocket 协议。

---

服务器返回：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

返回 101 状态码 表示协议升级成功。

---

第二阶段：建立 WebSocket 连接

握手完成后：

• HTTP 协议结束

• 使用 WebSocket Frame 数据帧通信

通信模式变成：

客户端 ⇄ 服务器

双方可以 随时发送数据。

---

四、WebSocket 通信结构

通信模型：

客户端（Browser）
        │
        │ WebSocket
        │
服务器（Server）

数据传输单位：

Frame（数据帧）

WebSocket 传输的是：

• 文本数据

• 二进制数据

---

五、WebSocket 与 HTTP 区别

对比	HTTP	WebSocket
通信方式	请求-响应	双向通信
连接方式	短连接	长连接
数据推送	不支持	支持
实时性	低	高
开销	请求头大	数据帧小

总结：

WebSocket 更适合 实时通信场景。

---

六、WebSocket 应用场景

常见应用：

1 在线聊天系统

例如：

• 微信 Web

• Slack

• 企业聊天系统

服务器可以实时推送消息。

---

2 实时通知

例如：

• 系统消息

• 订单状态

• 弹窗通知

---

3 股票行情

股票价格需要 实时刷新。

---

4 在线游戏

游戏数据需要实时同步。

---

5 协同编辑

例如：

• 在线文档

• 多人协作编辑

---

七、Java WebSocket 实现（SpringBoot）

在 Java 中可以使用 SpringBoot WebSocket 实现。

首先添加依赖：

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

---

创建 WebSocket 服务器

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")
public class WebSocketServer {

    @OnOpen
    public void onOpen(Session session){
        System.out.println("连接成功");
    }

    @OnMessage
    public void onMessage(String message){
        System.out.println("收到消息：" + message);
    }

    @OnClose
    public void onClose(){
        System.out.println("连接关闭");
    }
}

---

前端连接 WebSocket

let socket = new WebSocket("ws://localhost:8080/websocket");

socket.onopen = function(){
    console.log("连接成功");
}

socket.onmessage = function(event){
    console.log("收到消息：" + event.data);
}

socket.send("hello websocket");

---

八、WebSocket 优点

优点：

1. 支持全双工通信

2. 服务器可以主动推送

3. 减少 HTTP 请求

4. 网络开销小

5. 实时性高

---

九、WebSocket 缺点

缺点：

1. 服务器连接数压力大

2. 需要处理连接管理

3. 断线重连需要自己实现

---

十、WebSocket 面试高频问题

1 WebSocket 和 HTTP 区别？

回答：

HTTP 是请求-响应模式，服务器不能主动推送数据，而 WebSocket 是一种全双工通信协议，可以建立长连接，服务器和客户端都可以主动发送数据，适合实时通信场景。

---

2 WebSocket 建立连接过程？

答案：

1. 客户端通过 HTTP 请求发起握手

2. 请求头包含 Upgrade: websocket

3. 服务器返回 101 状态码

4. 协议升级成功

5. 建立 WebSocket 连接

---

3 WebSocket 是基于什么协议？

答案：

WebSocket 基于 TCP 协议。