未读消息(小红点),前端 与 RabbitMQ 实时消息推送实践,贼简单~
前几天粉丝群里有个小伙伴问过:web
页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢。
之前在 《springboot + rabbitmq 做智能家居》 中说过可以用 rabbitmq
的 MQTT
协议做智能家居的指令推送,里边还提到过能用 MQTT
协议做 web
的消息推送,而未读消息(小红点
)功能刚好应用到实时消息推送了。
MQTT
协议就不再赘述了,没接触过的同学翻翻前边的文章温习一下吧,今天还是主要以实践为主!
web
端实时消息推送,常用的实现方式比较多,但万变不离其宗,底层基本上还是依赖于 websocket
,MQTT
协议也不例外。
RabbitMQ 搭建
RabbitMQ
的基础搭建就不详细说了,自行百度一步一步搞问题不大,这里主要说一下两个比较重要的配置。
1、开启 mqtt 协议
默认情况下RabbitMQ
是不开启MQTT
协议的,所以需要我们手动的开启相关的插件,而RabbitMQ
的MQTT
协议分为两种。
第一种 rabbitmq_mqtt
提供与后端服务交互使用,对应端口1883
。
rabbitmq-plugins enable rabbitmq_mqtt
第二种 rabbitmq_web_mqtt
提供与前端交互使用,对应端口15675
。
rabbitmq-plugins enable rabbitmq_web_mqtt
在 RabbitMQ
管理后台看到如下的显示,就表示MQTT
协议开启成功,到这中间件环境就搭建完毕了。
协议对应端口号
使用MQTT
协议默认的交换机 Exchange
为 amp.topic
,而我们订阅的主题会在 Queues
注册一个客户端队列,路由 Routing key
就是我们设置的主题。
交换机信息
服务端消息发送
web
端实时消息推送一般都是单向的推送,前端接收服务端推送的消息显示即可,所以就只实现消息发送即可。
1、mqtt 客户端依赖包
引入 spring-integration-mqtt
、org.eclipse.paho.client.mqttv3
两个工具包实现
<!--mqtt依赖包-->
<dependency>
<groupId>org.springframework.integration</groupId>
<artifactId>spring-integration-mqtt</artifactId>
</dependency>
<dependency>
<groupId>org.eclipse.paho</groupId>
<artifactId>org.eclipse.paho.client.mqttv3</artifactId>
<version>1.2.0</version>
</dependency>
2、消息发送者
消息的发送比较简单,主要是应用到 @ServiceActivator
注解,需要注意messageHandler.setAsync
属性,如果设置成 false
,关闭异步模式发送消息时可能会阻塞。
@Configuration
public class IotMqttProducerConfig {
@Autowired
private MqttConfig mqttConfig;
@Bean
public MqttPahoClientFactory mqttClientFactory() {
DefaultMqttPahoClientFactory factory = new DefaultMqttPahoClientFactory();
factory.setServerURIs(mqttConfig.getServers());
return factory;
}
@Bean
public MessageChannel mqttOutboundChannel() {
return new DirectChannel();
}
@Bean
@ServiceActivator(inputChannel = "iotMqttInputChannel")
public MessageHandler mqttOutbound() {
MqttPahoMessageHandler messageHandler = new MqttPahoMessageHandler(mqttConfig.getServerClientId(), mqttClientFactory());
messageHandler.setAsync(false);
messageHandler.setDefaultTopic(mqttConfig.getDefaultTopic());
return messageHandler;
}
}
MQTT
对外提供发送消息的 API
时,需要使用 @MessagingGateway
注解,去提供一个消息网关代理,参数 defaultRequestChannel
指定发送消息绑定的channel
。
可以实现三种API
接口,payload
为发送的消息,topic
发送消息的主题,qos
消息质量。
@MessagingGateway(defaultRequestChannel = "iotMqttInputChannel")
public interface IotMqttGateway {
// 向默认的 topic 发送消息
void sendMessage2Mqtt(String payload);
// 向指定的 topic 发送消息
void sendMessage2Mqtt(String payload,@Header(MqttHeaders.TOPIC) String topic);
// 向指定的 topic 发送消息,并指定服务质量参数
void sendMessage2Mqtt(@Header(MqttHeaders.TOPIC) String topic, @Header(MqttHeaders.QOS) int qos, String payload);
}
前端消息订阅
前端使用与服务端对应的工具 paho-mqtt
mqttws31.js
实现,实现方式与传统的 websocket
方式差不多,核心方法 client = new Paho.MQTT.Client
和 各种监听事件,代码比较简洁。
注意:要保证前后端 clientId
的全局唯一性,我这里就简单用随机数解决了
<script type="text/javascript">
// mqtt协议rabbitmq服务
var brokerIp = location.hostname;
// mqtt协议端口号
var port = 15675;
// 接受推送消息的主题
var topic = "push_message_topic";
// mqtt连接
client = new Paho.MQTT.Client(brokerIp, port, "/ws", "clientId_" + parseInt(Math.random() * 100, 10));
var options = {
timeout: 3, //超时时间
keepAliveInterval: 30,//心跳时间
onSuccess: function () {
console.log(("连接成功~"));
client.subscribe(topic, {qos: 1});
},
onFailure: function (message) {
console.log(("连接失败~" + message.errorMessage));
}
};
// 考虑到https的情况
if (location.protocol == "https:") {
options.useSSL = true;
}
client.connect(options);
console.log(("已经连接到" + brokerIp + ":" + port));
// 连接断开事件
client.onConnectionLost = function (responseObject) {
console.log("失去连接 - " + responseObject.errorMessage);
};
// 接收消息事件
client.onMessageArrived = function (message) {
console.log("接受主题: " + message.destinationName + "的消息: " + message.payloadString);
$("#arrivedDiv").append("<br/>"+message.payloadString);
var count = $("#count").text();
count = Number(count) + 1;
$("#count").text(count);
};
// 推送给指定主题
function sendMessage() {
var a = $("#message").val();
if (client.isConnected()) {
var message = new Paho.MQTT.Message(a);
message.destinationName = topic;
client.send(message);
}
}
</script>
测试
前后端的代码并不多,接下来我们测试一下,弄了个页面看看效果。
首先用 postman
模拟后端发送消息
http://127.0.0.1:8080/fun/sendMessage?message=我是程序员内点事&topic=push_message_topic
模拟发送消息
再看一下前端订阅消息的效果,看到消息被实时推送到了前端,这里只做了未读消息数量统计,一般还会做未读消息详情列表。
实时消息推送动图
总结
未读消息是一个十分常见的功能,不管是 web
端还是移动端系统都是必备的模块,MQTT
协议只是其中的一种实现方式,还是有必要掌握一种方法。具体用什么工具实现还是要看具体的业务场景和学习成本,像我用RabbitMQ
做还考虑到一些运维成本在里边。
本文完整代码地址:https://github.com/chengxy-nds/Springboot-Notebook/tree/master/springboot-mqtt-messagepush
- 使用Topshelf 5步创建Windows 服务
- TGM Plugin Activation:为WordPress 主题添加“插件推荐安装”功能
- [腾讯社区开放平台]介绍开放授权协议-OAuth
- HTML5规范的本地存储
- ASP.NET Web API 处理架构
- ASP.NET MVC 4中的单页面应用程序
- [信息安全] 4.一次性密码 && 身份认证三要素
- 拥抱大数据时代
- 腾讯社区开放平台.NET SDK在Mono下运行
- Redis Web界面管理工具
- [信息安全] 3.HTTPS工作流程
- 初探css3
- QQ互联OAuth2.0 .NET SDK 发布以及网站QQ登陆示例代码
- 如何找出被黑客攻击后篡改的WordPress 文件?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python按照list dict key进行排序过程解析
- Java并发编程的艺术(一)
- Python3.7 读取音频根据文件名生成脚本的代码
- python如何判断IP地址合法性
- 从*Application.java解读SpringBoot
- django实现后台显示媒体文件
- 服务发现与消费--Eureka与Ribbon的联手出击
- 自我加戏,在自闭的边缘尝试高可用的Eureka
- 视频直播系统源码,图片叠加
- SpringCloud初体验--Hello Eureka
- Android自定义View实现水平带数字百分比进度条
- AndResGuard编译速度优化
- Android自定义带拼音音调Textview
- Android仿音乐播放器带进度的播放暂停按钮
- 一个比较自闭的SpringIOC问题