ASP.NET Core2基于RabbitMQ对Web前端实现推送功能
在我們很多的Web應用中會遇到需要從后端將指定的數據或消息實時推送到前端，通常的做法是前端寫個腳本定時到后端獲取，或者借助WebSocket技術實現前后端實時通訊。因定時刷新的方法弊端很多（已不再采用），所以基于WebSocket技術實現的通訊方案正越來越受大家喜愛，于是在ASP.NET中就有了鼎鼎大名的Signalr。但Signalr不是咱們這里的主角，這里將給大家介紹另一套基于WebSocket的前后端通訊方案，可以給大家在應用中多一個選擇。
?
準備
在開始動手前，咱們先簡單介紹下方案的組成部分，如下：
RabbitMQ：是一個成熟的MQ隊列服務，由 Erlang 語言開發的 AMQP 的開源實現。這里用來接收后端的指令并廣播到前端（基于topic模式）。關于更多RabbitMQ的實現可以查看我另一篇文章，傳送門
RabbitMQ插件stomp：是一個讓RabbitMQ支持stomp協議的插件，必需安裝后才能通過RabbitMQ實現前端通訊。安裝說明在此：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連接工廠 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消費者的能力，以達到前后端即時推送的效果。
?
聲明
本文為作者原創，轉載請備注出處與保留原文地址，謝謝。如文章能給您帶來幫助，請點下推薦或關注，感謝您的支持！
?
轉載于:https://www.cnblogs.com/Miidy/p/10012329.html
總結
以上是生活随笔為你收集整理的ASP.NET Core2基于RabbitMQ对Web前端实现推送功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ThinkPHP3验证码、文件上传、缩略
- 下一篇： .Net常用正则判断方法