本篇如何讲述前端通过stomp.js实现向rabbitmq推送和订阅消息。
开发前准备
rabbitmq
在实现通信前,先需要开启rabbitmq的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
前端实现
html
<!DOCTYPE html>
<html><head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="stomp.js"></script>
<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"/>
</head><body lang="en">
<h1><a href="index.html">RabbitMQ Web STOMP Examples</a> > Echo Server</h1>
<div id="first" class="box">
<h2>Received</h2>
<div></div>
<form><input autocomplete="off" value="Type here..."></input></form>
</div>
<div id="second" class="box">
<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等消息协议通信。后面会继续补充。
本篇到这里结束,感谢阅读,点赞关注!拜拜、