web 页面的未读消息(小红点)怎么实现比较简单,之前说过可以用 rabbitmq 的 MQTT 协议做智能家居的指令推送,里边还提到过能用 MQTT 协议做 web 的消息推送,而未读消息(小红点)功能刚好应用到实时消息推送了。

MQTT 协议就不再赘述了,没接触过的同学翻翻前边的文章温习一下吧,今天还是主要以实践为主!

web 端实时消息推送,常用的实现方式比较多,但万变不离其宗,底层基本上还是依赖于 websocketMQTT 协议也不例外。

RabbitMQ 搭建

RabbitMQ的基础搭建就不详细说了,自行百度一步一步搞问题不大,这里主要说一下两个比较重要的配置。

1、开启 mqtt 协议

默认情况下RabbitMQ是不开启MQTT 协议的,所以需要我们手动的开启相关的插件,而RabbitMQMQTT 协议分为两种。

第一种 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-mqttorg.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

鸣谢:

https://mp.weixin.qq.com/s?__biz=MzAxNTM4NzAyNg==&mid=2247487818&idx=1&sn=19393de4304e1ddd3179d0e45ec16cd7&scene=21#wechat_redirect

前端 与 RabbitMQ 实时消息推送实践的更多相关文章

  1. 未读消息(小红点),前端与 RabbitMQ实时消息推送实践,贼简单~

    前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot ...

  2. 我有 7种 实现web实时消息推送的方案,7种!

    技术交流,公众号:程序员小富 大家好,我是小富- 我有一个朋友- 做了一个小破站,现在要实现一个站内信web消息推送的功能,对,就是下图这个小红点,一个很常用的功能. 不过他还没想好用什么方式做,这里 ...

  3. 【js学习】js连接RabbitMQ达到实时消息推送

    js连接RabbitMQ达到实时消息推送 最近在自己捯饬一个网站,有一个功能是需要后端处理完数据把数据发布到MQ中,前端再从MQ中接收数据.但是前端连接MQ又成了一个问题,在网上搜了下资料,点进去一篇 ...

  4. 开源实时消息推送系统 MPush

    系统介绍 mpush,是一款开源的实时消息推送系统,采用java语言开发,服务端采用模块化设计,具有协议简洁,传输安全,接口流畅,实时高效,扩展性强,可配置化,部署方便,监控完善等特点.同时也是少有的 ...

  5. 基于socket.io的实时消息推送

    用户访问Web站点的过程是基于HTTP协议的,而HTTP协议的工作模式是:请求-响应,客户端发出访问请求,服务器端以资源数据响应请求. 也就是说,服务器端始终是被动的,即使服务器端的资源数据发生变化, ...

  6. Worktile中百万级实时消息推送服务的实现

    Worktile中百万级实时消息推送服务的实现 出自:http://blog.jobbole.com/81125/

  7. asp.net mvc 实现简单的实时消息推送

    因为项目需要,需要在网页上实现消息的推送.在百度上搜索了一下,发现实现网页上的消息推送,可以使用asp.net 中的SignalR类库,当然也可以使用H5的WebSocket  Ajax的轮回.当然此 ...

  8. 用图解&&实例讲解php是如何实现websocket实时消息推送的

    WebSocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 以前的推送技术使用 Ajax 轮询,浏览器需要不断地向服务器发送http请求来获取最新的数据,浪费很多的带 ...

  9. .netcore signalR 实时消息推送

    服务器端引入包 Install-Package Microsoft.AspNetCore.SignalR客户端引入包  npm install @aspnet/signalr <template ...

  10. python websocket Django 实时消息推送

    概述: WebSocket 是什么? WebSocket 是 HTML5 提供的一种浏览器与服务器间进行全双工通讯的协议.依靠这种协议可以实现客户端和服务器端 ,一次握手,双向实时通信. WebSoc ...

随机推荐

  1. Java笔记_成员方法传参机制

    成员方法传参机制(非常重要) Parameter(参数).Method(方法).Exercise(练习) 基本数据类型的传参机制 看一下案例,将main中的值传递给类中对象 /** * @ClassN ...

  2. LoadRunner参数和变量之间的转换

    这是用LoadRunner自定义监控Tomcat的脚本为基础而写的脚本.阐述了参数相互之间以及参数与变量之间复制传递原理.下面的代码注释是按照自己的理解写的,正确性不一定保证. Action() { ...

  3. Excel怎么把公式转成数值并复制

    直接选中复制,粘贴时选择选择性粘贴,选择数值确认

  4. 使用layui+jQuery实现点击数据修改,即点即改。

    使用layui+jQuery实现点击数据修改即可修改 首先要用到layui的官网手册 地址:https://www.layui.com/ 注意1.  此功能是在使用layui展示数据的基础上实现 3. ...

  5. windows安装和重装系统后无法识别U盘

    安装系统的方法: 1. 方案一,用大白菜制写入pe系统,但必须先准备Windows安装包 方案二,把ISO格式的系统安装包直接写入到u盘,写入U盘的方法请百度 2.开机看到电脑的logo后,按f2(不 ...

  6. 安防视频监控系统前端摄像机——DSP与SOC摄像机

    一.DSP摄像机 DSP(Digital Signal Processing)即数字信号处理,它是利用数字计算机或专用数字信号处理设备,以数值计算的方法对信号进行采集.变换.综合.估值.识别等加工处理 ...

  7. 基于MIPI的高性能成像系统

    硬件组件Digilent Genesys ZU × 1 (FPGA平台) Digilent PCAM5 × 1 (MIPI摄像头) 软件组件AMD-Xilinx Vivado 设计套件 介绍从简单的嵌 ...

  8. python 操作 ES 二、mappings

    环境 python:3.8 es:7.8.0 环境安装 pip install elasticsearch==7.8.0 from elasticsearch import Elasticsearch ...

  9. grep的正则匹配使用方式

    grep正则匹配的命令方式如下 $ grep 'pattern1\|pattern2' filename 或 $ grep -E 'pattern1|pattern2' file grep默认是区分大 ...

  10. 如何通过使用vscode工具学习ts(typescript)

    1 如果有vscode工具可自行忽略这条:如果没有vscode工具,可进入官网http://vscode.p2hp.com/进行下载,下载过程可自行百度. 2 D盘新建文件夹随意命名为TS-LEAN, ...