当前位置：首页 > JavaScript

js 实现 websocket

2026-02-02 09:57:04JavaScript

WebSocket 基本实现

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。JavaScript 提供了 WebSocket API，可以轻松实现客户端与服务器的实时通信。

创建 WebSocket 连接

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

监听连接事件

socket.onopen = function(event) {
  console.log('连接已建立');
};

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

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

socket.onerror = function(error) {
  console.log('发生错误: ' + error);
};

发送和接收数据

发送数据

socket.send('Hello Server!');

接收数据

js 实现 websocket

socket.onmessage = function(event) {
  const data = event.data;
  console.log('接收到数据:', data);
};

关闭连接

手动关闭连接

socket.close();

监听关闭事件

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`连接正常关闭，code=${event.code} reason=${event.reason}`);
  } else {
    console.log('连接意外断开');
  }
};

二进制数据传输

发送二进制数据

js 实现 websocket

const arrayBuffer = new ArrayBuffer(8);
socket.send(arrayBuffer);

接收二进制数据

socket.onmessage = function(event) {
  if (event.data instanceof ArrayBuffer) {
    const buffer = event.data;
    console.log('接收到二进制数据:', buffer);
  }
};

心跳检测

实现心跳机制

let heartbeatInterval;

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

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

重连机制

自动重连实现

let reconnectAttempts = 0;
const maxReconnectAttempts = 5;

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

  socket.onclose = function() {
    if (reconnectAttempts < maxReconnectAttempts) {
      reconnectAttempts++;
      setTimeout(connect, 1000 * reconnectAttempts);
    }
  };
}

connect();