SockJS 是一个 JavaScript 库它像是 WebSocket 的“升级版”或“全能替身”。它的核心作用是为浏览器和服务器之间提供一个稳定、可靠的实时通信通道尤其是在网络环境复杂或不支持 WebSocket 的情况下。它的工作方式和传统 WebSocket 有些不同⚙️ 核心原理自动“降级”的智能通信SockJS 设计的精髓在于它的“回退机制”。它会按以下顺序尝试建立连接优先尝试使用性能最好的原生WebSocket。如果失败比如浏览器不支持、网络代理限制等会自动切换到其他基于HTTP 的传输方式如xhr-streaming或http-long-polling。这个切换过程对开发者完全透明你无需修改任何业务代码。 SockJS vs WebSocket特性SockJS原生 WebSocket核心目标提供稳定、可靠的实时通信解决兼容性问题提供高性能、低延迟的双向通信浏览器兼容性极佳。支持几乎所有浏览器包括老旧版本受限。现代浏览器支持良好老旧浏览器不支持稳定性高。遇到网络问题会自动降级连接更稳定一般。在某些严格的网络代理环境下可能连接失败性能相对较低尤其是在使用降级方案时极高使用场景需要确保实时通信在任何环境下都能工作的通用应用对性能和延迟有极致要求的现代 Web 应用‍ 如何使用 SockJS使用 SockJS 通常需要客户端和服务端配合。 客户端浏览器安装通过 npm 安装或在 HTML 中直接引入 CDN。# npm 安装 npm install sockjs-client或在 HTML 中直接引入 CDNscript srchttps://cdn.jsdelivr.net/npm/sockjs-client1/dist/sockjs.min.js/script连接与通信import SockJS from sockjs-client; // 1. 连接到服务器使用你的服务器地址 const sock new SockJS(http://your-server.com/your-endpoint); // 2. 监听连接打开事件 sock.onopen function() { console.log(连接已建立); sock.send(Hello, Server!); // 发送消息 }; // 3. 监听接收消息事件 sock.onmessage function(e) { console.log(收到消息: e.data); }; // 4. 监听连接关闭事件 sock.onclose function() { console.log(连接已关闭); };说明SockJS 的 API 与原生 WebSocket 高度相似你可以使用send()发送消息通过onmessage等事件监听消息。⚙️ 服务端Node.js 示例服务端需要安装对应的sockjs包npm install sockjs然后创建一个简单的 echo 服务const http require(http); const sockjs require(sockjs); // 1. 创建 SockJS 服务器 const echo sockjs.createServer({ prefix: /your-endpoint }); // 2. 监听连接 echo.on(connection, function(conn) { // 3. 监听客户端发来的消息 conn.on(data, function(message) { console.log(收到消息: message); // 4. 将消息原样发回客户端 conn.write(message); }); // 5. 监听连接关闭 conn.on(close, function() { console.log(连接关闭); }); }); // 6. 创建 HTTP 服务器并将 SockJS 挂载上去 const server http.createServer(); echo.installHandlers(server, { prefix: /your-endpoint }); server.listen(9999, 0.0.0.0); console.log(SockJS echo 服务已启动在 9999 端口); 进阶搭配 STOMP 协议在实际项目中为了更灵活地管理消息SockJS 常与STOMPSimple Text Oriented Messaging Protocol协议配合使用。STOMP 提供了订阅/发布模式使消息路由和广播更加方便。以下是一个简单的浏览器端实现// 需要引入 sockjs-client 和 stompjs var SockJS require(sockjs-client); var Stomp require(stompjs); // 使用 SockJS 作为传输层 var socket new SockJS(http://your-server.com/stomp-endpoint); var stompClient Stomp.over(socket); stompClient.connect({}, function(frame) { console.log(STOMP 连接成功: frame); // 订阅一个名为 chat 的公共主题 stompClient.subscribe(/topic/chat, function(message) { console.log(收到聊天消息: message.body); }); // 向 /app/chat 发送消息 stompClient.send(/app/chat, {}, JSON.stringify({ text: Hello everyone! })); });这个组合非常强大通常与 Spring Boot 等后端框架无缝集成用来实现实时聊天、通知推送等复杂功能。 总结与建议总的来说SockJS 是一个强大且实用的实时通信库。何时选择 SockJS如果你的应用需要兼容多种浏览器尤其是老旧浏览器或者在网络环境复杂的公网中运行并希望获得最稳定的连接那么 SockJS 是首选。何时使用原生 WebSocket如果你的应用场景是用户群体较新、现代浏览器为主并且对性能和延迟有极致的要求那么原生 WebSocket 是更轻量高效的选择。- END -感谢你花费宝贵的时间阅读本文文章在撰写过程中难免有疏漏和错误欢迎你在下方留言指出文章的不足之处如果觉得这篇文章对你有用也欢迎你点赞和留下你的评论哦。