WebSocket实时通信实现方法

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {

  console.log('连接已建立');

  socket.send('用户上线');

};

socket.onmessage = (event) => {

  const data = event.data;

  console.log('收到消息:', data);

  // 更新 DOM，例如添加到消息列表

};

socket.onerror = (error) => {

  console.error('连接出错:', error);

};

socket.onclose = () => {

  console.log('连接已关闭');

};

// 发送带类型的消息

function sendMessage(content) {

  const message = {

    type: 'chat',

    user: '张三',

    content: content,

    time: new Date().toISOString()

  };

  socket.send(JSON.stringify(message));

}

socket.onmessage = (event) => {

  const msg = JSON.parse(event.data);

  if (msg.type === 'chat') {

    displayChatMessage(msg.user, msg.content, msg.time);

  } else if (msg.type === 'online') {

    updateOnlineCount(msg.count);

  }

};

let reconnectInterval = 1000; // 初始重连间隔

let maxReconnectInterval = 30000; // 最大重连时间

let socket = null;

function connect() {

  socket = new WebSocket('ws://localhost:8080');

  socket.onopen = () => {

    console.log('连接成功');

    reconnectInterval = 1000; // 重置间隔

  };

  socket.onclose = () => {

    console.log('连接断开，尝试重连...');

    setTimeout(connect, reconnectInterval);

    reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval);

  };

}

connect();