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 主题发送消息。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C# 下sendmessage和postmessage的区别详解与示例

文章目录 1、SendMessage2、PostMessage3、两者的区别&#xff1a; 总结 在C#中&#xff0c;SendMessage和PostMessage是两个用于Windows编程的API&#xff0c;它们用于向窗口发送消息。这两个方法都位于System.Windows.Forms命名空间中&#xff0c;通常用于自动化Windows应用程…

AI应用观:从“卷模型”到“卷应用”的时代跨越

在2024年世界人工智能大会的舞台上&#xff0c;百度创始人李彦宏的发言如同一股清流&#xff0c;为当前如火如荼的人工智能领域注入了深刻的思考。他提出的“大家不要卷模型&#xff0c;要卷应用”的观点&#xff0c;不仅是对当前AI技术发展趋势的精准洞察&#xff0c;更是对未…

帮企建站包响应式建站源码系统 带完整的安装代码包以及搭建部署教程

系统概述 帮企建站包响应式建站源码系统是一款为企业和个人提供便捷、高效建站解决方案的工具。它融合了先进的技术和设计理念&#xff0c;旨在帮助用户轻松构建具有专业水准的网站&#xff0c;无论在桌面端还是移动端都能呈现出完美的展示效果。 该系统基于响应式设计原则&a…

C++ 信号量和锁的区别

网上关于信号量和锁的区别&#xff0c;写的比较官方晦涩难懂&#xff0c;对于这个知识点吸收难&#xff0c;通过示例&#xff0c;我们看到信号量&#xff0c;可以控制同一时刻的线程数量&#xff0c;就算同时开启很多线程&#xff0c;依然可以的达到线程数可控 #include <i…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十六章 Linux 第一个程序 HelloWorld

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

mysql 5.7.44 32位 zip安装

前言 因为研究别人代码&#xff0c;他使用了5.7的 32位 mysql &#xff0c;同时最新的 8.4 64位 mysql 不能用官方lib连接。所以安装这个版本使用&#xff0c;期间有些坑&#xff0c;在这里记录一下。 下载路径 mysql官方路径&#xff1a;https://downloads.mysql.com/archi…

【c语言】轻松拿捏自定义类型

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 前言 一、结构体 1.结构体类型的定义和使用 1.1 结构体类型声明 1.2 结构体变量的创建和初始化 1.3 结构体变量成员的访问 1.4 结构体的特殊声…

AI赋能OFFICE 智能化办公利器!

ONLYOFFICE在线编辑器的最新版本8.1已经发布&#xff0c;整个套件带来了30多个新功能和432个bug修复。这个文档编辑器无疑成为了办公软件中的翘楚。它不仅支持处理文本文档、电子表格、演示文稿、可填写的表单和PDF&#xff0c;还允许多人在线协作&#xff0c;并支持AI集成&…

linux 基础命令、gcc的基础用法

1、ls——>列出目录下的内容 语法&#xff1a;ls [-a -l -h] [Linux路径] &#xff08;1&#xff09;-a -l -h 是可选的选项 &#xff08;2&#xff09;Linux路径是此命令的可选参数 ①当不使用选项和参数&#xff0c;直接使用 ls 命令本体&#xff0c;表示&#xff1a;…

以终为始,胜意费控云「包干管控」助力精细管控与体验提升

在全球宏观经济环境的波动和内在经济逻辑的推动下&#xff0c;我国经济正经历着关键的结构调整期。如何稳健穿越周期&#xff0c;是企业必须直面的课题。与此同时&#xff0c;企业成本管控也面临着更为精细和严格的挑战。 企业需要一种更为灵活合理的费用管控策略。胜意费控云升…

3d模型墙模糊怎么回事?---模大狮模型网

在展览3D模型设计行业中&#xff0c;技术细节常常是设计师们需要面对和解决的关键问题之一。其中&#xff0c;3D模型墙模糊的现象可能会影响整个展览的视觉效果和观众的体验。本文将深入探讨这一问题的起因及解决方法&#xff0c;帮助设计师们更好地处理类似挑战。 一、问题的起…

Windows Server 2012 R2查看IIS版本

文章目录 一、方法一1.win R 键打开运行窗口 → 输入 "regedit" → 点击【确定】2.HKEY_LOCAL_MACHINE → SOFTWARE → Microsoft → InetStp 二、方法二1.win R 键打开运行窗口 → 输入 "inetmgr" → 点击【确定】2.点击 【帮助】 → 选择【关于 Intern…

【CVPR 2024】GART: Gaussian Articulated Template Models

【CVPR 2024】GART: Gaussian Articulated Template Models 一、前言Abstract1. Introduction2. Related Work3. Method3.1. Template Prior3.2. Shape Appearance Representation with GMM3.3. Motion Representation with Forward Skinning3.4. Reconstruct GART from Monocu…

字节码编程javassist之获取指令码

写在前面 本文看下使用javassist如何查看方法对应的字节码指令信息。 1&#xff1a;程序 测试类 package com.dahuyou.javassist.huohuo.cc;import java.math.BigDecimal;public class MyApiTestNoAnnotation {public double queryUserInfo(String uId){return BigDecimal.…

SimLab 流体网格建模工具详解 Part2: Mesh

SimLab的建模功能 SimLab中和流体网格建模相关的功能主要集成在 Geometry 和 Mesh 两个标签中。在上期文章中&#xff0c;我们详细介绍了Geometry标签中的内容&#xff0c;本期文章我们将分享继续分享 Mesh 标签的内容&#xff0c;一起来看看吧。 Mesh 标签 标签下的工具生成网…

8.2结构体的定义和使用

代码 #include <iostream> using namespace std; #include <string>//1、创建学生数据类型&#xff1a;学生包括(姓名&#xff0c;年龄&#xff0c;分数) //自定义数据类型&#xff0c;一些类型集合组成一个类型 //语法 struct 类型名称{成员列表} struct Stduent…

西瓜杯CTF(1)

#下班之前写了两个题&#xff0c;后面继续发 Codeinject <?php#Author: h1xaerror_reporting(0); show_source(__FILE__);eval("var_dump((Object)$_POST[1]);"); payload 闭合后面的括号来拼接 POST / HTTP/1.1 Host: 1dc86f1a-cccc-4298-955d-e9179f026d54…

【java计算机毕设】医院信息管理系统MySQL springboot html html maven前后端一体 小组项目设计源码+文档

目录 1项目功能 2项目介绍 3项目地址 1项目功能 【java计算机毕设】医院信息管理系统MySQL springboot html maven项目设计代码文档 小组项目 2项目介绍 系统功能&#xff1a; java医院信息管理系统包括管理员、门诊两种角色&#xff08;初始化两个角色&#xff0c;可自由分…

多文件编程:c/c++分文件写法(入门)

前言 一个 C 项目通常会采取 声明与定义分离 的方式进行编写&#xff0c;其基本遵循&#xff1a;头文件中写声明&#xff0c;源文件中写定义。 此外&#xff0c;为了区分头文件与源文件&#xff0c;会采用不同的文件后缀&#xff1a; .h: 头文件 .cpp: 源文件 (当然还有其他的…

小白轻松上手,Python编程常用的30个经典操作以及代码演示

当谈到经典的Python编程案例时&#xff0c;通常涉及各种基础和进阶的编程任务. 30个常见的案例&#xff0c;涵盖了从基本操作到稍复杂的应用&#xff1a; 基础操作 1.Hello World: 打印"Hello, World!"到控制台。 print("Hello, World!")2.变量和数据…