https://blog.csdn.net/dawnStart/article/details/110479833
打开APP
Vue前端实现接收rabbitMQ及时消息 原创
2020-12-02 14:03:11
阅读量
1.4w
AI必读
dawnStart
码龄4年
关注
Vue前端实现实时接收rabbitMQ及时消息,看了别人写的不太详细
1.rabbitMQ安装Stom插件
2.Vue前端安装Stom
3.创建一个测试交换机
4.编写接受rabbitMQ信息的代码
1.vue项目
2.普通web项目
5.给rabbitMq发消息测试
1.rabbitMQ安装Stom插件
进入rabbitMQ的安装目录,如果是docker容器的话,进入tabbitMQ容器
执行下面的两条命令
rabbitmq-plugins enable rabbitmq_web_stomp
rabbitmq-plugins enable rabbitmq_web_stomp_examples
1
2
1
2
查看下有没有安装成功
如果是用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
1
2
3
4
5
1
2
3
4
5
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","这是一条消息")
标签：Vue,console,log,exchange,frame,rabbitMQ,client,前端 From： https://www.cnblogs.com/it-wwp/p/18231924