前端与rabbitmq通信
雅闲人 2024-10-02 16:33:01 阅读 75
本篇如何讲述前端通过stomp.js实现向rabbitmq推送和订阅消息。
开发前准备
rabbitmq
在实现通信前，先需要开启rabbitmq的<code>web stomp Plugin。这个在rabbitmq官网也有详细的说明点这里。
在rabbitmq服务器上输入如下命令即可开启：
rabbitmq-plugins enable rabbitmq_web_stomp
开启该插件后，rabbitmq会开放15674端口，用于与前端进行通信。
我们也可以开启rabbitmq提供的示例进行测试
rabbitmq-plugins enable rabbitmq_web_stomp_examples
开启后，我们可以通过访问http://rabbitmq服务器地址:15670/ ，使用两个示例。
前端安装stomp
下载stomp.js
如果使用web框架则执行：npm install stompjs
前端实现
<!DOCTYPE html>
<html><head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>code>
<script src="stomp.js"></script>code>
<style>
.box { -- -->
width: 440px;
float: left;
margin: 0 20px 0 20px;
}
.box div, .box input {
border: 1px solid;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
padding: 5px;
margin: 3px 0 10px 0;
}
.box div {
border-color: grey;
height: 300px;
overflow: auto;
}
div code {
display: block;
}
#first div code {
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #eee;
margin-bottom: 5px;
}
#second div {
font-size: 0.8em;
}
</style>
<title>RabbitMQ Web STOMP Examples : Echo Server</title>
<link href="main.css" rel="stylesheet" type="text/css"/>code>
</head><body lang="en">code>
<h1><a href="index.html">RabbitMQ Web STOMP Examples</a> > Echo Server</h1>code>
<div id="first" class="box">code>
<h2>Received</h2>
<div></div>
<form><input autocomplete="off" value="Type here..."></input></form>code>
</div>
<div id="second" class="box">code>
<h2>Logs</h2>
<div></div>
</div>
<script>
var has_had_focus = false;
var pipe = function(el_name, send) { -- -->
var div = $(el_name + ' div');
var inp = $(el_name + ' input');
var form = $(el_name + ' form');
var print = function(m, p) {
p = (p === undefined) ? '' : JSON.stringify(p);
div.append($("<code>").text(m + ' ' + p));
div.scrollTop(div.scrollTop() + 10000);
};
if (send) {
form.submit(function() {
send(inp.val());
inp.val('');
return false;
});
}
return print;
};
// Stomp.js boilerplate
var client = Stomp.client('ws://192.168.16.117:15674/ws');
client.debug = pipe('#second');
var channelName = "/exchange/test.front.exchange";
var print_first = pipe('#first', function(data) {
client.send(channelName , { "content-type":"text/plain"}, data);
});
var on_connect = function(x) {
id = client.subscribe(channelName , function(d) {
print_first(d.body);
});
};
var on_error = function() {
console.log('error');
};
client.connect('username', 'password', on_connect, on_error, '/');
$('#first input').focus(function() {
if (!has_had_focus) {
has_had_focus = true;
$(this).val("");
}
});
</script>
</body></html>
其中我们讲讲channelName 的命名：
/exchange/test.front.exchange
/exchange： 代表是发送到rabbitmq的交换机中。
也可以使用其他的：
/queue: 代表是发送到队列中/topic: 代表是发送到topic模式的交换机，交换机名称通常是"amq.topic";后面再指定的url则被认为是routeKey.…
不可以乱写的。否则会报错。
/test.front.exchange: 则会被识别为交换机名称。如果后面再加入/xxx,则xxx则会被识别为routeKey。
client.connect('username', 'password', on_connect, on_error, '/');
connect有四个参数
rabbitmq登录用户名密码连接成功的回调失败的回调虚拟主机（Virtual host）
总结
我这里只是使用了一种方式，据我了解，还存在amqp、mqtt等消息协议通信。后面会继续补充。
本篇到这里结束，感谢阅读，点赞关注！拜拜、
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。