JavaScript WebSocket 实时通信：原理、实现与安全策略

作者：白帽猫

时间：2026-10-31

本文详解 JavaScript 中 WebSocket 的实现原理，涵盖与 HTTP 的握手过程、连接建立与数据传输代码示例。重点解析心跳机制以维持连接活性，并介绍 WSS 加密及 CORS 跨域策略，同时列举 Socket.IO 等常用第三方库，助力构建高实时性 Web 应用。

文章目录

WebSocket 技术概览

WebSocket 是一种网络通信协议，它允许客户端和服务器之间进行实时、双向的通信。与传统的 HTTP 协议相比，WebSocket 具有以下优势：

实时性：支持即时通信，无需轮询或长轮询。
低延迟：由于维持持久连接，减少了连接建立和关闭的开销。
省带宽：较小的协议开销，减少了不必要的数据传输。
跨域通信：支持跨域通信，无需担心同源策略限制。

WebSocket 与 HTTP 的握手过程

WebSocket 通过一个 HTTP 请求开始握手过程，该请求包含特定的头部字段，表明客户端希望升级到 WebSocket 协议。服务器响应确认升级，一旦握手成功，双方即可通过 WebSocket 协议进行通信。

WebSocket 实战：建立连接与数据传输

以下是一个使用 JavaScript 建立 WebSocket 连接并进行数据传输的实战示例：

// 建立WebSocket连接
var ws = new WebSocket('wss://example.com/socketserver');

// 连接建立事件
ws.onopen = function() {
    console.log('连接成功');
    // 可以发送数据
    ws.send(JSON.stringify({ type: 'message', content: 'Hello Server!' }));
};

// 数据接收事件
ws.onmessage = function(event) {
    console.log('接收到消息：', event.data);
};

// 错误处理
ws.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// 连接关闭事件
ws.onclose = function() {
    console.log('WebSocket连接已关闭');
};

// 发送JSON格式数据
function sendJsonData(data) {
    if (ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify(data));
    } else {
        console.error('WebSocket连接未打开');
    }
}

// 接收JSON数据示例
ws.onmessage = function(event) {
    var message = JSON.parse(event.data);
    if (message.type === 'response') {
        console.log('服务器响应：', message.content);
    }
};

心跳机制的实现

心跳机制是 WebSocket 通信中用于检测连接活性的一种技术。以下是一个简单的心跳机制实现：

// 设置心跳间隔为25秒
var heartbeatInterval = 25000;

// 定义心跳函数
function sendHeartbeat() {
    if (ws.readyState === WebSocket.OPEN) {
        ws.send('ping');
    }
}

// 设置定时器发送心跳
var heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval);

// 监听心跳响应
ws.onmessage = function(event) {
    if (event.data === 'pong') {
        console.log('心跳响应收到');
        // 可以在这里重置某些状态或计时器
    }
};

// 连接关闭时清除心跳定时器
ws.onclose = function() {
    clearInterval(heartbeatTimer);
};