websocket推送消息,模拟推送

上一篇文章:什么是webSocket?以及它的一些相关理论知识

背景:

MQTT 的发布/订阅模式与 WebSocket 的双向通信特性相结合。

通过将 MQTT 与 WebSocket 结合使用,可以在 Web 应用中实现高效、实时的消息传输,特别适用于需要实时数据更新的应用场景。

效果展示:

一、MQTT工具的使用:

MQTT 客户端的操作界面:

简化了初始化一个MQTT对象的代码书写。

MQTT客户端的操作步骤:

1.双击运行

2.打开界面,连接服务器

3.配置参数

4.订阅消息

 

5.发布消息

6.MQTT的历史记录

MQTT的代码示例:

前端使用 MQTT.js 库

MQTT.js 是一个功能强大的 MQTT 客户端库,支持在 Node.js 和浏览器中使用。下面是一个简单的示例,展示如何在浏览器中使用 MQTT over WebSocket。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MQTT over WebSocket Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/4.2.6/mqtt.min.js"></script>
</head>
<body><h1>MQTT over WebSocket Example</h1><div><label for="message">Message:</label><input type="text" id="message"><button onclick="sendMessage()">Send</button></div><ul id="messages"></ul><script>// 连接到 MQTT 代理var client = mqtt.connect('ws://localhost:8083');// 当连接建立时触发client.on('connect', function () {console.log('Connected to MQTT broker');// 订阅主题client.subscribe('test/topic', function (err) {if (!err) {console.log('Subscribed to test/topic');}});});// 当接收到消息时触发client.on('message', function (topic, message) {// 将消息添加到页面var msg = document.createElement('li');msg.textContent = topic + ": " + message.toString();document.getElementById('messages').appendChild(msg);});// 发送消息function sendMessage() {var message = document.getElementById('message').value;client.publish('test/topic', message);}</script>
</body>
</html>

 示例解释:

  • 引入 MQTT.js 库

    • 通过 CDN 引入 MQTT.js 库。
  • 连接到 MQTT 代理

    • 使用 mqtt.connect('ws://localhost:8083') 连接到启用了 WebSocket 的 MQTT 代理。
  • 订阅主题

    • 在连接建立后,订阅 test/topic 主题。
  • 接收消息

    • 通过 client.on('message', function (topic, message) { ... }) 处理接收到的消息,并将其显示在页面上。
  • 发送消息

    • 使用 client.publish('test/topic', message)test/topic 主题发送消息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/43928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24/7/10总结

flex布局 父项常见属性 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align-items:设置侧轴上的子元素的排列方式&#xff08;单行&#xff09; 拉伸要把子盒子里的高度给去掉 如果两个align-items都是center并且主轴是y轴就是这种效果…

Java | Leetcode Java题解之第225题用队列实现栈

题目&#xff1a; 题解&#xff1a; class MyStack {Queue<Integer> queue;/** Initialize your data structure here. */public MyStack() {queue new LinkedList<Integer>();}/** Push element x onto stack. */public void push(int x) {int n queue.size();…

操作系统:信号究竟是什么?如何产生?

OS信号 一、信号的概念二、信号的产生1&#xff09;终端按键产生信号1、 前台进程、后台进程2、验证终端按键是否产生信号 2&#xff09;调用系统函数向进程发信号3&#xff09;硬件异常产生信号1、浮点数溢出&#xff0c;CPU产生信号2 浮点数溢出&#xff0c;产生信号原理3. 空…

Mysql-内置函数

一.什么是函数&#xff1f; 函数是指一段可以直接被另外一段程序调用的程序或代码。 mysql内置了很多的函数,我们只需要调用即可。 二.字符串函数 MySQL中内置了很多字符串函数: 三.根据需求完成以下SQL编写 由于业务需求变更,企业员工的工号,统一为5位数,目前不足5位数的全…

windows驱动开发基础-环境篇

前言 Windows上无论是用户模式下还是内核模式下&#xff0c;有关驱动的开发都有可能影响系统稳定性&#xff0c;所以我们首先要准备一个专用的测试环境&#xff0c;可以使用VM等虚拟机方便环境修复和还原 测试模式 开启测试模式&#xff1a;cmd 命令 bcdedit /set testsign…

旷野之间2 - 如何训练医疗保健小型语言模型(AI-SLM)

​​​​ 在本文中,我们将研究如何针对疾病症状训练一个小型医疗保健语言模型。为此,我们将从HuggingFace获取数据集(用于训练我们的模型):https://huggingface.co/datasets/QuyenAnhDE/Diseases_Symptoms QuyenAnhDE/Diseases_Symptoms 数据集来自 Hugging Face。图片来源…

6.MkDocs附录

安装插件 在 MkDocs 中&#xff0c;插件通常是通过 pip​ 工具安装的。你可以使用以下步骤来安装和配置 MkDocs 插件。 1.使用 pip​ 命令安装你需要的插件。例如 pip install pymdown-extensions‍ 2.更新 mkdocs.yml​ 文件。 ‍ 3.使用 mkdocs serve​ 命令本地预览你…

