面试题：JavaScript WebSocket在复杂网络环境下的优化策略

Question

假设在复杂网络环境（如高延迟、高丢包率）下使用JavaScript的WebSocket进行实时通信，阐述你会采取哪些优化策略来提高通信的可靠性和性能，并详细说明每种策略在JavaScript中的实现思路。

Answer 1

1. 心跳机制

• 策略说明：通过定期发送心跳消息，确保连接处于活动状态，及时发现网络中断情况。
• 实现思路：

const socket = new WebSocket('ws://your-server-url');
let heartbeatInterval;

socket.addEventListener('open', () => {
    function sendHeartbeat() {
        socket.send('ping');
    }
    heartbeatInterval = setInterval(sendHeartbeat, 5000); // 每5秒发送一次心跳
});

socket.addEventListener('message', (event) => {
    if (event.data === 'pong') {
        // 收到服务端响应，可重置心跳相关逻辑，比如重置定时器
        clearInterval(heartbeatInterval);
        heartbeatInterval = setInterval(() => socket.send('ping'), 5000);
    }
});

socket.addEventListener('close', () => {
    clearInterval(heartbeatInterval);
});

2. 重连机制

• 策略说明：当WebSocket连接断开时，自动尝试重新连接，以恢复通信。
• 实现思路：

let reconnectInterval = 1000; // 初始重连间隔1秒
const maxReconnectInterval = 30000; // 最大重连间隔30秒

function connectWebSocket() {
    const socket = new WebSocket('ws://your-server-url');

    socket.addEventListener('open', () => {
        reconnectInterval = 1000;
    });

    socket.addEventListener('close', (event) => {
        if (event.wasClean) {
            console.log('Connection closed cleanly');
        } else {
            console.log('Connection lost, attempting to reconnect...');
            setTimeout(() => {
                connectWebSocket();
                reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval);
            }, reconnectInterval);
        }
    });

    socket.addEventListener('error', (error) => {
        console.error('WebSocket error:', error);
        setTimeout(() => {
            connectWebSocket();
            reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval);
        }, reconnectInterval);
    });

    return socket;
}

const socket = connectWebSocket();

3. 消息缓存与补发

• 策略说明：在网络不稳定时，将未能成功发送的消息缓存起来，待网络恢复后重新发送，确保消息不丢失。
• 实现思路：

const socket = new WebSocket('ws://your-server-url');
const messageQueue = [];

socket.addEventListener('open', () => {
    while (messageQueue.length > 0) {
        socket.send(messageQueue.shift());
    }
});

function sendMessage(message) {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(message);
    } else {
        messageQueue.push(message);
    }
}

4. 优化数据传输

• 策略说明：
  • 数据压缩：减少数据传输量，提高传输效率。
  • 按需传输：只传输必要的数据。
• 实现思路：
  • 数据压缩：可使用pako库进行数据压缩。

import pako from 'pako';

const data = { /* 要发送的复杂数据 */ };
const stringifiedData = JSON.stringify(data);
const compressedData = pako.deflate(stringifiedData);

socket.send(compressedData);

socket.addEventListener('message', (event) => {
    const decompressedData = pako.inflate(event.data);
    const parsedData = JSON.parse(decompressedData);
});

- **按需传输**：在发送数据前，筛选出必要的字段进行传输。

const fullData = { /* 完整数据 */ };
const essentialData = {
    importantField1: fullData.importantField1,
    importantField2: fullData.importantField2
};
socket.send(JSON.stringify(essentialData));

5. 降低频率

• 策略说明：减少不必要的消息发送，降低网络负载。
• 实现思路：

let lastSendTime = 0;
const minSendInterval = 1000; // 最小发送间隔1秒

function sendThrottledMessage(message) {
    const now = Date.now();
    if (now - lastSendTime >= minSendInterval) {
        socket.send(message);
        lastSendTime = now;
    }
}