在vue项目中使用stompjs+websocket进行封装实现订阅与发布功能

纸短情长—来日方长

已于 2024-03-06 11:06:52 修改

阅读量1.5k

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue.js websocket javascript

于 2024-03-05 17:44:13 首次发布

本文链接：https://blog.csdn.net/weixin_42244510/article/details/136484732

本文介绍了如何在Vue项目中使用stompjs和WebSocket进行封装，创建全局消息总线，实现连接管理、订阅与发布功能，以及在不同组件间传递消息的方法。

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

在vue项目中使用stompjs+websocket进行封装实现订阅与发布功能

主要是为了记录一下实现封装的功能与方法

1.在你的项目里面src目录下新建一个api目录，目录里面建立一个stomp.js

**注意：**
// unsubscribe  对于取消订阅需要改一下源stompjs 路径：systemmonitor\views\node_modules\stompjs\lib\stomp.js
/*
 * Client.prototype.unsubscribe = function(id,destination) {
 *  delete this.subscriptions[id];
 *  return this._transmit("UNSUBSCRIBE", {
 *    id: id,
 *    destination:destination
 *  });
 * };
*/

bus.js代表全局消息总线，需要替换成自己的路径，里面的内容为如下：

import Vue from 'vue'
var bus = new Vue()
export default bus

引用需要的资源，store不做过多解释，就是vuex仓库，需要存连接状态

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import bus from '@/components/common/bus';
import store from '@/vuex/store';
let host = window.location.host; //主机
// websocket地址
let baseStompUrl = 'ws://' + host;
// 公共地址 这个地方在开发环境下做了代理 需要改成自己的连接地址
let baseURL = process.env.NODE_ENV === 'development' ? (baseStompUrl+'/websocketApi/Parameters') : (baseStompUrl+'/Parameters');
let socket = null;
let</