JavaScript与后端通信主要用HTTP请求（如fetch/axios）和WebSocket；前者适用于一次性交互，后者专为双向、低延迟、长连接设计，支持服务端主动推送，适合实时场景。
JavaScript 与后端通信主要靠 HTTP 请求（如 fetch 或 axios）和 WebSocket。前者适合“请求-响应”场景，后者专为**双向、低延迟、长连接**设计，是实现实时数据推送的核心方案。
用 fetch / axios 发起常规后端通信
适用于登录、提交表单、拉取列表等一次性交互：
fetch 示例：
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 建立的是客户端与服务端之间的**持久化双向通道**，服务端可随时向已连接的前端推送消息，无需等待请求。
前端初始化连接：
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：
立即学习“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
以上就是javascript如何与后端通信_websocket怎样实现实时数据推送的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544134.html
微信扫一扫 
支付宝扫一扫 
