后端向前端推送消息

通过vue连接rabbitmq实现消息实时通信 前期准备： 1.安装erlang语言并配置环境变量后再安装rabbitmq； 2.安装完rabbitmq后启动stomp插件，执行下面两个语句

rabbitmq-plugins enable rabbitmq_web_stomp
rabbitmq_stomp rabbitmq_web_stomp_examples

1.安装依赖插件

//安装stompjs
npm install stompjs

2.组件中的使用

测试组件中的代码：test.vue

import  Stomp from 'stompjs';
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD,MQTT_host,MQTT_topic } from '@/utils/mqtt'
export default {
    name: "index",
    data() {
        return{
            client: Stomp.client(MQTT_SERVICE)
        }
    },
    mounted(){
        this.connect();
    },

    methods:{
        onConnected:function(){
            //订阅的频道
            const topic = MQTT_topic;
            this.client.subscribe(topic,this.responseCallback,this.onFailed);
        },
        onFailed:function(msg){
            console.log("MQ Failed:" + msg);
        },
        //成功时的回调函数
        responseCallback:function(msg){
            //接收消息的处理
            console.log("MQ msg=>" + msg.body);
        },
        //连接
        connect:function(){
            const headers = {
                login: MQTT_USERNAME,
                password: MQTT_PASSWORD
            };
            this.client.connect(headers,this.onConnected,this.onFailed);
        },
    },
    watch:{

    }
}

utils文件中的mqtt.js内容： mqtt.js

export const MQTT_SERVICE = 'ws://39100.71.73:30304/ws' // mqtt服务地址
export const MQTT_USERNAME = 'admin' // mqtt连接用户名
export const MQTT_PASSWORD = 'admin' // mqtt连接密码
export const MQTT_topic = '/queue/demand.msg'//主题

3.给rabbitmq发消息测试

可以通过rabbitmq控制面板或者后端代码测试发消息给交换机,前端就能收到消息了。