ASP.NET Core2基于RabbitMQ对Web前端实现推送功能
在我们很多的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消费者的能力，以达到前后端即时推送的效果。
声明
本文为作者原创，转载请备注出处与保留原文地址，谢谢。如文章能给您带来帮助，请点下推荐或关注，感谢您的支持！