特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：http://www.cnblogs.com/mao2080/

1、html代码

　　因为使用到wss而且使用到了账号密码鉴权在网上好不容易找到一篇相关的帖子，具体代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="js/mqttws31.js" type="text/javascript"></script>

        <script>

            var hostname = 'ip地址',

                port = 8882,

                clientId = 'client-mao2080',

                timeout = 5,

                keepAlive = 50,

                cleanSession = false,

                ssl = false,

                userName = 'mao2080',

                password = '123',

                topic = 'a/b/c';

            client = new Paho.MQTT.Client(hostname, port, clientId);

            //建立客户端实例

            var options = {

                invocationContext: {

                    host : hostname,

                    port: port,

                    path: client.path,

                    clientId: clientId

                },

                timeout: timeout,

                keepAliveInterval: keepAlive,

                cleanSession: cleanSession,

                useSSL: ssl,

                userName: userName,

                password: password,

                onSuccess: onConnect,

                onFailure: function(e){

                    console.log(e);

                }

            };

            client.connect(options);

            //连接服务器并注册连接成功处理事件

            function onConnect() {

                console.log("onConnected");

                client.subscribe(topic);

            }

            client.onConnectionLost = onConnectionLost;  

            //注册连接断开处理事件

            client.onMessageArrived = onMessageArrived;  

            //注册消息接收处理事件

            function onConnectionLost(responseObject) {

                console.log(responseObject);

                if (responseObject.errorCode !== 0) {

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

                    console.log("连接已断开");

                }

            } 

            function onMessageArrived(message) {

                console.log("收到消息:"+message.payloadString);

            }  

            function send(){

                var s = document.getElementById("msg").value;

                if(s){

                    s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(s)+", from: web console}";

                    message = new Paho.MQTT.Message(s);

                    message.destinationName = topic;

                        client.send(message);

                        document.getElementById("msg").value = "";

                }

            }

            var count = 0;

            function start(){

                window.tester = window.setInterval(function(){

                if(client.isConnected){

                    var s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(count++)+", from: web console}";

                    message = new Paho.MQTT.Message(s);

                    message.destinationName = topic;

                       client.send(message);

                }

            }, 1000);

            }

            function stop(){

                window.clearInterval(window.tester);

            }

            Date.prototype.Format = function (fmt) { //author: meizz

                var o = {

                    "M+": this.getMonth() + 1, //月份

                    "d+": this.getDate(), //日

                    "h+": this.getHours(), //小时

                    "m+": this.getMinutes(), //分

                    "s+": this.getSeconds(), //秒

                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度

                    "S": this.getMilliseconds() //毫秒

                };

                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

                for (var k in o)

                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

                return fmt;

            }

        </script>

    </head>

    <body>

        <input type="text" id="msg"/>

        <input type="button" value="Send" onclick="send()"/>

        <input type="button" value="Start" onclick="start()"/>

        <input type="button" value="Stop" onclick="stop()"/>

    </body>

</html>

2、nginx配置



请参考另一篇blog：http://www.cnblogs.com/mao2080/p/7772893.html


3、注意事项


1、如果使用wss需要配置nginx


ssl改为true


port 改为 443


2、如果使用ws则不需要配置nginx


ssl改为false
port改为mqtt服务ws开放的端口


4、参考网站


http://blog.csdn.net/qq_24591547/article/details/65443819


5、代码下载


