websocket使用

前端段

于 2023-02-10 13:32:25 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习文章标签： websocket 前端 javascript

本文链接：https://blog.youkuaiyun.com/hkduan/article/details/128968532

vue学习专栏收录该内容

56 篇文章

订阅专栏

文章讲述了在Vue应用程序中使用WebSocket进行数据推送。在组件挂载时初始化WebSocket连接，通过Stomp库与服务器建立交互。当组件销毁前，确保调用函数断开WebSocket连接，防止资源泄漏。连接建立后，订阅特定主题并处理接收到的消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

websocket使用：
跳转路由前，一定要销毁链接。

mounted () {
this.connectWebSocket()
},
connectWebSocket () { // websocket推送
const baseUrl = window.config.baseUrl
const viborderStompWebsocket = ${window.config.projectName}${window.config.viborderStompWebsocket}
let socket = new SockJS(
baseUrl + viborderStompWebsocket
)
this.socketInfo.client = Stomp.over(socket)
let path = /topic/commandTopic_${this.socketInfo.site}
let scb = (msg) => { // 针对订阅路径处理推送逻辑
// console.log(‘放行确认站-------------------’, msg)
if (msg.command === ‘vehicleRefresh’) {
// this.listQuery()
}
}
connect({client: this.socketInfo.client, path, scb, header: this.socketInfo.header, reconCallBack: this.connectWebSocket})
},
beforeDestroy () {
this.socketInfo.client && disconnect({client: this.socketInfo.client}) // socket断开连接
},