前端怎么获取后端实时数据_前端实时获取Node后端数据的WebSocket实现方法-js教程-PHP中文网

前端怎么获取后端实时数据_前端实时获取Node后端数据的WebSocket实现方法

雪夜

发布： 2025-11-12 14:06:02

原创

704人浏览过

选择WebSocket因其实现持久化双向通信，相比HTTP轮询显著降低延迟与资源消耗，适用于聊天室、实时通知等场景。Node.js通过ws库可快速搭建WebSocket服务，前端利用原生API连接并实时接收数据，结合定时发送机制与事件监听实现动态更新。需注意连接稳定性、重连机制、错误处理及安全性，推荐使用wss加密传输，服务端维护clients集合支持广播，确保心跳机制与异常恢复完善以保障生产环境可靠性。

前端怎么获取后端实时数据_前端实时获取node后端数据的websocket实现方法

前端要实时获取后端数据，传统轮询方式效率低、延迟高。使用 WebSocket 能实现双向通信，真正达到“实时”效果。结合 Node.js 后端，WebSocket 是最直接、高效的方案之一。

1. 为什么选择 WebSocket？

HTTP 请求是单向的，前端必须主动发起才能拿到数据。而 WebSocket 建立的是持久连接，服务端可以主动向前端推送消息。

适用场景包括：聊天室、实时通知、股票行情、在线协作等需要即时更新的业务。

低延迟：建立一次连接，长期通信
双向通信：服务端可主动推数据
节省资源：相比轮询减少大量无效请求

2. Node.js 后端搭建 WebSocket 服务

使用 ws 库快速创建 WebSocket 服务。先安装依赖：

立即学习“前端免费学习笔记（深入）”；

npm install ws

然后创建一个简单的服务器（server.js）：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

const http = require('http');
const WebSocket = require('ws');

// 创建 HTTP 服务
const server = http.createServer();
const wss = new WebSocket.Server({ server });

// 监听客户端连接
wss.on('connection', (ws) => {
  console.log('客户端已连接');

  // 定时发送实时数据
  const interval = setInterval(() => {
    const data = { time: new Date().toISOString(), value: Math.random() };
    ws.send(JSON.stringify(data));
  }, 1000);

  // 监听客户端消息
  ws.on('message', (message) => {
    console.log('收到:', message.toString());
  });

  // 连接关闭时清理
  ws.on('close', () => {
    console.log('客户端断开');
    clearInterval(interval);
  });
});

server.listen(3001, () => {
  console.log('WebSocket 服务运行在 ws://localhost:3001');
});

登录后复制

3. 前端通过 WebSocket 连接并接收数据

前端使用原生 WebSocket API 连接 Node 服务，并监听消息事件。

HTML 页面中添加以下 JavaScript 代码：

<script>
  const socket = new WebSocket('ws://localhost:3001');

  // 连接成功
  socket.addEventListener('open', (event) => {
    console.log('已连接到 WebSocket 服务');
  });

  // 监听来自服务端的消息
  socket.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    console.log('实时数据:', data);
    
    // 更新页面内容
    document.getElementById('data').innerHTML = `
      时间: ${data.time} <br>
      数值: ${data.value.toFixed(4)}
    `;
  });

  // 处理错误
  socket.addEventListener('error', (event) => {
    console.error('连接出错', event);
  });

  // 连接关闭
  socket.addEventListener('close', (event) => {
    console.log('连接已关闭');
  });
</script>

<div id="data">等待数据...</div>

登录后复制