阿里云物联网应用层开发：第三部分，微信小程序和web客户端实现

news2024/11/18 9:40:48

文章目录

  • 哔哩哔哩视频教程
  • 1、阿里云物联网平台对接微信小程序
  • 2、阿里云物联网平台对接web客户端
    • 2-1MQTT服务器编写
    • 2-2 web端Servlet部分编写

哔哩哔哩视频教程

【阿里云物联网综合开发，STM32+ESP8266+微信小程序+web客户端一篇教程详细讲解】 https://www.bilibili.com/video/BV1jj8oesEiS/?share_source=copy_web&vd_source=7a7fe2f7182275906c92294b4f15eecc

1、阿里云物联网平台对接微信小程序

在这里插入图片描述
微信小程序这一块，只要完成产品云流转这一步，其他都没有太大的问题。
实现主要源码如下：
index.wxml

<view style="flex-direction: row;" class="view-led">
  <view class="view-text-led">远程开灯</view>

  <image src="img/ledon.jpg"
          style="width: 100px; height: 120px"
          class="image-1"/>

  <button type="primary" bindtap="onClickOpen" size="mini" class="button-on" style="width: 200rpx; height: 64rpx; left: 0rpx; top: -103rpx">
      开灯
    </button>
</view>

<view style="flex-direction: row;" class="view-led">
  <view class="view-text-led">远程关灯</view>

  <!-- 显示图片 -->
  <image src="img/ledoff.jpg"
          style="width: 100px; height: 120px"
          class="image-1"/>

  <button type="warn" bindtap="onClickOff" size="mini" class="button-on" 
  style="width: 200rpx; height: 64rpx; left: 0rpx; top: -103rpx">
      关灯
  </button>
</view>

<view style="flex-direction: row;" class="view-led">
  <view class="view-text-led">温度显示</view>
  <image src="/pages/index/img/thermometer.png"
          style="width: 100px; height: 100px; left: 42rpx; top: 4rpx"
          class="image-2"/>

  <text style="position: relative; left: 268rpx; top: -84rpx">温度：{{LightSwitch}}℃</text>
</view>

index.wxss

button{
  /*外边距*/
  margin:5px;
}
.button-on{
  margin-left: 110px;
  position: relative;
  display: inline-block; 
  box-sizing: border-box; 
  position: relative
}

