特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：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. IAP技术原理
			
    目录 IAP技术原理 更新记录 IAP与ISP的概念及原理 ISP简介 ISP原理 IAP简介 IAP原理 IAP优势 IAP的设计 1.程序启动流程 2.中断向量表的重定位 3.IAP跳转APP函数 ...
    
			
    2. 
						
  2. 使用python进行pdf文件分割
			
    Python代码 import os from pyPdf import PdfFileWriter, PdfFileReader def split(pdf_file, delta, output_ ...
    
			
    3. 
						
  3. 本地存储cookie,localStorage,sessionStorage
			
    常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...
    
			
    4. 
						
  4. hdfs 配置文件详解
			
    – dfs.name.dir – NameNode 元数据存放位置 – 默认值:使用core-site.xml中的hadoop.tmp.dir/dfs/name – dfs.block.size –  ...
    
			
    5. 
						
  5. poj 1458 Common Subsequence（dp)
			
    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 46630   Accepted: 19 ...
    
			
    6. 
						
  6. aiomysql实现对数据库异步读取
			
    有一个库叫做aiomysql,这是一个基于asyncio和pymysql的库.至于为什么可以在tornado中使用,是因为高版本tornado的底层使用了asyncio. import asyncio ...
    
			
    7. 
						
  7. 面试复习题（二）JavaSE高级（未完成）
			
    一.Java中的反射 3.说说你对Java中反射的理解 Java中的反射首先是能够获取到Java中要反射类的字节码,获取字节码有3种办法. class.forName(className) 类名.cl ...
    
			
    8. 
						
  8. Python基础：深浅拷贝
			
    对于数字.字符串深浅拷贝: import copy num = 0 copy_num = copy.copy(num) print("These are normal copy") ...
    
			
    9. 
						
  9. windows调试之命令行窗口问题
			
    CProProcess::InitProProcess(_T("safeProcessDemo")); cout << "Enter 'q' to exit: ...
    
			
    10. 
						
  10. Office365 PowerShell打开邮箱审计功能
			
    最近总公司要求Office365需要在所有的邮箱上面打开审计功能.这个功能没法通过图形界面操作,只能通过powershell脚本实现. 微软提供了一个官方的脚本,不过里面有个小bug https:// ...
    
			
    11.