JavaScript与后端通信主要用HTTP请求（如fetch/axios）和WebSocket；前者适用于一次性交互，后者专为双向、低延迟、长连接设计，支持服务端主动推送，适合实时场景。
JavaScript 与后端通信主要靠 HTTP 请求（如 fetch 或 axios）和 WebSocket。前者适合“请求-响应”场景，后者专为**双向、低延迟、长连接**设计，是实现实时数据推送的核心方案。
用 fetch / axios 发起常规后端通信
适用于登录、提交表单、拉取列表等一次性交互：
-
fetch 示例：
<script>
fetch('/api/user', {
method: 'GET',
headers: { 'Content-Type': 'application/json' }
}).then(res => res.json()).then(data => console.log(data));
</script> - 后端需提供对应 REST 接口（如 Express 的
app.get('/api/user', ...)） - 缺点：每次通信都要建立新连接，无法主动推送；轮询会浪费资源
WebSocket 实现实时数据推送
WebSocket 建立的是客户端与服务端之间的**持久化双向通道**，服务端可随时向已连接的前端推送消息，无需等待请求。
-
前端初始化连接：
<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);
</script> -
后端需支持 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：
立即学习“Java免费学习笔记（深入）”；
- 需要服务端主动通知前端（如聊天消息、订单状态变更、股价实时更新）
- 高频交互（秒级甚至毫秒级更新），HTTP 轮询已造成明显延迟或服务器压力
- 要求低延迟 + 双向通信（如在线协作文档、多人游戏）
补充：Socket.IO 更易上手
原生 WebSocket 不处理断线重连、协议兼容、广播等细节。Socket.IO 封装了这些，并支持自动降级到长轮询（兼容老旧环境）：
- 前端：
const socket = io('http://localhost:3000');，监听socket.on('msg', ...) - 后端：
io.on('connection', socket => { socket.emit('welcome', 'Hello'); }); - 注意：它不是 WebSocket 的替代品，而是在其之上增强的库；传输层仍可走 WebSocket
