内容简介:图1 业务场景当列表数据操作状态变更时,让上面统计区域自动更新。常见实现方式是,在“操作”方法中调用“刷新统计数据”的方法,但这种方式不可取,原因是当业务逻辑复杂时这将变得难以维护(十有八九会出Bug)。
一个简单的业务场景如:某web页面存在多个相互关联的异步获取数据展示的区域,如何优雅的实现一个区域的数据更新时异步通知其它区域进行数据刷新?
图1 业务场景
当列表数据操作状态变更时,让上面统计区域自动更新。
常见实现方式是,在“操作”方法中调用“刷新统计数据”的方法,但这种方式不可取,原因是当业务逻辑复杂时这将变得难以维护(十有八九会出Bug)。
解决的思路
当“操作”状态变更后发送一个通知(生产者),由关心这个操作的业务(消息者)订阅消息并处理。实现业务解藕,适合分布式部署。
异步消息通知方式
- Ajax 短轮询
Ajax 轮询主要通过页面端的JS定时异步刷新任务来实现数据的加载,但这种方式实时效果较差,而且对服务端的压力也较大。 - 长轮询
长轮询主要也是通过 Ajax机制,但区别于传统的Ajax应用,长轮询的服务器端会在没有数据时阻塞请求直到有新的数据产生或者请求超时才返回,之后客户端再重新建立连接获取数据。这种会长时间地占用资源,如果消息频繁发送的话会给服务端带来较大的压力。3. WebSocket 双向通信 - WebSocket 是 HTML5 中一种新的通信协议,能够实现浏览器与服务器之间全双工通信。如果浏览器和服务端都支持WebSocket协议的话,该方式实现的消息推送无疑是最高效、简洁的。并且最新版本的 IE、Firefox、Chrome等浏览器都已经支持 WebSocket 协议,Apache Tomcat 7.0.27 以后的版本也开始支持 WebSocket。
STOMP
即Simple (or Streaming) Text Orientated Messaging Protocol,简单(流)文本定向消息协议,它提供了一个可互操作的连接格式,允许STOMP客户端与任意STOMP消息代理(Broker)进行交互。STOMP协议由于设计简单,易于开发客户端,因此在多种语言和多种平台上得到广泛地应用。许多公司都提供了基于STOMP的服务器与客户端,如RabbitMQ服务端,基于浏览器的stomp.js客户端等。
RabbitMQ
AMQP,即 Advanced Message Queuing Protocol,高级消息队列协议是应用层协议的一个开放标准,为面向消息的中间件设计。消息中间件主要用于组件之间的解耦,消息的发送者无需知道消息使用者的存在,反之亦然。AMQP的主要特征是面向消息、队列和路由,可靠且安全。RabbitMQ 是一个开源的 AMQP实现,服务器端用Erlang语言编写,支持多种客户端,如:Python、 Ruby 、.NET、 Java 、JMS、C、 PHP 、ActionScript、XMPP、STOMP 等,支持 Ajax。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。
RabbitMQ Web STOMP
该插件可以理解为 HTML5 WebSocket 与 STOMP 协议间的桥接,目的也是为了让浏览器能够使用 RabbitMQ。当 RabbitMQ 消息服务器开启了 STOMP 和 Web STOMP 插件后,浏览器端就可以轻松地使用 WebSocket 或者 SockerJS 客户端实现与 RabbitMQ 服务器进行通信。
RabbitMQ Web STOMP 是对 STOMP 协议的桥接,因此其语法也完全遵循 STOMP 协议。STOMP 是基于 frame 的协议,与 HTTP 的 frame 相似。一个 Frame 包含一个 command,一系列可选的 headers 和一个 body。STOMP client 的用户代理可以充当两个角色,当然也可能同时充当:作为生产者,通过 SEND frame 发送消息到服务器;作为消费者,发送 SUBCRIBE frame 到目的地并且通过 MESSAGE frame 从服务器获取消息。
在Web页面中利用WebSocket使用STOMP协议只需要下载stomp.js即可,考虑到老版本的浏览器不支持 WebSocket,SockJS 则提供了 WebSocket 的模拟支持。
RabbitMQ安装
见:RabbitMQ在CentOS7安装
解决问题
引入js插件
<script src="jquery/jquery-1.9.1.min.js"></script> <script src="rabbitmq/sockjs-0.3.js"></script> <script src="rabbitmq/stomp.js"></script> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/bootstrap.min.js"></script>
测试页面html
<body> <div style="padding: 50px 100px"> <button class="btn btn-success" type="button"> 待出票 <span class="badge" id="notout">0</span> </button> <button class="btn btn-warning" type="button"> 已出票<span class="badge" id="out">0</span> </button> <button class="btn btn-danger" type="button"> 已退票 <span class="badge" id="break">0</span> </button> <button class="btn btn-primary" type="button"> 已取消 <span class="badge" id="cancel">0</span> </button> <table class="table"> <thead> <tr> <th>产品</th> <th>日期</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>PEK-CKG</td> <td>23/11/2017</td> <td class="status">待出票</td> <td><button class="btn btn-primary exStatus" type="button">出票</button></td> </tr> <tr> <td>CAN-CKG</td> <td>20/10/2017</td> <td class="status">待出票</td> <td><button class="btn btn-primary exStatus" type="button">出票</button></td> </tr> <tr> <td>CAN-CKG</td> <td>20/10/2017</td> <td class="status">待出票</td> <td><button class="btn btn-primary exStatus" type="button">出票</button></td> </tr> <tr> <td>CUT-PEK</td> <td>10/11/2017</td> <td class="status">已出票</td> <td><button class="btn btn-warning exStatus" type="button">退票</button></td> </tr> <tr> <td>PEK-CKG</td> <td>23/11/2017</td> <td class="status">待支付</td> <td><button class="btn btn-primary exStatus" type="button">取消</button></td> </tr> <tr> <td>PEK-CKG</td> <td>23/11/2017</td> <td class="status">待支付</td> <td><button class="btn btn-primary exStatus" type="button">取消</button></td> </tr> <tr> <td>SHA-PEK</td> <td>20/10/2017</td> <td class="status">已退票</td> <td></td> </tr> </tbody> </table> </div> </body>
页面事件绑定和数据初始化
<script type="text/javascript"> var countNotout=function(data){ //真实业务可能是ajax向后台请求数据 $('#notout').html($("td:contains('待出票')").length); }; var countOut=function(data){ //真实业务可能是ajax向后台请求数据 $('#out').html($("td:contains('已出票')").length); }; var countBreak=function(data){ //真实业务可能是ajax向后台请求数据 $('#break').html($("td:contains('已退票')").length); }; var countCancel = function(data) { //真实业务可能是ajax向后台请求数据 $('#cancel').html($("td:contains('已取消')").length); }; $(document).ready(function(){ countNotout(); countOut(); countBreak(); countCancel(); }); //事件绑定 $(".exStatus").click(function() { if ('出票' === $(this).html()) { $(this).removeClass().addClass('btn btn-warning exStatus'); $(this).parents('tr').find(".status").html('已出票'); $(this).html('退票'); //发送通知 sendMQ("doOut"); return; } if ('退票' === $(this).html()) { $(this).parents('tr').find(".status").html('已退票'); $(this).remove(); //发送通知 sendMQ("doBreak"); return; } if ('取消' === $(this).html()) { $(this).parents('tr').find(".status").html('已取消'); $(this).remove(); //发送通知 sendKeyMQ("doCancel"); return; } }); </script>
连接到RabbitMQ服务器,订阅消息通知
<script type="text/javascript"> //connection rabbitmq var username = 'kaven'; var password = 'kaven123'; // Stomp.js boilerplate if (location.search == '?ws') { var ws = new WebSocket('ws://master:15674/ws'); console.log('Using WebSocket...'); } else { var ws = new SockJS('http://master:15674/stomp'); console.log('Using SockJS...'); } // Init Client var client = Stomp.over(ws); // SockJS does not support heart-beat: disable heart-beats client.heartbeat.outgoing = 0; client.heartbeat.incoming = 0; // Declare on_connect var on_connect = function(x) { //订阅模式 client.subscribe("/exchange/amq.fanout/rabbitmq_routingkey", function(d) { countOut(d.body); }); //订阅模式 client.subscribe("/exchange/amq.fanout/rabbitmq_routingkey", function(d) { countBreak(d.body); }); //订阅模式 client.subscribe("/exchange/amq.fanout/rabbitmq_routingkey", function(d) { countNotout(d.body); }); //Direct模式 client.subscribe("/exchange/amq.direct/rabbitmq_orderCancel", function(d) { countCancel(d.body); }); }; // 定义连接失败回调函数 var on_error = function(error) { console.log(error.headers.message); }; // Conect to RabbitMQ client.connect(username, password, on_connect, on_error, '/'); var sendMQ = function(data) { client.send('/exchange/amq.fanout/rabbitmq_routingkey', {"content-type" : "text/plain"}, data); }; var sendKeyMQ = function(data) { client.send('/exchange/amq.direct/rabbitmq_orderCancel', {"content-type" : "text/plain"}, data); }; </script>
适用范围
此框架模型至少可以适用以下情况:
- 不同业务模块之间
- 不同开发语言之间
- 不同应用服务器之间
- 不同应用设备之间
以上所述就是小编给大家介绍的《基于RabbitMQ实现异步消息通知处理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 异步接收MSMQ消息
- Web开发系列(九):消息队列,异步任务
- Redis应用-异步消息队列与延时队列
- Redis应用-异步消息队列与延时队列
- Errai 4.0.1.Final 发布,异步消息传递框架
- Java秒杀系统实战系列~整合RabbitMQ实现消息异步发送
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
互联网浪尖上的女性
田玉翠 / 人民出版社 / 2017-1 / 68.00
二十三个真实、前沿的女性创业者实例,带你走进“她世界”洞悉“她经济”。《互联网浪尖上的女性》不仅仅关于创业,更是关于女性如何追逐自己的梦想,让人生更丰满、更精彩。一起来看看 《互联网浪尖上的女性》 这本书的介绍吧!