本篇如何讲述前端通过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
前端实现
<!DOCTYPEhtml><html><head><scriptsrc="https://code.jquery.com/jquery-3.4.1.min.js"></script><scriptsrc="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><linkhref="main.css"rel="stylesheet"type="text/css"/></head><bodylang="en"><h1><ahref="index.html">RabbitMQ Web STOMP Examples</a> > Echo Server</h1><divid="first"class="box"><h2>Received</h2><div></div><form><inputautocomplete="off"value="Type here..."></input></form></div><divid="second"class="box"><h2>Logs</h2><div></div></div><script>var has_had_focus =false;varpipe=function(el_name, send){var div =$(el_name +' div');var inp =$(el_name +' input');var form =$(el_name +' form');varprint=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('');returnfalse;});}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);});varon_connect=function(x){
id = client.subscribe(channelName ,function(d){print_first(d.body);});};varon_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等消息协议通信。后面会继续补充。
本篇到这里结束，感谢阅读，点赞关注！拜拜、
本文转载自: https://blog.csdn.net/xiaoliu_alone/article/details/141416400
版权归原作者 雅闲人 所有， 如有侵权，请联系我们删除。
版权归原作者 雅闲人 所有， 如有侵权，请联系我们删除。