sockjs-client和stompjs连接websocket服务被拒绝导致vue项目崩溃问题

1、前端连接服务器代码demo:

javascript 复制代码
// 引入stomp.js库
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

// WebSocket服务器地址
const ws = new SockJS('http://localhost:8080/my-endpoint');

// 初始化STOMP客户端
const stompClient = Stomp.over(ws);

// 连接STOMP服务器
stompClient.connect({}, frame => {
    console.log('Connected: ' + frame);

    // 订阅一个路径
    stompClient.subscribe('/topic/greetings', message => {
        console.log(JSON.parse(message.body).content);
    });
}, error => {
    console.error('STOMP error:', error);
});

// 发送消息到服务器
stompClient.send("/app/hello", {}, JSON.stringify({ 'name': 'John Doe' }));

// 断开连接
stompClient.disconnect();

2、崩溃主要原因

  • 未捕获的异常:在JavaScript(以及Vue.js这样的框架)中,如果发生一个异常且没有被任何try...catch语句捕获,那么异常会冒泡至全局作用域,导致整个应用崩溃。Vue.js自身不会捕获这些异常,因为它们是在应用代码中产生的。
  • 错误冒泡:在JavaScript中,错误冒泡到全局作用域通常指的是当一个错误在代码中被抛出(throw),并且没有被任何内部的try...catch语句捕获时,这个错误会沿着调用栈向上传播,最终到达全局作用域。如果全局作用域也没有错误处理机制,那么这个错误通常会导致整个应用崩溃,因为JavaScript引擎不知道如何继续执行后续的代码。具体来说,当函数内部发生错误时,如果这个函数没有包含try...catch块来捕获这个错误,那么错误会被传递给调用该函数的代码。如果这个调用代码也没有捕获错误,那么错误会继续向上冒泡,直到到达最顶层的全局作用域。冒泡到全局作用域的错误通常会导致浏览器控制台显示错误信息,并且可能会中断正在执行的JavaScript代码,导致应用界面停止响应或变得不可用。在单页面应用(SPA)如Vue应用中,这种全局错误可能会导致整个应用的UI停止更新或行为异常。

3、解决方式:因为当前版本的socketjs内部没有捕捉连接失败抛出的异常,所以最好的解决方式就是对websocket服务器进行健康检查,如果请求服务器有响应说明没挂进行连接,否则就舍弃websocket相关应用,舍车保帅,保证nodejs服务的正常运行。

java 复制代码
	@GetMapping("/health")
    public Health health() {
        return 'ok';
    }
相关推荐
小咕聊编程17 分钟前
【含文档+PPT+源码】基于SpringBoot+Vue旅游管理网站
vue.js·spring boot·旅游
东阳马生架构24 分钟前
Netty基础—7.Netty实现消息推送服务二
websocket·netty·消息推送
威桑2 小时前
HTTP/HTTPS 中 GET 请求和 POST 请求的区别与联系
网络协议·http·https
CryptoRzz3 小时前
对接股票金融数据源API
网络·python·websocket·网络协议·金融
沉默的煎蛋3 小时前
深入理解 TCP 三次握手与四次挥手
java·网络·数据结构·网络协议·tcp/ip
TSINGSEE3 小时前
EasyRTC嵌入式音视频通话SDK:微信生态支持、轻量化架构与跨平台兼容性(Linix/Windows/ARM/Android/iOS/LiteOS)
arm开发·网络协议·微信·架构·音视频·webrtc·智能硬件
网硕互联的小客服4 小时前
如何启用 HTTPS 并配置免费的 SSL 证书
网络协议·https·ssl
WIFI_BT_DEV4 小时前
WIFI p2p连接总结
arm开发·驱动开发·物联网·网络协议·信息与通信·p2p·iot
AI编程产品人4 小时前
Vue3 中使用TailwindCSS
前端·css·vue.js
snow_yan5 小时前
Vue实现顶部导航跟随页面联动效果
前端·javascript·vue.js