https://www.cnblogs.com/yangfengwu/p/11198572.html

说一下哈,,如果教程哪里看不明白...就去自己百度补充哪一部分,,学习不是死记硬背,需要会学习,永远没有学完的知识,要学会会学,会灵活运用.

还有一件事情...你们都不睡觉吗?现在是3:23 ..... 竟然看的人数在持续增加...

那个..我还是先睡觉吧,,因为我刚想到,做页面需要先写DIV的  然后再写具体MQTT的.....需要两篇...我先洗洗睡...

咱先不管布局..先直接这样写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="paho-mqtt.js" type="text/javascript"></script> <!--加载支持MQTT的包-->

    <script>

        var client;//定义一个全局变量

        function onConnect() {// called when the client connects  如果连接上,进入

            document.getElementById("buttonConnect").innerHTML = "断开";//改变显示的内容

        }

        function onConnectionLost(responseObject) {// called when the client loses its connection

            if (responseObject.errorCode !== 0) {//回复的不是1就是2具体看  https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html

                console.log("onConnectionLost:"+responseObject.errorMessage);

            }

        }

        function onMessageArrived(message) {// called when a message arrives 控制台打印接受的消息

            console.log("onMessageArrived:"+message.payloadString);

        }

        function buttonConnectOnclick() {//按钮点击事件

            client = new Paho.MQTT.Client("47.92.31.46", Number("8083"), "clientId");// Create a client instance

            // set callback handlers

            client.onConnectionLost = onConnectionLost;//设置连接断开回调函数

            client.onMessageArrived = onMessageArrived;//设置接收到消息进入的回调函数

            var Options={

                onSuccess : onConnect,

                userName  : "yang",

                password  : "11223344"

            };

            client.connect(Options);// connect the client 连接...

        }

    </script>

</head>

<body>

 IP地址: <input type="text" id="ip"> <!--输入连接的IP地址-->

 端口号: <input type="text" value="8083"> <!--输入连接的端口号,默认显示8083-->

 <button id="buttonConnect" onclick="buttonConnectOnclick()"> 连接 </button><!--一个按钮,显示连接,点击事件是 buttonConnect-->

</body>

</html>

测试下

接着完善

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="paho-mqtt.js" type="text/javascript"></script> <!--加载支持MQTT的包-->

    <script>

        var client;//定义一个全局变量

        function onConnect() {// called when the client connects  如果连接上,进入

            document.getElementById("buttonConnect").innerHTML = "断开";//改变显示的内容

        }

        function onConnectionLost(responseObject) {//断开了连接

            if (responseObject.errorCode !== 0) {//回复的不是1就是2具体看  https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html

                console.log("onConnectionLost:"+responseObject.errorMessage);

                document.getElementById("buttonConnect").innerHTML = "连接";//改变显示的内容

            }

        }

        function onMessageArrived(message) {// called when a message arrives 控制台打印接受的消息

            console.log("onMessageArrived:"+message.payloadString);

        }

        function buttonConnectOnclick() {//按钮点击事件

            try{//加上异常捕获

                client = new Paho.MQTT.Client(document.getElementById("ip").value, Number(document.getElementById("port").value), "clientId");// Create a client instance

                // set callback handlers

                client.onConnectionLost = onConnectionLost;//设置连接断开回调函数

                client.onMessageArrived = onMessageArrived;//设置接收到消息进入的回调函数

                var Options={

                    onSuccess : onConnect,

                    userName  : "yang",

                    password  : "11223344"

                };

                client.connect(Options);// connect the client 连接...

            }catch (e) {

                alert(e);//打印连接中的错误

            }

        }

    </script>

</head>

<body>

 IP地址: <input type="text" id="ip"> <!--输入连接的IP地址-->

 端口号: <input type="text" value="8083" id="port"> <!--输入连接的端口号,默认显示8083-->

 <button id="buttonConnect" onclick="buttonConnectOnclick()"> 连接 </button><!--一个按钮,显示连接,点击事件是 buttonConnect-->

</body>

</html>

测试

OK

接着还要加上用户名和密码,,还有订阅主题,,发布消息

放到下一节

需要先说一下规范,,,所有的都放到一个文件里面.....看着难受

https://www.cnblogs.com/yangfengwu/p/11351182.html

