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

吉檀迦俐

于 2025-06-23 16:48:13 发布

阅读量1.4k

点赞数 49

CC 4.0 BY-SA版权

分类专栏：前端干货文章标签： websocket 网络协议网络 ecmascript javascript 前端开发语言

本文链接：https://blog.csdn.net/Miller777_/article/details/148849068

前端干货专栏收录该内容

7 篇文章

订阅专栏

📌 作者：彭麒
📅 更新日期：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？

特性	WebSocket	socket.io
传输方式	仅支持 WebSocket	支持 WS + fallback
重连机制	手动实现	自动重连
命名空间	手动区分	内置支持
二进制支持	需封装	内置支持

🔌 安装依赖

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");

✅ 总结

内容	作用	实用性
✅ 心跳机制 + 断线重连	保持连接可靠性	⭐⭐⭐⭐
✅ socket.io	快速构建复杂通信	⭐⭐⭐⭐⭐
✅ 鉴权机制	防止非法连接	⭐⭐⭐⭐
✅ WSS 加密	提升通信安全	⭐⭐⭐⭐⭐