Vue前端实现实时接收rabbitMQ及时消息,看了别人写的不太详细

1.rabbitMQ安装Stom插件

进入rabbitMQ的安装目录,如果是docker容器的话,进入tabbitMQ容器
执行下面的两条命令

rabbitmq-plugins enable rabbitmq_web_stomp
rabbitmq-plugins enable rabbitmq_web_stomp_examples

查看下有没有安装成功
如果是用docker容器的话记的开放15674端口
在这里插入图片描述

2.Vue前端安装Stom

//普通项目导入js文件
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.js"></script>
//vue项目的话添加依赖就好
npm install stompjs

3.创建一个测试交换机

直接在rabbitMQ控制台界面添加一个交换机就好,type用direct类型
在这里插入图片描述

4.编写接受rabbitMQ信息的代码

1.vue项目

import Stomp from 'stompjs'

export default {
    name: 'messageNotice',
    data () {
    	return {
    		client: null
		}
    },
    created() {
    //初始化连接
        this.connect();
    },
    methods: {
    //webSocket连接成功后回调函数
        onConnected(frame) {
            console.log("Connected: " + frame);
            //绑定交换机exchange_pushmsg是交换机的名字rk_pushmsg是绑定的路由key
            var exchange = "/exchange/exchange_pushmsg/rk_pushmsg";
            //创建随机队列用上面的路由key绑定交换机,放入收到消息后的回调函数和失败的回调函数
            this.client.subscribe(exchange, this.responseCallback, this.onFailed);
            console.log(frame)
        },
        onFailed(frame) {
            console.log("Failed: " + frame);
        },
        responseCallback(frame) {
            console.log("得到的消息 msg=>" + frame.body);
            console.log(frame)
            //接收到服务器推送消息，向服务器定义的接收消息routekey路由rk_recivemsg发送确认消息
            this.client.send("/exchange/exchange_pushmsg/rk_recivemsg", {"content-type":"text/plain"}, frame.body);
        },
        connect() {
        //这里填你rabbitMQ的连接ip地址直接替换localhost:15674就好其它的不用改
            this.client= Stomp.client("ws://localhost:15674/ws")
            //填写你rabbitMQ登录的用户名和密码
            var headers = {
                "login": "admin",
                "passcode": "admin",
                //虚拟主机，默认“/”
                "host": "/"
            };
            //创建连接,放入连接成功和失败回调函数
            this.client.connect(headers, this.onConnected, this.onFailed);
        },
  ｝

2.普通web项目

<!DOCTYPE HTML>
<html>
<head>
    <title>My WebSocket</title>
</head>
 
<body>
Welcome<br/>
<input id="text" type="text" />
<div id="message">
</div>
</body>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.js"></script>
<script type="text/javascript">
 
if (typeof WebSocket == 'undefined') {
    console.log('不支持websocket')
}
 
// 初始化 ws 对象
 
var ws = new WebSocket('ws://192.168.2.106:15674/ws');
 
// 获得Stomp client对象
var client = Stomp.over(ws);
 
 
// 定义连接成功回调函数
var on_connect = function(x) {
    //同上
    client.subscribe("/exchange/exchange_pushmsg/queue", function(data) {
        var msg = data.body;
        alert("收到数据：" + msg);
    });
};
 
// 定义错误时回调函数
var on_error =  function() {
    console.log('error');
};
 
// 连接RabbitMQ,输入用户名和密码,连接成功和失败函数
client.connect('guest', 'guest', on_connect, on_error, '/');
console.log(">>>连接上http://localhost:15674");
</script>
</html>

出现下面的信息说明创建连接成功
在这里插入图片描述

5.给rabbitMq发消息测试

可以通过rabbitMQ控制面板或者后端代码测试发消息给交换机,前端就能立刻受到消息了
在这里插入图片描述

或者

rabbitTemplate.convertAndSend("exchange_pushmsg","rk_recivemsg","这是一条消息");
# javascript # websocket # java # rabbitmq
Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue