WebSocket在低版本浏览器兼容性方案教程 SockJS轮询替代方法

陌静吖_2080

陌静吖_2080

2026-05-31

654人浏览

原创

sockjs通过协议协商自动选传输方式:先请求/info获取服务端支持的transports列表,再按优先级依次尝试websocket、xhr流、xhr轮询等,全程对业务透明,且自带会话管理、消息确认与自动重连机制。

websocket在低版本浏览器兼容性方案教程 sockjs轮询替代方法

为什么直接用 window.WebSocket 在 IE9 或 Android 4.3 WebView 里会报错

因为这些环境压根没实现 WebSocket API,window.WebSocket 是 undefined,任何 new WebSocket() 都会抛 ReferenceError。不是连接失败,是语法执行不过去。现代框架(比如 Angular 的 @angular/platform-browser)也默认不带降级逻辑,不会自动 fallback。

SockJS 怎么自动选传输方式:不是“模拟 WebSocket”,而是协议协商

SockJS 客户端发起连接时,并不直接走 ws://,而是先发一个 OPTIONS + GET 到 /my_prefix/info 接口,服务端返回支持的 transports 列表(如 ["websocket", "xhr_streaming", "xhr_polling"]),客户端按顺序尝试——能用 websocket 就用,不行就切到 xhr_streaming(基于 multipart/x-mixed-replace),再不行才用 xhr_polling(即传统轮询)。这个过程对业务代码透明。

  • 必须配好服务端的 sockjs-node(Node.js)或对应后端适配器(如 Java 的 sockjs-java),不能只引前端库
  • SockJS 的 URL 路径需和服务端 prefix 严格一致,比如前端连 new SockJS('https://api.example.com/chat'),服务端就得挂载在 /chat 路由下
  • 不要手动改 transports 数组顺序,除非你明确知道某代理(如旧版 Squid)会拦截 xhr_streaming

轮询替代不是“退化成 setInterval + fetch”,而是用 xhr_polling 保持语义一致

真正兼容的轮询,不是自己写 setInterval(() => fetch('/api/ws-poll'), 3000),那样要自己处理消息序号、重复投递、连接状态同步等问题。SockJS 的 xhr_polling 模式自带 session ID 维护、消息确认、自动重连和帧边界解析——它把 HTTP 请求包装成类 WebSocket 的事件流,onmessage 回调拿到的就是纯 payload,和原生 WebSocket 无差别。

  • 每次 polling 请求带唯一 sid 参数,服务端靠它识别会话并推送未读消息
  • 响应体是 JSON 格式数组,如 [["msg1"],["msg2"]],客户端自动拆包触发多次 onmessage
  • 若连续两次 polling 返回空数组,SockJS 会主动发起新连接,避免长等待

容易被忽略的三个部署细节

很多项目本地跑通,一上生产就 fallback 失败,问题往往出在基础设施层:

  • Nginx 反向代理必须透传 Upgrade 和 Connection 头给 WebSocket 分支,但对 SockJS 的 xhr_polling 分支反而要禁用这些头,否则某些 CDN(如 Cloudflare 免费版)会拒绝非 upgrade 请求
  • 服务端 SockJS 实例的 sockjs_url 配置必须指向可公开访问的 CDN 地址(如 https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js),否则 IE8 等老浏览器无法动态加载 transport 脚本
  • 如果用自签名证书或内网域名,SockJS 的 HTTPS 模式会因证书校验失败静默降级到 XHR,但控制台不报错——得看 Network 面板里实际发的是 GET /xxx/xxx/xhr 还是 GET /xxx/xxx/websocket

相关专题

更多
C语言变量命名
C语言变量命名

c语言变量名规则是:1、变量名以英文字母开头;2、变量名中的字母是区分大小写的;3、变量名不能是关键字;4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

3269

3

c语言入门自学零基础
c语言入门自学零基础

C语言是当代人学习及生活中的必备基础知识,应用十分广泛,本专题为大家c语言入门自学零基础的相关文章,以及相关课程,感兴趣的朋友千万不要错过了。

2023.07.25

2348

9

c语言运算符的优先级顺序
c语言运算符的优先级顺序

c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。

2023.08.02

1280

5

c语言数据结构
c语言数据结构

数据结构是指将数据按照一定的方式组织和存储的方法。它是计算机科学中的重要概念,用来描述和解决实际问题中的数据组织和处理问题。数据结构可以分为线性结构和非线性结构。线性结构包括数组、链表、堆栈和队列等,而非线性结构包括树和图等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.09

1218

4

c语言random函数用法
c语言random函数用法

c语言random函数用法:1、random.random,随机生成(0,1)之间的浮点数;2、random.randint,随机生成在范围之内的整数,两个参数分别表示上限和下限;3、random.randrange,在指定范围内,按指定基数递增的集合中获得一个随机数;4、random.choice,从序列中随机抽选一个数;5、random.shuffle,随机排序。

2023.09.05

1376

5

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2023.09.20

2218

7

c语言get函数的用法
c语言get函数的用法

get函数是一个用于从输入流中获取字符的函数。可以从键盘、文件或其他输入设备中读取字符,并将其存储在指定的变量中。本文介绍了get函数的用法以及一些相关的注意事项。希望这篇文章能够帮助你更好地理解和使用get函数 。

2023.09.20

3560

8

c数组初始化的方法
c数组初始化的方法

c语言数组初始化的方法有直接赋值法、不完全初始化法、省略数组长度法和二维数组初始化法。详细介绍:1、直接赋值法,这种方法可以直接将数组的值进行初始化;2、不完全初始化法,。这种方法可以在一定程度上节省内存空间;3、省略数组长度法,这种方法可以让编译器自动计算数组的长度;4、二维数组初始化法等等。

2023.09.22

16355

6

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

2023.09.22

549

3

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21.1万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.9万人学习