WebSocket：让服务器学会“主动搭讪”的黑科技

WebSocket：让服务器学会"主动搭讪"的黑科技 📞

各位被HTTP轮询折磨得掉光的头发，大家好！👋

今天咱们聊聊WebSocket。在讲它之前，先回忆一下咱们用了几十年的HTTP协议。

HTTP有个臭毛病：特别害羞，而且是个"钢铁直男" 。每次通信都得客户端先开口（"哥，有数据没？"），服务器才能回答（"没有。"或者"有，给你。"）。服务器是绝对不会主动给客户端发消息的。🙅♂️

这就导致了一个尴尬的局面：你在微信上给女神发了"在吗"，还得不停地问"回了吗回了吗"，才能知道她到底有没有理你。

这种不停问的操作，在代码里叫轮询（Polling） 。它不仅笨，还特别费流量和连接资源。于是，WebSocket​ 横空出世了！它就像是给服务器装了个电话📞，接通后（建立连接），两边都能随时说话，不用每次都拨号。

---

一、WebSocket是啥？就是个"长通话" ☎️

WebSocket是一种全双工通信协议 。听起来高大上？其实就是：一次握手，持久连接，双向随意发消息。

生活化比喻：

• HTTP： 像寄信。每次写信（请求）都要写地址贴邮票，邮局（网络）送过去，对方回信你还得等。烦死了。
• WebSocket： 像打电话。拨通（Handshake）后，链路一直占用着，你想说就说，女神想骂你就骂你，实时互动，丝滑顺畅。

---

二、核心原理：怎么把"寄信"变成"打电话"？ 🤔

1. 建立连接：特殊的HTTP请求

WebSocket的建立靠的是一次"升级版"的HTTP请求。客户端第一次打招呼，其实是在递"暗号"：

GET /chat HTTP/1.1
Host: localhost:8080
Upgrade: websocket          // 重点1：我要升级协议！
Connection: Upgrade         // 重点2：同意升级！
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== // 暗号
Sec-WebSocket-Version: 13

服务器一看，哟，这是想跟我搞WebSocket啊，立马回个101状态码（Switching Protocols），表示"同意转频道"。从此，TCP连接就一直开着了。

2. 数据帧（Frame）：拆碎了传

建立连接后，发的就不是HTTP报文了，而是数据帧。

为啥要用帧？因为要区分消息边界。想象一下，你一口气说了十句话，对方怎么知道哪句是开头哪句是结尾？WebSocket用FIN标志位和Opcode来标记，就像说话时的停顿和标点符号。

---

三、Spring Boot实战：三行代码搞定"热线" 🚀

光说不练假把式。在Spring Boot里玩WebSocket，简单到你怀疑人生。

1. 加依赖

首先，把WebSocket的依赖请进 pom.xml：

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

2. 写配置（开权限）

告诉Spring："我要开一个WebSocket端点，谁都能连。"

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 允许跨域，并且注册一个端点 "/ws"，前端连这个地址
        registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 开启一个简单的消息代理，前缀是 /topic（广播用）
        config.enableSimpleBroker("/topic");
        // 客户端发送消息的前缀，比如 /app/hello
        config.setApplicationDestinationPrefixes("/app");
    }
}

3. 写控制器（处理消息）

这里我们用到了 STOMP（一种简单的文本定向消息协议，相当于给裸WebSocket穿了件衣服，更好用）。

@Controller
public class ChatController {

    // 监听 /app/chat 这个地址发来的消息
    @MessageMapping("/chat")
    // 将返回值发送到 /topic/messages 这个订阅地址
    @SendTo("/topic/messages")
    public String handleChat(String message) {
        // 假装处理一下业务逻辑
        System.out.println("收到消息：" + message);
        return "服务器收到了：" + message;
    }
}

4. 前端怎么接？（JavaScript）

前端更简单，用 stomp.js 和 sockjs-client。

// 连接服务器
let socket = new SockJS('http://localhost:8080/ws');
let stompClient = Stomp.over(socket);

stompClient.connect({}, function (frame) {
    console.log('连上了! ' + frame);
    
    // 订阅一个频道（像关注了某个主播）
    stompClient.subscribe('/topic/messages', function (response) {
        alert("服务器说：" + response.body);
    });
    
    // 发送消息
    stompClient.send("/app/chat", {}, "Hello WebSocket!");
});

跑起来试试！你会发现，不用刷新页面，消息瞬间就弹出来了。这就是实时的力量！⚡️

---

四、避坑指南：那些年我们一起踩过的雷 ⚠️

WebSocket虽好，但坑也不少，提前预警：

1. 心跳检测（Heartbeat）

   连接建立后，如果长时间不发消息，中间的路由器或者Nginx可能会觉得你们聊完了，默默地把连接断了（这叫半关闭状态）。

   对策： ​ 定期发个"ping"，服务器回个"pong"。就像情侣谈恋爱，哪怕没事也要发个"在吗"证明自己还活着。💓

2. 断线重连

   网络抖动是常事。如果连接断了，前端必须得有重连机制。不然用户以为卡了，狂点按钮，后台日志直接炸裂。🔄

3. 鉴权问题

   握手阶段是HTTP，这时候可以塞Token（比如在Header里）。一旦连接成功，后续的WebSocket帧里可不好带Token。

   对策： ​ 在第一次握手的URL参数里带Token，或者在建立连接后的第一条消息里发认证信息。

4. Nginx配置

   如果你用了Nginx反向代理，一定要配置支持WebSocket，否则连接秒断。

   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";

---

五、什么时候用？什么时候不用？ 🤔

• 适合的场景：

  • 即时聊天（IM）： QQ、微信网页版。
  • 实时数据推送： 股票行情、体育赛事比分。
  • 在线协作： 腾讯文档多人编辑、画板同步。
  • 弹幕系统： B站那种满屏飞字的。

• 不适合的场景：

  • 普通的后台管理页面： 用户偶尔才点一下刷新，用WebSocket纯属杀鸡用牛刀，还浪费服务器内存（每个连接都占资源）。
  • 大数据量一次性传输： 比如下载个1G的文件，老老实实用HTTP吧，WebSocket没优势。

---

六、总结

WebSocket不是来取代HTTP的，它是HTTP的好基友，专门解决实时通信这块短板。

它让我们的程序从"请求-响应"的被动模式，进化成了"随时随地"的主动模式。如果说HTTP是发邮件，那WebSocket就是打电话。 ​ 📞

---