WebSocket 进阶全攻略：心跳机制、断线重连、socket.io、鉴权与WSS配置

📌 作者：彭麒
📅 更新日期：2025年6月
🧠 适合读者：具备 WebSocket 基础，想深入掌握实战技巧的前端 & 全栈开发者

🧱 前言

WebSocket 是实现前后端 双向通信 的重要技术，适用于 IM 聊天、通知推送、实时图表等高频交互场景。

本文将深入讲解 WebSocket 的 4 个进阶实战内容：

• 心跳机制 + 断线重连

• 使用 socket.io 快速构建服务

• 客户端鉴权机制

• WSS 加密通信配置（生产部署必看）

🧭 一、心跳机制 + 断线重连

❓ 为什么需要？

• 连接看似存在但实际断开（如客户端休眠）

• 中间代理或路由超时断开连接

• 保持服务端感知客户端状态，避免僵尸连接

✅ 实现步骤（Vue Composition 示例）

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    let socket: WebSocket | null = null;
    let heartbeatTimer: any = null;
    let reconnectTimer: any = null;

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

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

      socket.onmessage = (e) => {
        if (e.data === 'pong') console.log("心跳回应正常");
      };

      socket.onerror = reconnect;
      socket.onclose = reconnect;
    };

    const startHeartbeat = () => {
      clearInterval(heartbeatTimer);
      heartbeatTimer = setInterval(() => {
        socket?.send('ping');
      }, 10000);
    };

    const reconnect = () => {
      clearTimeout(reconnectTimer);
      reconnectTimer = setTimeout(() => {
        connect();
      }, 3000);
    };

    onMounted(connect);
    onBeforeUnmount(() => {
      clearInterval(heartbeatTimer);
      socket?.close();
    });
  }
};

📝 Tips：可以搭配服务器的 ping/pong 机制验证连接活跃性。

⚡ 二、使用 socket.io 快速构建通信系统

🔧 为什么用 socket.io？

🔌 安装依赖

npm install socket.io socket.io-client

💻 服务端（Node.js 示例）

const http = require('http');
const { Server } = require("socket.io");

const server = http.createServer();
const io = new Server(server, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  socket.on("chat", (msg) => {
    io.emit("chat", msg);
  });
});

server.listen(3000);

📱 客户端（Vue 示例）

import { io } from "socket.io-client";

const socket = io("http://localhost:3000");

socket.emit("chat", "你好 socket.io");

socket.on("chat", (msg) => {
  console.log("收到聊天：", msg);
});

🔐 三、WebSocket 鉴权机制（防止恶意连接）

WebSocket 原生不支持 header 或 cookie，常见做法是：

✅ 连接时带上 Token 参数

const token = localStorage.getItem('token');
const socket = new WebSocket(`ws://localhost:8080?token=${token}`);

✅ 服务端校验（Node 示例）

wss.on("connection", (ws, req) => {
  const params = new URLSearchParams(req.url.split("?")[1]);
  const token = params.get("token");

  if (!verifyToken(token)) {
    ws.close(); // 关闭非法连接
    return;
  }

  ws.on("message", (message) => {
    // 正常通信
  });
});

🔐 扩展：也可以通过 socket.io 的 auth 字段发送 token 更安全。

🌐 四、WSS 加密通信（生产部署必备）

⚠️ 为什么用 WSS？

• WS 是明文通信，敏感信息容易被窃听

• Chrome/Firefox 等现代浏览器在 HTTPS 页面禁止非 WSS 通信

🔧 Node.js WSS 服务器配置示例

const fs = require("fs");
const https = require("https");
const WebSocket = require("ws");

const server = https.createServer({
  key: fs.readFileSync("key.pem"),
  cert: fs.readFileSync("cert.pem"),
});

const wss = new WebSocket.Server({ server });

wss.on("connection", (ws) => {
  ws.send("你已通过 WSS 安全连接");
});

server.listen(443);

📲 客户端连接方式

const socket = new WebSocket("wss://yourdomain.com");

✅ 总结

📚 推荐资源

• 📖 MDN WebSocket 文档

• 📖 socket.io 官网

• 📖 RFC 6455 - WebSocket 协议标准

💬 最后

如果你也在做 WebSocket 实时系统，欢迎留言交流！

📌 如果你觉得本文对你有帮助，请一键三连：点赞👍 + 收藏⭐ + 关注我✅，持续输出高质量前端技术博文！

📫 有任何问题，欢迎通过评论区或私信我交流！