uniapp如何安装stomp并运用

如何利用uniapp语法安装stomp插件并运用，下面web建站小编给大家简单介绍一下具体实现代码！

安装脚手架

npm install stompjs --save

创建stomp.js文件

import Stomp from 'stompjs';
 
const setConnected = connected => {
  store.commit('stomp/setConnected', connected);
};
 
const stompPlugin = {
  install(Vue, options) {
    const { url, username, password } = options;
    const socket = new WebSocket(url);
    const stompClient = Stomp.over(socket);
 
    // set stompClient's credentials if needed
    if (username && password) {
      stompClient.connect(username, password, () => {
        setConnected(true);
      });
    } else {
      stompClient.connect({}, () => {
        setConnected(true);
      });
    }
 
    Vue.prototype.$stompClient = stompClient;
  },
};
 
export default stompPlugin;

在main.js中引入

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
 
import stompPlugin from '@/plugins/stomp';
 
Vue.config.productionTip = false;
 
Vue.use(stompPlugin, {
  url: 'ws://localhost:15674/ws',
  username: 'guest',
  password: 'guest',
});
 
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

客户端的连接状态

const stomp = {
  state: {
    connected: false,
  },
  getters: {
    connected: state => state.connected,
  },
  mutations: {
    setConnected(state, connected) {
      state.connected = connected;
    },
  },
  actions: {},
};
 
export default new Vuex.Store({
  modules: {
    stomp,
  },
});

测试

export default {
  mounted() {
    this.$stompClient.subscribe('/queue/test', message => {
      console.log(message.body);
    });
  },
};