WebSocket 深入解析：从基础原理到前端后端全栈实战

WebSocket 深入解析：从基础原理到前端后端全栈实战

前言

在现代 Web 应用中，实时通信 已成为一个重要需求，例如在线聊天、股票行情推送、游戏对战、协同编辑等场景。传统的 HTTP 由于请求-响应模型的限制，难以满足高效的双向通信需求。

WebSocket 作为 HTML5 引入的一种全双工通信协议，可以在客户端和服务器之间建立持久连接，实现高效、低延迟的数据传输。
本篇文章将深入剖析 WebSocket 的 原理、协议、前端实现（Vue/React）、后端实现（Node.js/Java），并探讨优化与最佳实践。

---

一、WebSocket 基础原理

1.1 什么是 WebSocket？

WebSocket 是基于 TCP 的全双工通信协议，允许客户端和服务器之间建立持久化的连接，无需像 HTTP 那样每次都要建立新的连接。

1.2 WebSocket vs. HTTP

对比项	WebSocket	HTTP
连接方式	持久连接（长连接）	每次请求建立新连接
数据传输	双向通信（全双工）	单向通信（客户端请求，服务器响应）
延迟	低延迟，实时推送	高延迟，需要轮询
适用场景	实时聊天、推送、协同编辑	普通网页请求、API 交互

1.3 WebSocket 工作流程

1. 客户端向服务器发起 WebSocket 握手（升级 HTTP 连接）。
2. 服务器接受请求并返回 101 状态码，表示协议切换成功。
3. 连接建立后，双方可以随时发送和接收数据。
4. 任意一方可以主动关闭连接。

---

二、WebSocket 前端实现（Vue / React）

2.1 在浏览器中使用 WebSocket

浏览器提供了 WebSocket API，可直接在前端创建 WebSocket 连接：

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

socket.onopen = () => {
   
  console.log("WebSocket 连接已建立");
  socket.send("Hello, Server!");
};

socket.onmessage = event => {
   
  console.log("收到消息:", event.data);
};

socket.onclose = () => {
   
  console.log("WebSocket 连接已关闭");
};

socket.onerror = error => {
   
  console.error("WebSocket 错误:", error);
};

---

2.2 Vue3 中使用 WebSocket

在 Vue3 项目中，我们可以封装一个 WebSocket 连接管理器。

（1）封装 WebSocket 连接

新建 src/utils/websocket.js：

export class WebSocketClient {
   
  constructor(url) {
   
    this.url = url;
    this.socket = null;
  }

  connect() {
   
    if (!this.socket || this.socket.readyState === WebSocket.CLOSED) {
   
      this.socket = new WebSocket(this.url);

      this.socket.onopen = () => console.log