物联网设备数据流转之数据如何实时推送至前端：WebSocket服务端推送

最新推荐文章于 2025-05-09 08:15:00 发布
最新推荐文章于 2025-05-09 08:15:00 发布
阅读量2.2k 收藏 7
点赞数 1
分类专栏： 基于EMQX与TDengine的前后端分离项目实践 文章标签： websocket 物联网 Spring事件机制 Netty SpringBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013810234/article/details/125126461
版权
本文介绍物联网设备数据如何通过WebSocket服务端实时推送到前端。在之前的文章中，设备消息仅作打印输出，现在通过Spring事件机制，结合WebSocket，实现消息的存储和推送。选用第三方WebSocket库简化实现，包括WebSocketConfig、WebsocketService和MessageEventListener4Push等关键类的设计，实现了连接管理、消息发送和事件监听。下篇将讨论前端接收消息的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景

还记得，我们在物联网设备数据流转之实时数据从哪里来、如何转发：Node.js, MQTT, EMQX的WebHook这篇文章中，当 EMQX 的 WebHook 收到来自设备的消息时，我们当时只是简单地进行了打印输出，现在我们真正实现实时消息推送。

在前面的Spring事件及监听机制一文中我们介绍过：将 WebHook 中的消息通过 Spring 事件发送出去，然后需要定义事件监听者，本项目中有两个监听者：

  • TDengine 存储；
  • WebSocket 推送；

让我们

