欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET Core2基于RabbitMQ对Web前端实现推送功能

程序员文章站 2022-05-14 08:25:25
在我们很多的Web应用中会遇到需要从后端将指定的数据或消息实时推送到前端,通常的做法是前端写个脚本定时到后端获取,或者借助WebSocket技术实现前后端实时通讯。因定时刷新的方法弊端很多(已不再采用),所以基于WebSocket技术实现的通讯方案正越来越受大家喜爱,于是在ASP.NET中就有了鼎鼎... ......

在我们很多的web应用中会遇到需要从后端将指定的数据或消息实时推送到前端,通常的做法是前端写个脚本定时到后端获取,或者借助websocket技术实现前后端实时通讯。因定时刷新的方法弊端很多(已不再采用),所以基于websocket技术实现的通讯方案正越来越受大家喜爱,于是在asp.net中就有了鼎鼎大名的signalr。但signalr不是咱们这里的主角,这里将给大家介绍另一套基于websocket的前后端通讯方案,可以给大家在应用中多一个选择。

 

准备

在开始动手前,咱们先简单介绍下方案的组成部分,如下:

rabbitmq:是一个成熟的mq队列服务,由 erlang 语言开发的 amqp 的开源实现。这里用来接收后端的指令并广播到前端(基于topic模式)。关于更多rabbitmq的实现可以查看我另一篇文章,传送门

rabbitmq插件stomp:是一个让rabbitmq支持stomp协议的插件,必需安装后才能通过rabbitmq实现前端通讯。安装说明在此:

stomp.js:是一个基于stomp协议的客户端实现,底层基于websocket通讯协议。这里用于前端实现websocket通讯。官网地址:

lezhima.rest:是一个基于asp.net core2的web api后端程序,用来模拟向前端发送指令。

lezhima.site:是一个纯前端技术的前端程序,用来模拟前端实时接收后台的指令。

 

实现

如上面所述,我们已经清楚了整个实现思路,那么下面就来看看具体的代码实现吧。

1、首先来看看lezhima.rest的mq生产者代码,如下:

  1 /// <summary>
  2 /// mq生产者,采用topic模式推送指定内容
  3 /// </summary>
  4 /// <param name="objtext"></param>
  5 public static void pushmessage(string objtext)
  6 {
  7     //创建mq连接工厂
  8     var factory = new connectionfactory()
  9     {
 10         hostname = "localhost",
 11         port = 5672,
 12         username = "fans",
 13         password = "123456"
 14     };
 15     //创建mq连接
 16     using (var connection = factory.createconnection())
 17     using (var channel = connection.createmodel())
 18     {
 19         //绑定交换器
 20         channel.exchangedeclare(exchange: "topic/test", type: "topic");
 21         var body = encoding.utf8.getbytes(objtext);
 22         //对指定routingkey发送内容
 23         channel.basicpublish(exchange: "amq.topic",
 24                             routingkey: "test",
 25                             basicproperties: null,
 26                             body: body);
 27     }
 28 }

 

2、lezhima.site的前端代码,如下:

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <link href="main.css" rel="stylesheet" type="text/css" />
  6     <script src="script/jquery.js"></script>
  7     <script src="stomp.js"></script>
  8     <style>
  9 
 10         .box {
 11             width: 440px;
 12             float: left;
 13             margin: 0 20px 0 20px;
 14         }
 15         .box div, .box input {
 16             border: 1px solid;
 17             -moz-border-radius: 4px;
 18             border-radius: 4px;
 19             width: 100%;
 20             padding: 5px;
 21             margin: 3px 0 10px 0;
 22         }
 23 
 24         .box div {
 25             border-color: grey;
 26             height: 300px;
 27             overflow: auto;
 28         }
 29 
 30         div code {
 31             display: block;
 32         }
 33 
 34         #first div code {
 35             -moz-border-radius: 2px;
 36             border-radius: 2px;
 37             border: 1px solid #eee;
 38             margin-bottom: 5px;
 39         }
 40     </style>
 41 </head>
 42 <body lang="en">
 43     <div id="first" class="box">
 44         <h2>接收来自后端的消息</h2>
 45         <div></div>
 46     </div>
 47     <script>
 48         var has_had_focus = false;
 49         //封装个接收呈现方法
 50         var pipe = function (el_name) {
 51             var div = $(el_name + ' div');
 52             var print = function (m) {
 53                 div.append($("<code>").text('后端的指令:'+ m));
 54                 div.scrolltop(div.scrolltop() + 10000);
 55             };
 56             return print;
 57         };
 58 
 59         //rabbitmq的服务地址
 60         var mqurl = "ws://localhost:15674/ws";
 61         //声明个stompjs客户端
 62         var client = stomp.client(mqurl);
 63 
 64         var print_first = pipe('#first', function (data) {
 65             client.send('/topic/test', { "content-type": "text/plain" }, data);
 66         });
 67 
 68         //监听连接事件
 69         var on_connect = function (x) {
 70             id = client.subscribe("/topic/test", function (d) {
 71                 print_first(d.body);
 72             });
 73         };
 74         var on_error = function () {
 75             console.log('error');
 76         };
 77         //连接mq
 78         client.connect('fans', '123456', on_connect, on_error, '/');
 79 
 80     </script>
 81 </body>
 82 </html>
 83 

 

3、分别运行“lezhima.rest”与“lezhima.site”程序后,效果是这个样子的,如下:

 

总结

1、借助rabbitmq实现前后端通讯功能时,必需先安装rabbitmq插件stomp,通过该插件可使rabbitmq支持websocket通讯能力。而我们的后端开发人员只需通过“生产者”方法按需向mq发送数据即可,mq将根据routingkey广播给所有客户端(消费者)。

2、前端借助stomp.js可以简便的实现与rabbitmq通讯,并绑定相应的routingkey后承担mq消费者的能力,以达到前后端即时推送的效果。

 

声明

本文为作者原创,转载请备注出处与保留原文地址,谢谢。如文章能给您带来帮助,请点下推荐或关注,感谢您的支持!