微信小程序:mqtt+webview控制显示内容

微信小程序:mqtt+webview控制显示内容

2021-08-13 804
下载不了?请联系网站客服提交链接错误!
增值服务:
微信小程序:mqtt+webview控制显示内容
最近更新 2021年08月13日
资源编号 86682

微信小程序:mqtt+webview控制显示内容

2021-08-13 小程序教程 0 804 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

看到mqtt+webview似乎不知道能做什么,mqtt微消息服务更适用iot物联网,这个应该熟悉,但是似乎还是得从webview说起。webview的场景不仅仅是手机端的APP或者小程序用到,好多基于android主板显示的设备、大屏等webview都发挥了很大的作用。这里我们一是验证小程序的mqtt,二是通过mqtt控制设备自动切换显示内容,这样试想一下,其实就是远程操控设备显示内容的一种很好的方式。

效果

mqtt小程序端

需要mqtt.js客户端库:https://github.com/mqttjs/MQTT.js

小程序配置:

const app = getApp()
var mqtt = require(\'../../../utils/mqtt.min\')
var client = null

Page({

  /**
   * 页面的初始数据
   */
  data: {
    webUrl: \'https://www.baidu.com\'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.connnectMqtt()
  },

  connnectMqtt: function (){
    var that = this
    const options = {
      connectTimeout: 4000, // 超时时间
      clientId: \'mqtt_\' + Math.random().toString(16).substr(2, 8),
      port: 8083,  //重点注意这个坑
    }

    client = mqtt.connect(\"wx://xx.xx.xx.xx/mqtt\", options);
    client.on(\'reconnect\', (error) => {
        console.log(\'正在重连:\', error)
    })

    client.on(\'error\', (error) => {
        console.log(\'连接失败:\', error)
    })
    client.on(\'connect\', (e) => {
        console.log(\'成功连接服务器\')
         //订阅一个主题
        client.subscribe(\'test\', {
            qos: 0
        }, function(err) {
            if (!err) {
                console.log(\"订阅成功\")
            }
        })
    })
    client.on(\'message\', function (topic, message) {
        console.log(\'received msg:\' + message.toString());
        that.setData({
          webUrl: message.toString()
        })
        console.log(that.data.webUrl)
    })
  } 
})

<web-view src=\"{{webUrl}}\" bindmessage=\"getmessage\"></web-view>

mqtt服务端安装

EMQ X 是一款完全开源,高度可伸缩,高可用的分布式 MQTT 消息服务器

git地址:https://gitee.com/emqx/emqx

docker安装步骤

$ docker search emqx // 查看版本

$ docker pull emqx/emqx // 拉取镜像

$ docker run -dit --name emqx -p 18083:18083 -p 1883:1883 -p 8083:8083 -p 8084:8084 emqx/emqx:latest // 运行

$ docker exec -it  emqx /bin/sh // 进入命名

web管理界面

http://127.0.0.1:18083

#账号: admin

#密码: public

端口介绍

1883:MQTT 协议端口

8883:MQTT/SSL 端口

8083:MQTT/WebSocket 端口

8080:HTTP API 端口

18083:Dashboard 管理控制台端口


mqtt客户端工具

我们没必要写后台代码,直接用个mqtt客户端工具做测试,用的MQTTX,这个就根据个人习惯选了

MQTTX地址:https://github.com/emqx/MQTTX/releases

安装完成配置验证即可。

代码

github地址:https://github.com/dumplingbao/wx_demo.git

blog地址:https://dumplingbao.github.io/2021/07/22/wx-mqtt/

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 微信小程序:mqtt+webview控制显示内容 https://www.k4sc.com/86682.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务