本篇如何讲述前端通过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 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的交换机中。
也可以使用其他的：
不可以乱写的。否则会报错。
/test.front.exchange: 则会被识别为交换机名称。如果后面再加入/xxx,则xxx则会被识别为routeKey。
client.connect('username', 'password', on_connect, on_error, '/');
connect有四个参数
总结
我这里只是使用了一种方式，据我了解，还存在amqp、mqtt等消息协议通信。后面会继续补充。
本篇到这里结束，感谢阅读，点赞关注！拜拜、