15-网页,网站,微信公众号基础入门(网页版MQTT,做自己的MQTT调试助手)的更多相关文章

  1. 14-网页,网站,微信公众号基础入门(网页版MQTT,小试牛刀)

    https://www.cnblogs.com/yangfengwu/p/11192639.html 抱歉哈...最近由于做板子,,教程的进度落下了... 这些天总共做了还几块板子 首先对当前这个教程 ...

  2. 16-网页,网站,微信公众号基础入门(网页版MQTT,页面控件位置调整入门)

    https://www.cnblogs.com/yangfengwu/p/11200767.html 说一下,只要你java学的很好,那么几乎所有的语言都不在话下了 来看一下样式设置 运行 在左上角感 ...

  3. 10-网页,网站,微信公众号基础入门(使用微信自带配置选项实现Airkiss配网)

    https://www.cnblogs.com/yangfengwu/p/11066036.html 如果提交失败多提交两次,只要上一节可以,,这一节一定可以的 如果没有设备 这个是我的二维码 咱就测 ...

  4. 17-网页,网站,微信公众号基础入门(使用Adobe Dreamweaver CS6 制作网页/网站)

    https://www.cnblogs.com/yangfengwu/p/11351182.html https://www.cnblogs.com/yangfengwu/p/11200767.htm ...

  5. 13--网页,网站,微信公众号基础入门(PHP获取网页的get请求)

    https://www.cnblogs.com/yangfengwu/p/11148976.html 大家在访问网页的时候有没有注意一件事情 现在咱来看这种哈 现在咱做个功能哈,类似于这样 长话短说 ...

  6. 8-网页,网站,微信公众号基础入门(使用Python程序实现微信token验证)

    https://www.cnblogs.com/yangfengwu/p/11062034.html 设置一下IP白名单:   填写自己的服务器的IP地址 是不是不可以哈,有多少人都会入这个坑.... ...

  7. 12-网页,网站,微信公众号基础入门(编写后台PHP程序,实现Airkiss配网)

    https://www.cnblogs.com/yangfengwu/p/11067590.html 首先说一下,这两个地方需要配置一样 网站根目录建个文件夹 airkiss的文件夹 里面放上 ind ...

  8. 4-网页,网站,微信公众号基础入门(配置网站--下载安装PHP)

    https://www.cnblogs.com/yangfengwu/p/10979101.html 这一节咱看一下如何在原先的基础上实现网站 首先去下载 PHP https://windows.ph ...

  9. 9-网页,网站,微信公众号基础入门(使用PHP实现微信token验证)

    https://www.cnblogs.com/yangfengwu/p/11062422.html 这一节看怎么用PHP实现上一节的功能 关掉上一节的 学了这么久,忘了告诉大家怎么关闭程序了.... ...

随机推荐

  1. java中多重循环和break、continue语句

    一.嵌套循环 循环可以互相嵌套,以实现更加复杂的逻辑,其代码的复杂程度也会提高,对初学者而言这应该是个难点,下面我们通过一些例子说明嵌套循环的使用,读者要自己把这些代码上机练习,并理解程序运行的流程. ...

  2. Linux学习笔记之grep命令和使用正则表达式

    0x00 正则表达式概述 正则表达式是描述一些字符串的模式,是由一些元字符和字符组成的字符串,而这些元字符是一些表示特殊意义的字符,即被正则表达式引擎表达的字符表示与其本意不同的一些字符. 0x01  ...

  3. RGB的光的三原色、品红黄青颜料的三原色

    学习了祁连山老师讲的光与色的基础知识,觉得收获颇多,所以记下来光与色的知识点. 首先提问大家一个问题:照片中物体的颜色就是它的固有色么?(请从色光和物体固有色的角度回答) 这个问题在看完下面的总结后相 ...

  4. Java自学-类和对象 枚举类型

    枚举类型 步骤 1 : 预先定义的常量 枚举enum是一种特殊的类(还是类),使用枚举可以很方便的定义常量 比如设计一个枚举类型 季节,里面有4种常量 public enum Season { SPR ...

  5. css, js 项目练习之网页换肤

    首先,该练习参考自:https://www.jianshu.com/p/2961d9c317a3 我就直接上代码了(颜色可以自己调). HTML: <nav> <li>< ...

  6. 编写可维护的JavaScript-随笔（四）

    避免使用全局变量 一.全局变量带来的问题 a)      命名冲突 i.          当全局变量和全局函数越来越多时,发生命名冲突的概率也随之增高 ii.          如果函数中使用了外部 ...

  7. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  8. React-router5.x 路由的使用及配置

    在 React router 中通常使用的组件有三种: 路由组件(作为根组件): BrowserRouter(history模式) 和 HashRouter(hash模式) 路径匹配组件: Route ...

  9. pycharm 里运行 django 工程 You must either define the environment variable DJANGO_SETTINGS_MODULE 错误

    pycharm 里运行 django 工程出现错误(在命令行直接运行ok): django.core.exceptions.ImproperlyConfigured: Requested settin ...

  10. Python的矩阵传播机制&矩阵运算

    Python的矩阵传播机制(Broadcasting) 最近在学习神经网络.我们知道在深度学习中经常要操作各种矩阵(matrix).回想一下,我们在操作数组(list)的时候,经常习惯于用for循环( ...