本文转载自微信公众号《Java极客技术》，作者鸭血范。转载本文请联系Java极客技术公众号。还记得阿芬给大家讲过经典实用的RabbitMQ以及将其集成到SpringBoot项目中的案例吗？最近阿芬的朋友问我，公司安排他去研究如何在前端实现RabbitMQ。实时监控发送消息，而这也涉及到阿凡的知识盲点，于是阿凡开始了学习之路，接下来跟着阿凡学习如何在前端监控Rab??bitMQ发送消息，从而在自己的项目中实现功能。RabbitMQ支持的协议stomp协议是Simple(orStreaming)TextOrientedMessagingProtocol，它提供了一种可互操作的连接格式，允许STOMP客户端与任何STOMP消息代理（Broker）进行交互。STOMP协议由于其简单的设计和易于客户端开发而被广泛应用于多种语言和平台。下一篇我们主要讲一下stomp是如何监控Rab??bitMQ的。stomp协议的前身是TTMP协议（一种简单的基于文本的协议），它是为消息中间件设计的。这句话说的是专门为消息中间件设计的。其实不是针对RabbitMQ在前端的使用，而是针对整个消息中间件的使用。2.还有一个常用的mqtt协议，就是mqtt协议。mqtt协议的全称（MessageQueuingTelemetryTransport，消息队列遥测传输协议）是一种基于发布/订阅模型的轻量级通信。协议，建立在TCP/IP协议之上，IBM于1999年发布，最新版本为v3.1.1。mqtt协议属于应用层协议，也就是说只要支持TCP/IP协议栈，就可以使用mqtt.RabbitMQ开启stomp协议。安装RabbitMQ的教程就不再给大家讲解了。毕竟百度上有很多文章告诉你如何安装RabbitMQ，不管是linux还是windows，你只需要注意一点，先安装erlang语言支持，否则安装不了RabbitMQ。打开Stomp协议：rabbitmq-pluginsenablerabbitmq_web_stomprabbitmq-pluginsenablerabbitmq_web_stomp_examples#Restartservicerabbitmq-serverstop&&servicerabbitmq-serverstart当我们启用它的时候，我们就可以在我们的RabbitMQ中看到，如图：可以看到我们正确启用之后，在RabbitMQ控制台中，我们可以看到http/web-stomp端口为15674，接下来我们开始写一个案例进行测试。前端Stomp监听RabbitMQ。如果这时候我们向消息队列发送消息，那么他就会在页面上显示我们需要的内容。让我们看看代码是如何写的。if(typeofWebSocket=='undefined'){console.log('不支持websocket')}//初始化ws对象varws=newWebSocket('ws://localhost:15674/ws');//获取Stompclientobjectvarclient=Stomp.over(ws);//定义连接成功回调函数varon_connect=function(x){//data.body为接收到的数据client.subscribe("/Fanout_Exchange/testMessage",function(data){varmsg=data.body;alert("Receiveddata:"+msg);});};//定义错误时的回调函数varon_error=function(){console.log('连接错误，请重试');};//connectionRabbitMQclient.connect('guest','guest',on_connect,on_error,'/');console.log(">>>RabbitMQ连接成功，测试正式开始");而且这里写的内容是比较有意思的，因为很多人会发现你怎么写都行不通。那是因为没有完全的了解。阿芬终于总结出了Stomp的用法。总结1./exchange/(exchangeName)对于SUBCRIBEframe，destination一般是/exchange/(exchangeName)/[/pattern]的形式。destination会创建一个唯一的、自动删除的queue，命名为（exchangeName），并根据pattern将queue绑定到给定的exchange上，实现对queue的消息订阅。对于SEND帧，目的地通常采用/exchange/(exchangeName)/[/routingKey]的形式。在这种情况下，消息将发送到定义的交换器，并指定routingKey。2./queue/(queueName)对于SUBCRIBEframe，目的端会定义(queueName)的共享队列，实现对队列的消息订阅。对于SEND帧，destination只会在第一次发送消息时定义（queueName）的共享队列。消息会发送到默认的exchange，routingKey为(queueName)。3./amq/queue/(queueName)在这种情况下，SUBCRIBEframe和SENDframe都不会生成队列。但是如果队列不存在，SUBCRIBE框架就会报错。对于SUBCRIBE帧，目的地将实现对队列(queueName)的消息订阅。对于SEND帧，消息会通过默认的exhcange直接发送到队列（queueName）。4./topic/(topicName)为SUBCRIBEframe，destination根据routingkey(topicName)创建一个自动删除的非持久队列绑定到amq.topicexchange，同时实现对队列的订阅时间。对于SEND帧，消息将发送到amq.topicexchange，routingKey是（topicName）。前端如何监听RabbitMQ消息，你学会了吗？代码参考RabbitMQ开通STOMP通道
