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);
    });
  },
};

uniapp微信小程序打包成功后wxss编译错误排查

uni.request报"request:fail url not found"错误是什么原因

uniapp如何实现上拉加载更多数据

uniapp如何监听用户在输入框中输入内容的变化

uniapp如何实现手动触发键盘弹出功能

标签： stomp, uniapp

上面是“uniapp如何安装stomp并运用”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4560.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！