本篇如何讲述前端通过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
前端实现
<!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 boilerplatevar 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('admin', 'admin', 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。
总结
我这里只是使用了一种方式，据我了解，还存在amqp、mqtt等消息协议通信。后面会继续补充。
本篇到这里结束，感谢阅读，点赞关注！拜拜、
