当前位置：首页 > JavaScript

js实现socket

2026-03-14 07:16:50JavaScript

Socket通信基础

Socket通信分为WebSocket和原生TCP/UDP Socket两种常见形式。浏览器环境通常使用WebSocket API，Node.js环境可同时支持WebSocket和原生Socket。

WebSocket实现（浏览器端）

浏览器通过WebSocket对象实现双向通信：

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

socket.onopen = () => {
  console.log('连接已建立');
  socket.send('Hello Server!');
};

socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

socket.onclose = () => {
  console.log('连接已关闭');
};

Node.js原生Socket

使用net模块创建TCP Socket客户端：

js实现socket

const net = require('net');
const client = net.createConnection({ port: 8080 }, () => {
  console.log('连接到服务器');
  client.write('TCP数据包');
});

client.on('data', (data) => {
  console.log('收到数据:', data.toString());
});

client.on('end', () => {
  console.log('连接断开');
});

WebSocket库（Node.js服务端）

使用ws库创建WebSocket服务器：

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

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('收到消息:', message);
    ws.send('服务端回应');
  });
});

Socket.IO方案

提供更高级的抽象，支持自动重连和房间功能：

js实现socket

// 客户端
const io = require('socket.io-client');
const socket = io('http://localhost:3000');
socket.emit('chat message', 'Hello Socket.IO');

// 服务端
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

二进制数据传输

WebSocket支持二进制数据交换：

// 发送ArrayBuffer
const buffer = new ArrayBuffer(8);
socket.send(buffer);

// 发送Blob数据
const blob = new Blob(['binary data']);
socket.send(blob);

错误处理机制

必须添加错误监听器：

socket.onerror = (error) => {
  console.error('WebSocket错误:', error);
};

// Node.js中
client.on('error', (err) => {
  console.error('Socket错误:', err);
});

心跳检测实现

保持长连接活性：

// 客户端心跳
setInterval(() => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send('PING');
  }
}, 30000);

// 服务端超时处理
wss.on('connection', (ws) => {
  ws.isAlive = true;
  ws.on('pong', () => ws.isAlive = true);
});

setInterval(() => {
  wss.clients.forEach((ws) => {
    if (!ws.isAlive) return ws.terminate();
    ws.isAlive = false;
    ws.ping(null, false, true);
  });
}, 5000);