https://files.cnblogs.com/files/mao2080/mqtt.rar


												


											
MQTT协议 Websocket JS客户端的更多相关文章
	

    
								
  1. MQTT协议学习总结
		
    一.MQTT介绍 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通 ...
    
		
    2. 
						
  2. Tsung MQTT协议简介及MQTT xml文档配置介绍
		
    MQTT协议简介及MQTT xml文档配置介绍 by:授客 QQ:1033553122 1. MQTT协议介绍 MQTT(Message Queuing Telemetry Transport,消息队 ...
    
		
    3. 
						
  3. MQTT协议及推送服务
		
    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...
    
		
    4. 
						
  4. MQTT协议－MQTT协议简介及协议原理
		
    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...
    
		
    5. 
						
  5. MQTT协议简介及协议原理
		
    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...
    
		
    6. 
						
  6. 转战物联网·基础篇05-通俗理解MQTT协议的实现原理和异步方式
		
      网络上搜索MQTT协议,会出现太多的解释,这里就不做官方标准释义的复制了.这一节我们从实战理解角度,通俗的将MQTT协议的作用及实现原理说一下,旨在可以快速理解MQTT协议.所以可能会出现很多看似 ...
    
		
    7. 
						
  7. 采用MQTT协议实现android消息推送（2）MQTT服务端与客户端软件对比、android客户端示列表
		
    1.服务端软件对比 https://github.com/mqtt/mqtt.github.io/wiki/servers 名称(点名进官网) 特性 简介 收费 支持的客户端语言 IBM MQ 完整的 ...
    
		
    8. 
						
  8. MQTT协议笔记之mqtt.io项目Websocket协议支持
		
    前言 MQTT协议专注于网络.资源受限环境,建立之初不曾考虑WEB环境,倒也正常.虽然如此,但不代表它不适合HTML5环境. HTML5 Websocket是建立在TCP基础上的双通道通信,和TCP通 ...
    
		
    9. 
						
  9. Lua编写wireshark插件初探——解析Websocket上的MQTT协议
		
    一.背景 最近在做物联网流量分析时发现, App在使用MQTT协议时往往通过SSL+WebSocket+MQTT这种方式与服务器通信,在使用SSL中间人截获数据后,Wireshark不能自动解析出MQ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. css背景图自适应全屏显示
			
    前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...
    
			
    2. 
						
  2. position详解
			
    本文旨在普及一下position的用法,CSS中position的使用率相当之高,对于新入行的小白,不仅要知其然,还要知其所以然. position(定位类型),主要有4种属性值 : static.f ...
    
			
    3. 
						
  3. 解决mac下brew install报错
			
    Error: Another active Homebrew update process is already in progress.Please wait for it to finish or ...
    
			
    4. 
						
  4. Docker国内Yum源和国内镜像仓库
			
    Docker国内Yum源和国内镜像仓库 2018年05月29日 :: nklinsirui 阅读数 6295更多 分类专栏: Docker 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa ...
    
			
    5. 
						
  5. $store.getters调用不执行
			
    $store.getters调用不执行 api:https://vuex.vuejs.org/zh/guide/getters.html 场景: 在登录时将登录得到的用户信息存储在vuex的state ...
    
			
    6. 
						
  6. @babel/traverse 使用方法小记
			
    @babel/traverse 官网: https://babeljs.io/docs/en/babel-traverse github:https://github.com/babel/babel/ ...
    
			
    7. 
						
  7. 北京化妆时尚气息自适应CSS例子
			
    三里屯太古广场——北京化妆时尚气息的先锋阵地! “乐色起义”创意化妆设计大赛——国内最具创意的公益设计大赛! CNature——国内最具个性的时尚环保公益组织! 一个多么奇妙的组合!就在2010年的这 ...
    
			
    8. 
						
  8. IIS7发布asp.net mvc提示404
			
    之前服务器用的都是2003Server的服务器,发布mvc项目都没问题,今天换了一台机器,系统为Windows Server2008 R2  64位的发布mvc项目后就提示: 百度看到好多人说在web ...
    
			
    9. 
						
  9. Bss段的作用及初始化
			
    初始化的全局变量:数据段 局部变量:栈 malloc:堆 未初始化的全局变量:Bss段 arm-linux-readelf -a 应用程序    可查看文件运行架构.大小端.共享库等信息 初始化Bss ...
    
			
    10. 
						
  10. -bash: ./centos-7.6.sh: /bin/bash^M: bad interpreter问题解决
			
    在windows下保存了一个脚本文件,用ssh上传到centos,添加权限执行nginx提示没有那个文件或目录.shell脚本放到/etc/init.d/目录下,再执行/etc/init.d/ngin ...
    
			
    11.