NET Core2基于RabbitMQ对Web前端实现推送功能
NET Core2基于RabbitMQ对Web前端实现推送功能
https://www.cnblogs.com/Andre/p/10012329.html
在我们很多的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 ///
3 ///
4 ///
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
3
4
5
6
7
8
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
41
42
43
接收来自后端的消息
45
46
47
81
82
83
复制代码
3、分别运行“Lezhima.Rest”与“Lezhima.Site”程序后,效果是这个样子的,如下:
1543044548(1)
总结
1、借助RabbitMQ实现前后端通讯功能时,必需先安装RabbitMQ插件stomp,通过该插件可使RabbitMQ支持WebSocket通讯能力。而我们的后端开发人员只需通过“生产者”方法按需向MQ发送数据即可,MQ将根据routingKey广播给所有客户端(消费者)。
2、前端借助stomp.js可以简便的实现与RabbitMQ通讯,并绑定相应的routingKey后承担MQ消费者的能力,以达到前后端即时推送的效果。
NET Core2基于RabbitMQ对Web前端实现推送功能的更多相关文章
- ASP.NET Core2基于RabbitMQ对Web前端实现推送功能
在我们很多的Web应用中会遇到需要从后端将指定的数据或消息实时推送到前端,通常的做法是前端写个脚本定时到后端获取,或者借助WebSocket技术实现前后端实时通讯.因定时刷新的方法弊端很多(已不再采用 ...
- SSE(Server-sent events)技术在web端消息推送和实时聊天中的使用
最近在公司闲着没事研究了几天,终于搞定了SSE从理论到实际应用,中间还是有一些坑的. 1.SSE简介 SSE(Server-sent events)翻译过来为:服务器发送事件.是基于http协议,和W ...
- 基于Web的数据推送技术(转)
基于Web的数据推送技术 对于实时性数据显示要求比较高的系统,比如竞价,股票行情,实时聊天等,我们的解决方案有以下几种.1. HTTP请求发送模式,一般可以基于ajax的请求,比如每3秒一次访问下服务 ...
- web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...
- 我有 7种 实现web实时消息推送的方案,7种!
技术交流,公众号:程序员小富 大家好,我是小富- 我有一个朋友- 做了一个小破站,现在要实现一个站内信web消息推送的功能,对,就是下图这个小红点,一个很常用的功能. 不过他还没想好用什么方式做,这里 ...
- Web端服务器推送技术原理分析及dwr框架简单的使用
1 背景 “服务器推送技术”(ServerPushing)是最近Web技术中最热门的一个流行术语.它是继“Ajax”之后又一个倍受追捧的Web技术.“服务器推送技术”最近的流行跟“Ajax ”有着密切 ...
- Web端server推送技术原理分析及dwr框架简单的使用
1 背景 "server推送技术"(ServerPushing)是近期Web技术中最热门的一个流行术语.它是继"Ajax"之后又一个倍受追捧的Web技术.&qu ...
- Android消息推送(二)--基于MQTT协议实现的推送功能
国内的Android设备,不能稳定的使用Google GCM(Google Cloud Messageing)消息推送服务. 1. 国内的Android设备,基本上从操作系统底层开始就去掉了Googl ...
- H5 EventSource 实现web页面推送功能demo
/** * H5 EventSource 实现web页面推送功能demo */ var serverData,statusDiv; var SERVER_URL = "index.php&q ...
随机推荐
- 设计模式——适配器(Adapter)模式
概述 什么是适配器?在我们生活中的适配器比如插头转换器(中标转美标).USB接口转换器(type-c转苹果),电脑电源适配器(交流电转低电压直流)等.像这种将两者有差异的东西通过适配器使他们成为相互适 ...
- Python基础笔记系列十三:socket网络编程
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!!使用python编写一个简易的服务端程序和客户端程序,启动服务端和客户端(监 ...
- 使用Python操作memcache
Python连接memcached的库有很多,处于简单以及高效的原则,最终选择了pymemcache, 优点 完全实现了memcached text协议 对于send/recv操作可以配置timeou ...
- Konva的使用
KonvaJS 快速入门 Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果. Konva 可以高效的实现动画, 变换, 节点 ...
- iOS 和Android客户端测试区别整理ing
区别很多,慢慢发现整理,注重细节,避免遗漏 消息推送区别: 1.推送渠道: 1.1 iOS走iOS自带的渠道进行系统内推送,应用内和应用外推送无明显差别,均可以收到push信息. 1.2 安卓由于谷歌 ...
- write 系统调用耗时长的原因
前一阵子公司一部门有人叫帮忙调查,说他们write系统调用基本上是个位数微秒就返回,或者说几十us,但偶尔出现几次write系统调用达到几百毫秒和情况.大家都知道,通过vfs进行write,都是写写到 ...
- vue打包体积优化之旅
webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...
- 初识async函数
为什么会出现async函数 首先从大的方面来说,出现async函数时为了解决JS编程中的异步操作,再往具体说就是为了对以往异步编程方法的一种改进,也有人说仅仅只是Generator 函数的语法糖,这个 ...
- VB与C#的区别(转载)
由于工作原因要熟悉这两门编程语言.网上找的. VB.NET Program Structure C# Imports System Namespace Hello Clas ...
- 拒绝了对对象 'sp_OACreate' (数据库 'mssqlsystemresource',架构 'sys')的 EXECUTE 权限。
执行一个存储过程, 由于里面使用到了一些 --创建对象 EXEC sp_OACreate 'VBScript.RegExp', @objRegex OUT --设置属性 EXEC sp_OASe ...