javascript如何与后端通信_websocket怎样实现实时数据推送

JavaScript与后端通信主要用HTTP请求（如fetch/axios）和WebSocket；前者适用于一次性交互，后者专为双向、低延迟、长连接设计，支持服务端主动推送，适合实时场景。

JavaScript 与后端通信主要靠 HTTP 请求（如 fetch 或 axios）和 WebSocket。前者适合“请求-响应”场景，后者专为**双向、低延迟、长连接**设计，是实现实时数据推送的核心方案。

用 fetch / axios 发起常规后端通信

适用于登录、提交表单、拉取列表等一次性交互：

• fetch 示例： <script></script>
  fetch('/api/user', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
  }).then(res => res.json()).then(data => console.log(data));
  
• 后端需提供对应 REST 接口（如 Express 的 app.get('/api/user', ...)）
• 缺点：每次通信都要建立新连接，无法主动推送；轮询会浪费资源

WebSocket 实现实时数据推送

WebSocket 建立的是客户端与服务端之间的**持久化双向通道**，服务端可随时向已连接的前端推送消息，无需等待请求。

• 前端初始化连接：
  <script></script>
  const ws = new WebSocket('ws://localhost:3000');
  ws.onopen = () => console.log('已连接');
  ws.onmessage = event => console.log('收到推送：', event.data);
  ws.onerror = err => console.error('连接出错', err);
  
• 后端需支持 WebSocket 协议： • Node.js 可用 ws 库（轻量）或 Socket.IO（带自动降级、房间、广播等高级功能） • 示例（ws）：
  const WebSocket = require('ws');
  const wss = new WebSocket.Server({ port: 3000 });
  wss.on('connection', ws => {
    ws.send('欢迎连接');
    // 模拟定时推送
    setInterval(() => ws.send(JSON.stringify({ time: new Date().toISOString() })), 5000);
  });
• 关键点： • URL 协议为 ws://（开发）或 wss://（生产，需 HTTPS） • 连接成功后，前后端可随时调用 send() 互发字符串或 JSON • 断线需手动重连（可用指数退避策略）

何时选 WebSocket？简单判断标准

满足以下任一条件，就该考虑 WebSocket：

标签： javascript java js 前端 node.js json node app axios websocket