ASP.NET Core2基於RabbitMQ對Web前端實現推送功能
在我們很多的Web應用中會遇到需要從後端將指定的資料或訊息實時推送到前端，通常的做法是前端寫個指令碼定時到後端獲取，或者藉助Socket/">WebSocket技術實現前後端實時通訊。因定時重新整理的方法弊端很多（已不再採用），所以基於WebSocket技術實現的通訊方案正越來越受大家喜愛，於是在ASP.NET中就有了鼎鼎大名的Signalr。但Signalr不是咱們這裡的主角，這裡將給大家介紹另一套基於WebSocket的前後端通訊方案，可以給大家在應用中多一個選擇。
準備
在開始動手前，咱們先簡單介紹下方案的組成部分，如下：
RabbitMQ：是一個成熟的MQ佇列服務，由 Erlang 語言開發的 AMQP 的開源實現。這裡用來接收後端的指令並廣播到前端（基於topic模式）。關於更多RabbitMQ的實現可以檢視我另一篇文章，傳送門
RabbitMQ外掛stomp：是一個讓RabbitMQ支援stomp協議的外掛，必需安裝後才能通過RabbitMQ實現前端通訊。安裝說明在此： ofollow,noindex">http://www.rabbitmq.com/stomp.html
stomp.js：是一個基於stomp協議的客戶端實現，底層基於WebSocket通訊協議。這裡用於前端實現WebSocket通訊。官網地址： https://github.com/jmesnil/stomp-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連線工廠
8var factory = new ConnectionFactory()
9{
10HostName = "localhost",
11Port = 5672,
12UserName = "fans",
13Password = "123456"
14};
15//建立MQ連線
16using (var connection = factory.CreateConnection())
17using (var channel = connection.CreateModel())
18{
19//繫結交換器
20channel.ExchangeDeclare(exchange: "topic/test", type: "topic");
21var body = Encoding.UTF8.GetBytes(objText);
22//對指定routingkey傳送內容
23channel.BasicPublish(exchange: "amq.topic",
24routingKey: "test",
25basicProperties: null,
26body: 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 {
11width: 440px;
12float: left;
13margin: 0 20px 0 20px;
14}
15.box div, .box input {
16border: 1px solid;
17-moz-border-radius: 4px;
18border-radius: 4px;
19width: 100%;
20padding: 5px;
21margin: 3px 0 10px 0;
22}
23
24.box div {
25border-color: grey;
26height: 300px;
27overflow: auto;
28}
29
30div code {
31display: block;
32}
33
34#first div code {
35-moz-border-radius: 2px;
36border-radius: 2px;
37border: 1px solid #eee;
38margin-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>
48var has_had_focus = false;
49//封裝個接收呈現方法
50var pipe = function (el_name) {
51var div = $(el_name + ' div');
52var print = function (m) {
53div.append($("<code>").text('後端的指令：'+ m));
54div.scrollTop(div.scrollTop() + 10000);
55};
56return print;
57};
58
59//RabbitMQ的服務地址
60var mqUrl = "ws://localhost:15674/ws";
61//宣告個Stompjs客戶端
62var client = Stomp.client(mqUrl);
63
64var print_first = pipe('#first', function (data) {
65client.send('/topic/test', { "content-type": "text/plain" }, data);
66});
67
68//監聽連線事件
69var on_connect = function (x) {
70id = client.subscribe("/topic/test", function (d) {
71print_first(d.body);
72});
73};
74var on_error = function () {
75console.log('error');
76};
77//連線MQ
78client.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消費者的能力，以達到前後端即時推送的效果。
宣告
本文為作者原創，轉載請備註出處與保留原文地址，謝謝。如文章能給您帶來幫助，請點下推薦或關注，感謝您的支援！