0

0

javascript如何实现WebSocket通信_它与HTTP长轮询有什么区别?

夜晨

夜晨

发布时间:2026-01-10 21:13:02

|

556人浏览过

|

来源于php中文网

原创

websocket连接三步:构造函数创建、监听事件、send发送;长轮询靠客户端递归请求模拟实时;核心区别是全双工长连接vs单向http“假连接”;选型依延迟与交互频率而定。

javascript如何实现websocket通信_它与http长轮询有什么区别?

WebSocket 连接怎么写?关键就三步

直接用 WebSocket 构造函数就能建立双向通道,不需要额外库。但必须注意:服务端得支持 WebSocket 协议(比如 Node.jsws 库,不是 Express 默认带的),否则会卡在连接阶段。

常见错误是直接访问 http:// 地址却传 ws://,或者 HTTPS 页面里用了 ws://(被浏览器拦截)——必须匹配协议:http 对应 ws://https 对应 wss://

  • 创建实例:
    const ws = new WebSocket('wss://api.example.com');
  • 监听事件:ws.onopenws.onmessagews.onerrorws.onclose
  • 发消息只用 ws.send(),参数只能是 stringArrayBuffer(传对象要先 JSON.stringify()

长轮询(Long Polling)是怎么模拟“实时”的?

它本质还是 HTTP 请求,只是服务端不立刻响应,而是等有新数据或超时才返回。客户端收到响应后,立刻发下一个请求,形成“假连接”。

典型实现是用 fetchXMLHttpRequest,设置较长的 timeout,并在 then 里递归调用下一次请求。但它无法做到服务端主动推——所有推送动作都依赖客户端不断发起请求。

Genspark
Genspark

Genspark 是一款创新的 AI 搜索引擎,致力于提供比传统搜索引擎更高效、准确和无偏见的信息获取方式。

下载

立即学习Java免费学习笔记(深入)”;

  • 每次请求都有完整 HTTP 头开销(可能几百字节),频繁请求加重服务端压力
  • 存在请求间隙,严格来说不是实时,延迟通常在几百毫秒到几秒
  • 适合 WebSocket 不可用的老旧环境(如 IE9),或某些代理/防火墙强行阻断 WebSocket 升级的场景

WebSocket 和长轮询的核心区别在哪?

不是“谁更快”,而是通信模型根本不同:WebSocket 是真正的全双工长连接,长轮询是 HTTP 的“障眼法”。

  • 连接状态:WebSocket 建立后保持一个 TCP 连接;长轮询每次都是新 HTTP 请求,连接不断断开重连
  • 数据流向:WebSocket 允许服务端随时 send();长轮询只能由客户端发起请求,服务端只能在该次响应中回传数据
  • 首字节延迟:WebSocket 消息到达即达;长轮询需等待下次请求发起+网络往返+服务端处理,链路更长
  • 兼容性代价:WebSocket 需服务端显式支持升级协议(Upgrade: websocket);长轮询只要 HTTP Server 就能跑,但逻辑更复杂(要管理 pending 请求队列)

什么时候该选哪个?别被“实时”二字带偏

如果业务需要低延迟、高频率双向交互(比如协作编辑、实时游戏、行情推送),优先 WebSocket。但它的失败降级不能只靠“捕获 onerror 后切长轮询”——因为连接失败可能发生在握手阶段(HTTP 400/401/503),这时连 onerror 都不会触发,得靠 onclose 状态码和重试逻辑兜底。

  • 长轮询更适合低频、容忍秒级延迟的场景(如通知提醒、离线消息拉取)
  • 不要在 WebSocket 上做心跳包轮询:用 ws.ping()(服务端需配合)或发空字符串即可,避免引入 HTTP 轮询思维
  • 真实部署中,Nginx 默认不转发 WebSocket 升级头,必须显式配置:proxy_http_version 1.1proxy_set_header Upgrade $http_upgradeproxy_set_header Connection "upgrade"

最常被忽略的是连接生命周期管理:WebSocket 断开后,前端自动重连不能无限制(会触发浏览器限流),得加退避策略;而长轮询的请求间隔一旦设死,容易在服务端过载时雪崩。这两者的“稳”,靠的都不是协议本身,而是你写的重连和限流逻辑。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

245

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

521

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

588

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

244

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

651

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3613

2024.08.07

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

53

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

70

2026.01.13

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

19

2026.03.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号