当前位置：首页 > news >正文

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

news 2025/6/30 10:20:20

📌 作者：彭麒
📅 更新日期：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 加密	提升通信安全	⭐⭐⭐⭐⭐