【前端】【业务场景】【面试】在前端开发中，如何实现实时数据更新，比如实时显示服务器推送的消息，并且保证在不同网络环境下的稳定性和性能？

WebSocket：

• 原理：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器主动向客户端推送数据，克服了 HTTP 协议只能由客户端发起请求的限制。
• 实现示例：在前端，使用 WebSocket 对象来建立连接。const socket = new WebSocket('ws://your-server-url');
  socket.onopen = function () {
  console.log('WebSocket 连接已建立');
  };
  socket.onmessage = function (event) {
  const data = JSON.parse(event.data);
  // 处理接收到的实时数据，如显示在页面上
  const messageElement = document.createElement('p');
  messageElement.textContent = data.message;
  document.body.appendChild(messageElement);
  };
  socket.onclose = function () {
  console.log('WebSocket 连接已关闭');
  };
• 服务器端实现：在 Node.js 中使用 ws 库。const WebSocket = require('ws');
  const wss = new WebSocket.Server({ port: 8080 });
  wss.on('connection', function connection(ws) {
  // 模拟向客户端推送消息
  const interval = setInterval(() => {
  const message = { message: '这是一条实时消息' };
  ws.send(JSON.stringify(message));
  }, 3000);
  ws.on('close', function close() {
  clearInterval(interval);
  });
  });

Server-Sent Events（SSE）：

• 原理：SSE 是一种允许 Web 服务器向 Web 浏览器发送实时更新的 HTML5 技术。它基于 HTTP 协议，是单向的服务器到客户端的通信，适用于服务器主动推送数据给客户端的场景。
• 实现示例：前端通过 EventSource 接收服务器推送的数据。const eventSource = new EventSource('your-sse-endpoint');
  eventSource.onmessage = function (event) {
  const data = JSON.parse(event.data);
  // 处理接收到的实时数据
  const messageElement = document.createElement('p');
  messageElement.textContent = data.message;
  document.body.appendChild(messageElement);
  };
• 服务器端实现：在 Node.js 中使用 Express 框架。const express = require('express');
  const app = express();
  app.get('/your-sse-endpoint', function (req, res) {
  res.set('Content-Type', 'text/event-stream');
  res.set('Cache-Control', 'no-cache');
  res.set('Connection', 'keep-alive');
  // 模拟向客户端推送消息
  const interval = setInterval(() => {
  const message = { message: '这是一条实时消息' };
  res.write(`data: ${JSON.stringify(message)}\\n\\n`);
  }, 3000);
  req.on('close', function () {
  clearInterval(interval);
  res.end();
  });
  });
  const port = 3000;
  app.listen(port, function () {
  console.log(`Server running on port ${port}`);
  });

连接管理：

• 重连机制：对于 WebSocket 和 SSE，在连接断开时，自动重连机制可以确保稳定的连接。

  • WebSocket：const socket = new WebSocket('ws://your-server-url');
    let reconnectInterval = 5000;
    socket.onclose = function () {
    console.log('WebSocket 连接已关闭，尝试重连…');
    setTimeout(() => {
    socket = new WebSocket('ws://your-server-url');
    }, reconnectInterval);
    reconnectInterval = Math.min(reconnectInterval * 2, 30000);
    };
  • SSE：function createEventSource() {
    const eventSource = new EventSource('your-sse-endpoint');
    eventSource.onerror = function () {
    console.log('SSE 连接错误，尝试重连…');
    setTimeout(() => {
    createEventSource();
    }, 5000);
    };
    return eventSource;
    }
    const eventSource = createEventSource();

• 心跳检测：为了保持连接的活跃性并防止中断，可以通过定期发送心跳消息来检测连接状态。

  • WebSocket 客户端心跳：const socket = new WebSocket('ws://your-server-url');
    const heartbeatInterval = setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
    socket.send('ping');
    }
    }, 10000);
    socket.onmessage = function (event) {
    if (event.data === 'pong') {
    // 接收到服务器的 pong 响应，说明连接正常
    }
    };
  • WebSocket 服务器端心跳：const WebSocket = require('ws');
    const wss = new WebSocket.Server({ port: 8080 });
    wss.on('connection', function connection(ws) {
    const heartbeatInterval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
    ws.send('pong');
    }
    }, 10000);
    ws.on('message', function incoming(message) {
    if (message === 'ping') {
    ws.send('pong');
    }
    });
    ws.on('close', function close() {
    clearInterval(heartbeatInterval);
    });
    });

数据处理与优化：

• 数据压缩：为了提高传输效率，可以在服务器端对推送的数据进行压缩。

  • WebSocket 数据压缩（Node.js 示例）：const WebSocket = require('ws');
    const zlib = require('zlib');
    const wss = new WebSocket.Server({ port: 8080 });
    wss.on('connection', function connection(ws) {
    const message = { message: '这是一条较长的实时消息' };
    const compressedData = zlib.deflateSync(JSON.stringify(message));
    ws.send(compressedData, { binary: true });
    });
  • 客户端需要相应地解压数据：const socket = new WebSocket('ws://your-server-url');
    socket.onmessage = function (event) {
    const decompressedData = zlib.inflateSync(event.data);
    const data = JSON.parse(decompressedData.toString());
    // 处理数据
    };

• 按需推送：服务器应根据客户端的需求和状态，精准地推送数据，避免无意义的数据过载。

  • 在实时聊天应用中，服务器只向特定聊天房间的客户端推送消息，而不是广播所有消息。