当前位置：首页 > JavaScript

js socket实现原理

2026-02-03 08:04:27JavaScript

JavaScript Socket 实现原理

JavaScript 中的 Socket 实现通常基于 WebSocket 协议，这是一种在单个 TCP 连接上提供全双工通信的协议。以下是其核心原理和实现方式：

WebSocket 协议基础

WebSocket 协议通过 HTTP/HTTPS 升级握手建立连接。客户端发送一个带有 Upgrade: websocket 头部的 HTTP 请求，服务器响应确认后，连接从 HTTP 升级为 WebSocket。

握手请求示例：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

浏览器端实现

浏览器通过 WebSocket API 提供原生支持：

const socket = new WebSocket('wss://example.com/chat');

socket.onopen = () => {
    console.log('Connection established');
    socket.send('Hello Server!');
};

socket.onmessage = (event) => {
    console.log('Message from server:', event.data);
};

socket.onclose = () => {
    console.log('Connection closed');
};

数据帧格式

WebSocket 数据传输使用特定帧格式：

1位 FIN 标志（表示是否为最终帧）
3位保留位
4位操作码（如 0x1 表示文本帧）
1位掩码标志（客户端到服务器需掩码）
7位载荷长度
可选 16/64 位扩展长度
掩码密钥（4字节）
载荷数据

心跳机制

通过 Ping/Pong 帧维持连接：

// 服务器发送 Ping
setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
        socket.ping();
    }
}, 30000);

// 客户端自动回复 Pong

二进制数据传输

支持 ArrayBuffer 和 Blob 格式：

socket.binaryType = 'arraybuffer';
socket.onmessage = (e) => {
    if (e.data instanceof ArrayBuffer) {
        const view = new Uint8Array(e.data);
        // 处理二进制数据
    }
};

错误处理

需监听 error 事件并实现重连逻辑：

socket.onerror = (error) => {
    console.error('WebSocket error:', error);
    // 实现指数退避重连
};

性能优化

使用消息缓冲队列避免网络拥塞
实现消息压缩（如 permessage-deflate 扩展）
合理设置消息分片阈值（通常 16KB）

安全考虑

必须使用 wss 加密连接
验证 Origin 头部防止 CSRF
实现速率限制防止 DDoS
关闭时需发送正确状态码（如 1001/1002）

Node.js 服务端实现

使用 ws 库示例：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        // 广播消息
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});