CentOS6禁止锁屏

在电源中设置后还是会锁屏, 原因是有屏幕保护程序 电源管理都 “从不” 一些AI的回答 在CentOS 6系统中&#xff0c;如果你想要禁用锁屏功能&#xff0c;可以编辑/etc/kbd/config文件。这个文件通常包含了键盘相关的设置&#xff0c;包括密码策略和屏幕锁定选项。 首先打开终…

支持向量机 (support vector machine,SVM)

支持向量机 &#xff08;support vector machine&#xff0c;SVM&#xff09; flyfish 支持向量机是一种用于分类和回归的机器学习模型。在分类任务中&#xff0c;SVM试图找到一个最佳的分隔超平面&#xff0c;使得不同类别的数据点在空间中被尽可能宽的间隔分开。 超平面方…

三级_网络技术_12_路由设计技术基础

1.R1、R2是一个自治系统中采用RIP路由协议的两个相邻路由器&#xff0c;R1的路由表如下图(a)所示&#xff0c;当R1收到R2发送的如下图(b)的(V.D)报文后&#xff0c;R1更新的4个路由表项中距离值从上到下依次为0、3、3、4 那么&#xff0c;①②③④可能的取值依次为()。 0、4、…

List、Map、Set 接口在Java中的存取元素特点

List、Map、Set 接口在Java中的存取元素特点 1、List 接口2、Map 接口3、Set 接口4、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java中&#xff0c;List、Map和Set是三个最常用的集合接口。它们各自有不同的特点和用途&#xff…

详解Java的内部类

一、基本介绍 一个类的内部又完整的嵌套了另一个类结构。被嵌套的类称为内部类(inner class)嵌套其他类的类称为外部类(outer class)。它是我们类的第五大成员&#xff0c;内部类最大的特点就是可以直接访问私有属性&#xff0c;并且可以体现类与类之间的包含关系。 二、内部类…

Maven的基本使用

引入依赖 1.引入Maven仓库存在的依赖&#xff0c;直接引入&#xff0c;刷新Maven <dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.2.12.RELEASE</version> </dependency…

Redis代替Session实现共享

集群的session共享问题 session共享问题&#xff1a;多台tomcat并不共享session存储空间&#xff0c;当请求切换到不同的tomcat服务时导致数据丢失的问题。 session的替代方案&#xff1a; 数据共享内存存储key、value结构 将redis替换session可以解决session共享问题

从天空到地面:无人机航拍推流直播技术在洞庭湖决口封堵中的全方位支援

据新闻报道&#xff0c;受持续强降雨影响&#xff0c;湖南省华容县团洲垸洞庭湖一线堤防发生管涌险情&#xff0c;随后出现决口。截至7月8日20时左右&#xff0c;226米长的洞庭湖一线堤防决口已累计进占208米&#xff0c;目前剩余18米&#xff0c;有望在今晚或9日凌晨实现合龙。…

7.9实验室总结 SceneBuilder的使用方法+使用javafx等

由于下错了东西&#xff0c;所以一直运行不出来&#xff0c;今天一直在配置环境&#xff0c;配置好了才学&#xff0c;所以没学多少&#xff0c;看了网课学习了SceneBuilder的使用方法还有了解了javafx是怎么写项目的&#xff0c;&#xff0c; 学习了怎么跳转页面&#xff1a;…

溶解氧(DO)理论指南(2)

转载自梅特勒官网资料&#xff0c;仅用于学习交流&#xff0c;侵权则删&#xff01; 溶解氧理论指南 2 DO电极类型2.1 氧化还原化学简介2.2 原电池法溶解氧电极2.3 极谱法溶解氧电极2.3 光学法溶解氧电极 2 DO电极类型 O2是一种高活性分子&#xff0c;因为它是通过光合作用连…

Ensp配置防火墙的web界面

Ensp配置防火墙的web界面 准备工作新建网卡配置网卡 启动防火墙配置防火墙注意事项和错误如果云里面没有网卡选项防火墙启动不了没有web界面启动不了没有web界面 准备工作 新建网卡 我用的是win10系统&#xff0c;新建网卡 先右键管理 再点击设备管理器 --- 再网络适配器 接…

PostgreSQL 中如何处理数据的并发更新冲突解决?

文章目录 一、并发更新冲突的场景二、PostgreSQL 中的并发控制机制&#xff08;一&#xff09; 封锁机制&#xff08;二&#xff09; 事务隔离级别 三、并发更新冲突的解决方法&#xff08;一&#xff09; 重试机制&#xff08;二&#xff09; 使用乐观并发控制&#xff08;三&…

【目标跟踪】CoTracker 环境配置

配置 CoTracker 环境 首先下载 conda&#xff0c;然后安装虚拟环境。 1.创建环境&#xff1a;如果环境不存在&#xff0c;你需要创建一个新的 conda 环境。可以使用以下命令创建名为 cotracker 的环境&#xff1a; conda create -n cotracker python3.x 其中 3.x 是你想要安…