/* 远程控制led文字样式 */
.view-text-led{
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-led{
  border: solid red 1rpx;
  margin: 10px;
}

.image-1{
  margin-left: 20px;
  margin-bottom: 10px;
}
.image-2{
  position: relative;
  margin-bottom: 10px;
}

index.js

var mqtt = require('../../utils/mqtt.min.js')
//const crypto = require('../../utils/aliyun/hex_hmac_sha1.js')

let that = null;

// 需要订阅的主题
const topic = '/sys/[您的ProductKey]/[您的DeviceName]/thing/service/property/set';

//发布的主题
const topic2 = '/[您的ProductKey]/[您的DeviceName]/user/update';

//阿里云连接地址，需要在详情页选择不校验合法域名，否则会报错
const connectUrl = 'wxs://k0efkfcSwlt.iot-as-mqtt.cn-shanghai.aliyuncs.com';

let options = {
  clean: true, // 保留会话
  connectTimeout: 4000,	// 超时时间
  reconnectPeriod: 1000,	// 重连时间间隔

  clientId: '[您的ProductKey].[您的ProductKey]|securemode=2,signmethod=hmacsha256,timestamp=1706677614045|',
  username: '[您的ProductKey]&[您的ProductKey]',
  password: 'b174a6c6967b2265468c2a6d7fafc5a83f271de81bcc799e4c30fa59cd4581a2',
}

//创建客户端
const client = mqtt.connect(connectUrl, options)

// 成功连接后触发的回调
client.on('connect', () => {
  console.log('已经连接成功');

  wx.showToast({
    title: '阿里云连接成功！'
  })

   //订阅主题
  client.subscribe([topic], () =>  {
    console.log(`订阅了主题 ${topic}`);
   });
 })

Page({
  //定义初始数据
  data:{
    LightSwitch: 0,
    imgSrc: '/pages/index/img/ledoff.jpg'
  },

  //开关灯
  // switchEvent_1: function(e){
  //   var isChecked = e.detail.value;
  //   if (isChecked) {
  //     this.setData({
  //       imgSrc: '/pages/index/img/ledon.jpg'
  //     })
  //   } else {
  //     this.setData({
  //       imgSrc: '/pages/index/img/ledoff.jpg'
  //     })
  //   }
  // },

  onClickOpen(){
    client.publish(topic2, '{"params":{"LEDSwitch":1},"version":"1.0"}');
    console.log('成功发送数据');
    wx.showToast({
      title: '开灯命令已发送！'
    })
  },

  onClickOff(){
    client.publish(topic2, '{"params":{"LEDSwitch":0},"version":"1.0"}');
    console.log('成功发送数据');
    wx.showToast({
      title: '关灯命令已发送！'
    })
  },

  //onLoad(Object query) 页面加载时触发。一个页面只会调用一次，可以在 onLoad的参数中获取打开当前页面路径中的参数。
  onLoad:function () {
    that = this;
     
    //消息监听
    client.on('message', function (topic, message) {
      // console.log('收到数据' + message + '\r\n');

      let dataFromALY = {};
      var f = 0.0;
      try{
        dataFromALY = JSON.parse(message);
        //打印接收到的数据
        console.log(dataFromALY);

        f = dataFromALY.items.temperature.value;
        console.log('获取到ESP8266发送的温度值：' + f + '\r\n');

        //修改温度数据
        that.setData({
          LightSwitch: f
        })

      }catch(error){
        console.log(error);
      }
    })
  }
})

源代码链接：
链接：https://pan.baidu.com/s/1s3N3J_rx_PIpc2xw1RvX0g
提取码：m0w5

2、阿里云物联网平台对接web客户端

2-1MQTT服务器编写

web客户端使用Tomcat和Servlet实现，但是Tomcat是Servlet的容器，只能处理请求和响应。故需要实现订阅阿里云物联网平台的topic，实时接收设备发布过来的数据，可以另外编写一个MQTT客户端，客户端再连接数据库，这样web端通过查询最新数据来实现将设备发布过来的数据实时显示（如温度数据）。
MQTT服务器可参考阿里云物联网平台使用文档——Java Link SDK

我参考例程对原程序进行了修改，在为数据库添加数据上，使用多线程的方式，单独开设一个线程进行操作，这样对订阅数据和往数据库添加数据不会冲突。
开发环境我使用的是idea社区版。

2-2 web端Servlet部分编写

在这里插入图片描述
对web客户端的编写，首先编写好前端界面，下面介绍几个功能的实现原理：
1、温度实时显示：使用js编写一个脚本，每隔一段时间向服务器发送一个请求，服务器接收到请求后往数据库要最新的温度数据。
2、开灯和关灯功能实现：使用HTTPS连接通信，参考阿里云物联网平台HTTPS通信和HTTP客户端接入示例

实现例程如下：
链接：https://pan.baidu.com/s/1LKdwTfDYuvPmrVJevUrJsA
提取码：1f7r

例程使用Eclipse编写，仅做参考！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

袋鼠快跳 - 常用网址快捷访问

袋鼠快跳 - 常用网址快捷访问

袋鼠快跳 开源地址&#xff1a;https://github.com/chenbimo/kangaroo-jump 袋鼠快跳&#xff0c;是一个以 简单快捷 为目标的网站快导航 油猴脚本。 本工具的理念就是&#xff0c;用最快的速度访问我们最常用的50个网站。 功能特点 完全免费&#xff0c;以 MIT协议 开源。…
阅读更多...
文生图功能介绍

文生图功能介绍

Stable Diffusion WebUI&#xff08;SD WebUI&#xff09;及文生图功能介绍 一、引言 随着人工智能技术的飞速发展&#xff0c;AI绘画作为一种新兴的艺术形式&#xff0c;逐渐走入人们的视野。Stable Diffusion WebUI&#xff08;简称SD WebUI&#xff09;作为AI绘画领域的重…
阅读更多...
如何现代的编译和安装内核

如何现代的编译和安装内核

前言&#xff1a;本文是在阅读书目时找到了一篇非常高质量的文章。的原文是英文&#xff0c;现在我自己手头翻译了一下&#xff0c;发布到这里。 原文连接&#xff1a;How to compile a Linux kernel in the 21st century | Opensource.com 目录 更新内核的现代方法 安装内…
阅读更多...
在线如何快速把图片变小？图片轻松修改大小的3个在线工具

在线如何快速把图片变小？图片轻松修改大小的3个在线工具

随着现在图片在工作和生活中的广泛使用&#xff0c;在使用图片的时候经常会因为图片太大的问题受到影响&#xff0c;比较简单的一种处理方法可以通过压缩图片的方式来缩小图片大小&#xff0c;那么图片压缩具体该怎么来操作呢&#xff1f;下面就给大家分享几款图片在线压缩工具…
阅读更多...
npm安装包报错解决

npm安装包报错解决

目录 一&#xff1a;问题回顾 二:问题分析 三&#xff1a;npm降级或者升级 四&#xff1a;npm和node js 关系 一&#xff1a;问题回顾 今天在本地部署一个vue开发的项目&#xff0c;需要在本地看下运行情况&#xff0c;按照常规的操作就是在网站根目录运行npm install 安装…
阅读更多...
Android super.img结构及解包和重新组包

Android super.img结构及解包和重新组包

Android super.img结构及解包和重新组包 从Android10版本开始&#xff0c;Android系统使用动态分区&#xff0c;system、vendor、 odm等都包含在super.img里面&#xff0c;编译后的最终镜像不再有这些单独的 image&#xff0c;取而代之的是一个总的 super.img. 1. 基础知识 …
阅读更多...
LVS-负载均衡

LVS-负载均衡

目录 一、概念 二、LVS工作原理 1. ipvs/ipvsadm 2.名词&#xff1a; 三、常用命令 四、工作模式 1.NAT地址转换模式 &#xff08;1&#xff09;工作流程 &#xff08;2&#xff09;特点 &#xff08;3&#xff09;实验过程 a.环境准备&#xff1a; b.修改测试机的…
阅读更多...
第二周：计算机网络概述（下）

第二周：计算机网络概述（下）

一、计算机网络性能指标&#xff08;速率、带宽、延迟&#xff09; 1、速率 2、带宽 3、延迟/时延 前面讲分组交换的时候介绍了&#xff0c;有一种延迟叫“传输延迟”&#xff0c;即发送一个报文&#xff0c;从第一个分组的发送&#xff0c;到最后一个分组的发送完成的这段时…
阅读更多...
vue3.2及以上 父调子的方法defineExpose定义供父调用的方法及属性

vue3.2及以上 父调子的方法defineExpose定义供父调用的方法及属性

1、定义子类LoginForm&#xff1a; function handleLogin(account, token) {console.log(account,token)}defineExpose({handleLogin,}); 2、父类调用子类组件 const loginFormRef ref(); <LoginForm ref"loginFormRef" />loginFormRef.value.handleLogin(…
阅读更多...
仓库管理系统23--用户管理

仓库管理系统23--用户管理

原创不易&#xff0c;打字不易&#xff0c;截图不易&#xff0c;多多点赞&#xff0c;送人玫瑰&#xff0c;留有余香&#xff0c;财务自由明日实现 1、创建用户管理的用户控件 <UserControl x:Class"West.StoreMgr.View.UserInfoView"xmlns"http://schemas.…
阅读更多...
SSE代替轮询？

SSE代替轮询？

什么是 SSE SSE&#xff08;Server-Sent Events&#xff0c;服务器发送事件&#xff09;&#xff0c;为特定目的而扩展的 HTTP 协议&#xff0c;用于实现服务器向客户端推送实时数据的单向通信。如果连接断开&#xff0c;浏览器会自动重连&#xff0c;传输的数据基于文本格式。…
阅读更多...
C语言入门-指针和数组5

C语言入门-指针和数组5

指针和地址 地址 地址是内存中一个特定位置的标识符。每个内存位置都有一个唯一的地址&#xff0c;用于存储数据。这些地址通常表示为十六进制数。 物理地址&#xff1a;硬件层次上的实际内存地址。逻辑地址&#xff1a;程序运行时使用的地址&#xff0c;由操作系统管理。 …
阅读更多...
Edge浏览器添加新标签页网址为 百度 搜索

Edge浏览器添加新标签页网址为 百度 搜索

默认不能直接设置&#xff0c;需要安装New Tab Change插件 安装拓展插件 url 这里点击获取即可&#xff08;我已经安装过了&#xff09; 某些扩展会更改浏览器设置&#xff0c;例如默认搜索引擎、新选项卡页和其他类型的网站数据。 为了防止扩展更改在安装时设置的首选项Micr…
阅读更多...
MQ:RabbitMQ

MQ:RabbitMQ

同步和异步通讯 同步通讯: 需要实时响应,时效性强 耦合度高 每次增加功能都要修改两边的代码 性能下降 需要等待服务提供者的响应,如果调用链过长则每次响应时间需要等待所有调用完成 资源浪费 调用链中的每个服务在等待响应过程中,不能释放请求占用的资源,高并发场景下…
阅读更多...
来聊聊Redis定期删除策略的设计与实现

来聊聊Redis定期删除策略的设计与实现

写在文章开头 我们都知道redis通过主线程完成内存数据库的指令操作&#xff0c;由于只有一个线程负责核心业务流程&#xff0c;所以对于每一个操作都要求尽可能达到尽可能的高效迅速&#xff0c;而本文就基于源码来聊聊redis的定期删除策略的设计与实现。 Hi&#xff0c;我是 …
阅读更多...
上传头像到Domino中

上传头像到Domino中

大家好&#xff0c;才是真的好。 首先&#xff0c;说一个消息&#xff0c;2024年6月25号HCL发布了一则公告&#xff0c;就是从2024年12月10号开始结束Notes/Domino 11.0.x版本的市场订单申请&#xff0c;从从2025年6月26号开始停止对Notes/Domino 11.0.x版本的产品技术支持&am…
阅读更多...
宝塔linux网站迁移步骤

宝塔linux网站迁移步骤

网站迁移到新服务器步骤 1.宝塔网站迁移&#xff0c;有个一键迁移工具&#xff0c;参考官网 宝塔一键迁移API版本 3.0版本教程 - Linux面板 - 宝塔面板论坛 (bt.cn)2 2.修改域名解析为新ip 3.如果网站没有域名&#xff0c;而是用ip访问的&#xff0c;则新宝塔数据库的wp_o…
阅读更多...
Ubuntu机器安装rdkit指定版本，通过conda安装不需要make，有手就行。

Ubuntu机器安装rdkit指定版本，通过conda安装不需要make，有手就行。

阿里云购买Ubuntu 22.0机器 IP没错&#xff0c;访问外网没问题 图片中的命令放在下面了。 useradd test-user -s /bin/bash mkdir /home/test-user chown -R test-user: /home/test-user passwd test-uservi /etc/sudoers wget -c https://repo.anaconda.com/archive/Anacon…
阅读更多...
springcloud-gateway 网关组件中文文档

springcloud-gateway 网关组件中文文档

Spring Cloud网关 Greenwich SR5 该项目提供了一个基于Spring生态系统的API网关&#xff0c;其中包括&#xff1a;Spring 5&#xff0c;Spring Boot 2和项目Reactor。Spring Cloud网关的目的是提供一种简单而有效的方法来路由到API&#xff0c;并向它们提供跨领域的关注&#x…
阅读更多...
[快易签]免越狱苹果签名工具快易签自用证书签名教程学会了可签一切应用

[快易签]免越狱苹果签名工具快易签自用证书签名教程学会了可签一切应用

相关地址 快易签官网&#xff1a;快易签 定制版&#xff1a;快易签.定制款(含证书) 自签版&#xff1a;https://s1.kyq1.cn/ 免费源&#xff1a;https://app.eqishare.com/appstore 网盘&#xff1a;路灯网盘-iOS砸壳分享网-IPA分享网-巨魔商店IPA软件资源-后厂村路灯的网…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023