当前位置：首页 > JavaScript

js实现socket

2026-04-06 01:18:31JavaScript

使用 WebSocket API 实现基础通信

在 JavaScript 中实现 WebSocket 通信需要创建 WebSocket 对象并监听事件：

js实现socket

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('连接已关闭');
};

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

处理二进制数据

WebSocket 支持发送和接收二进制数据：

js实现socket

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

// 接收二进制数据
socket.binaryType = 'arraybuffer';
socket.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const view = new Uint8Array(event.data);
    console.log('收到二进制数据:', view);
  }
};

实现重连机制

为应对网络波动，需要实现自动重连：

let socket;
const maxRetries = 5;
let retryCount = 0;

function connect() {
  socket = new WebSocket('ws://example.com/socket');

  socket.onclose = () => {
    if (retryCount < maxRetries) {
      retryCount++;
      setTimeout(connect, 1000 * retryCount);
    }
  };
}

connect();

使用 Socket.io 库简化开发

Socket.io 提供更高级的 API 和自动重连功能：

const io = require('socket.io-client');
const socket = io('http://example.com');

socket.on('connect', () => {
  console.log('连接成功');
  socket.emit('chat message', 'Hello');
});

socket.on('chat message', (msg) => {
  console.log('收到:', msg);
});

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

安全注意事项

始终使用 wss:// 替代 ws:// 确保加密传输
验证服务器发来的消息内容
设置合理的消息大小限制
实现心跳机制检测连接状态

// 心跳检测示例
let heartbeatInterval;

socket.onopen = () => {
  heartbeatInterval = setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send('ping');
    }
  }, 30000);
};

socket.onclose = () => {
  clearInterval(heartbeatInterval);
};