了解本专栏 订阅专栏 解锁全文 超级会员免费看
物联网设备数据流转之数据如何实时推送至前端：WebSocket前端接收
Heartsuit的博客
06-05 5364
在实现 前端接收前，我们先说明白一件事，为什么要使用WebSocket？这要从 协议说起，我们知道 协议只能由客户端发起，而且是短链接，这就会导致我们在服务端拿到最新的数据时，没办法第一时间通知客户端。诸如我们当前涉及物联网设备数据展示的场景，用户一般都会要求看到的设备数据是最新的，这是一个极其正常的需求。那么针对这一简单的需求，我们一般会怎么做？实际项目中，在没接触 前（讲真，在那年少无知的蛮荒时代，我们甚至让用户手动刷新页面，或者前端定时刷新页面以获取最新的设备数据，eg: 1分钟、3分钟、5分
物联网设备数据是如何流转的：基于EMQX与TDengine的前后端分离项目实践
Heartsuit的博客
04-17 8990
背景 在我写了TDengine极简实战：从采集到入库，从前端到后端，体验物联网设备数据流转这篇文章后，不少读者朋友评论、私信说可不可以提供代码参考学习下，那必须是可以的。那篇文章主要介绍了数据采集、数据传输、数据转发、数据解析、数据存储、数据查询、数据呈现、数据导出、消息推送的物联网设备数据流程过程，作为体验 TDengine 的极简实战项目，没引入过多的业务设计（复杂功能）以及异步解耦设计（消息中间件）。 在整理代码的过程中，我发现虽然整个项目并不复杂，但是涉及到的技术点较多，有必要对关键的组件进行说明
对接IoT，轻松玩转实时数据分析
逍遥子
12-06 493
随着车间数据的实时性要求越来越高，IOT数据采集功能要求日益增长，那么随之而来的各类解决方案也就顺应时势的崭露头角。通过使用专业嵌入式BI分析软件，可以轻松实现流式数据的处理，流式数据轻松对接，并且将流式数据实时展示到仪表板中。实时直观的改变数据图表，让整个仪表板更加动态。Wyn Enterprise V5.0 Update1中所带来的流式数据，就是为了解决这一环节的数据痛点。通过对接设备源，工厂传感器，社交媒体流，服务器敏感数据收集，空气质量检测点数据发送等等一系列高频次数据源。第一时间对接数据，完成可视
数据实时推送至前端的主流方法总结
weixin_45809780的博客
02-06 1513
在 Java 后台实现数据实时推送至前端的主流方法主要有以下几种，每种方法适用于不同的场景，具体选择需根据需求权衡。根据具体需求选择最合适的技术栈，必要时可组合使用（如 WebSocket 用于核心功能，SSE 用于辅助通知）。：HTTP/2 允许服务器主动推送资源，但通常用于静态资源预加载，动态数据推送需结合其他技术（如 gRPC）。：客户端发起请求后，服务器保持连接直到有数据或超时，返回后客户端立即重新请求。：基于TCP的双向通信协议，建立持久化连接后，服务端和客户端可主动推送数据。
TDengine极简实战：从采集到入库，从前端到后端，体验物联网设备数据流转
Heartsuit的博客
01-09 1万+
作者：牛晓青 背景 我们的项目涉及物联网相关业务，由于一开始的年少无知，传感器数据采用了 MySQL 进行存储，经过近两年的数据累积，目前几个核心表单表数据已过亿，虽然通过索引优化、 SQL 优化以及读写分离等措施，勉强满足基本的查询，能在秒级给出数据；但是数据量还在持续增加，当面对用户多维度的统计需求，在实现上、效率上总是那么不尽如人意。。 大概是2021年的6月份，一次偶然的机会，我在一个技术交流群中了解到涛思数据。后来花了三五天，把 TDengine 官网的文档过了一遍，并通过实际代码体验了一番，大大
物联网设备数据流转之前后端数据交互与展示：Layout, Cascader, Card, Dialog, Table, Pagination
Heartsuit的博客
05-22 824
背景 搭建好前端服务框架后，我们可以在框架以及上一篇搭建的脚手架上着手进行前端页面的设计实现以及服务端接口对接。 从跟各位读者的交流过程中我发现，大家其实是被我实现的那个简单的前端页面给吸引了，因为人毕竟是视觉动物，人们还是习惯从直观的事物上快速获取信息。如果你是一名后端工程师，每天就是写一堆接口，无法向其他人来进行生动形象地展示，这也是我建议每个后端工程师都稍微接触下前端技术的原因。关于前端，我曾经做过几个简单的小项目，为简化难度，除了 Loading 加载组件与 Echarts 图表组件作为独立的组件外
IoT 设备指令推送：可靠性与效率的高级设计
最新发布
moton2017的博客
05-09 482
一个高可用、可扩展、可追踪、支持离线缓存的指令推送系统必须具备一系列高级设计特性。以下是完整的 IoT 指令推送高级架构设计要点：
【泛微OA系统消息机制】：消息推送与接收处理的全面攻略
文章首先概述了泛微OA系统消息机制的基本概念与实现原理，继而深入分析了消息推送的策略、技术细节与编程实践，并探讨了消息接收处理的架构原理和关键技术。在高级应用方面，文中着重讨论了消息加密、安全机制以及...
vue + websocket + nodejs 实现数据推送
YhWyl527的博客
12-06 963
- vue代码 - 需要安装 $ cnpm install websocket --save <template> <div id="app"> </div> </template> <script> export default { data() { return {}; }, methods: { initWebSocket() { this.websock = new W.
一份全面前端知识总结
工匠精神coding，终生学习
06-12 5064
总结这份前端知识主要包含以下几部分： 1.开发工具 vscode 常用插eslint/npm/prettier(代码风格)/vetur/liveserver/ant desgin vue/stylelint/element ui helper chrome浏览器 nodejs vue-devtools:调试vue yarn/npm:依赖包管理 webpack:前端资源加载打包 根据模块规则生成静态资源； 安...
vue实时数据流处理 1、创建webscoket接口
GongWei_的博客
08-20 907
了解过的都知道，webscoket是可以让服务器直接像浏览器推送数据，实现 实时传输， 看看先官网原生实例： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script type="text/javascript"> function WebS
【物联网项目系列】springboot 实现mqtt物联网
尽力漂亮的博客
01-15 4607
整合druid pom <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.10</version> </dependency> druid-bean.xml
mqtt+ springboot +websocket 的实现
rigou11的博客
03-18 2186
今天上班看了一下boss招聘，发现要做物联网工程师，差不多都要求会mqtt和websocket。 一开始了解websocket是因为mqtt吧，我的后台从发布者那边获得到消息，然后我就很正常想要把数据传到前端，让前端去渲染（妈的，这边前端还是我）。但是我发现这是客户端主动向服务端发请求，这该咋发啊，毕竟我是写好controller接口，让前端调用，这肯定不是主动的。百度了才知道，http的缺点是只能让服务端主动联系客户端，这相当于什么，你不能主动联系渣男啊！最后就发现websocket！客户端可以主动找服
springboot集成MQTT,物联网通信
Alan_ran的博客
11-06 2506
一、MQTT基础理论了解 目前在做的项目里边涉及到了物联网这一块，在进行服务器和设备端通信的时候，用到了mqtt这一通信协议，既然要用到一门技术，首先要了解技术的基础原理->(3条消息) MQTT--入门_似水流年-优快云博客_mqtthttps://blog.youkuaiyun.com/qq_28877125/article/details/78325003 二、搭建MQTT服务器并模拟简单通信 一脸懵逼的看完原理之后，一脸懵逼的出来了，莫慌，我们可以通过接下来的简单操作快...
.Springboot+mqtt物联网开发
PJ老文的博客
03-25 8028
1.开篇聊聊，本人之前从事通信软件开发，对高并发和限流等有一定的实战，不过最近做物联网项目，这里聊聊怎么用mqtt进行双向通信，后面大家对通信开发有兴趣的也可以关注下本人博客！！！ 进入主题： 目前市面上有几种mqtt的开源项目，本人觉得emqtt这款开源的项目好用，是EMQTT， Erlang MQTT消息服务器简称EMQTT。 EMQTT是采用Erlang语言开发，全面支持...
springboot简单接入websocket
zwrlj527的专栏
05-06 1882
序 最近一个项目又重启了，之前支付了要手动点击已付款，所以这次想把这个不友好体验干掉。另外以后的扫码登录什么的都需要这个服务支持。之前扫码登录这块用的mqtt，时间上是直接把mqtt的连接信息返回给前端。前端连接mqtt服务，消费信息。这次不想这样弄了，准备接入websocket。 一、环境说明 我这里是springBoot2.4.5 + springCloud2020.1.2，这里先从springBoot对接开始，逐步再增加深度，不过可能时间不够，就简单接入能满足现在业务场景就stop。没办法，从入职就开
利用javacv解析rtsp流，通过websocket将视频帧传输到web前端显示成视频，更新最新方式
热门推荐
IT_CREATE的博客
04-20 1万+
javacv拉取rtsp流通过websocket传输到web前端显示 说明一下，我这里只是介绍一下如何实现的一个小demo，因为我做的这个rtsp解析主要是一个测试工具，简单说一下需求，其他的服务器为我提供了了一个rtsp流，我要做的就是将这个视频流解析在web端进行展示，我的这个需求很简单，只是作为一个测试工具来说，并不是商业版本，所以为了追求效率，并且也不会遇到什么高并发的情况，只是提供这样...
消息通讯-MQTT WebHook&SpringBoot案例
Knight_Key的博客
11-17 1919
1、EMQX WebHook 是由 emqx_web_hook (opens new window)插件提供的将EMQX中的钩子事件通知到某个Web服务的功能。2、WebHook 的内部实现是基于钩子，借助 Webhook 可以完成设备在线、上下线记录，订阅与消息存储、消息送达确认等诸多业务。3、它通过在钩子上的挂载回调函数，获取到 EMQX 中的各种事件，并转发至 emqx_web_hook 中配置的 Web 服务器。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Heartsuit

别说什么鼓励，这就是互联网乞讨

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值