特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：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. NGINX工作原理(2)
			
    Nginx由内核和模块组成. Nginx本身做的工作实际很少,当它接到一个HTTP请求时,它仅仅是通过查找配置文件将此次请求映射到一个location block,而此location中所配置的各个指 ...
    
			
    2. 
						
  2. python之BeautifulSoup4
			
    阅读目录 1.Beautiful Soup4的安装配置 2.BeautifulSoup的基本用法 (1)节点选择器(tag) (2)方法选择器 (3)CSS选择器 (4)tag修改方法 Beautif ...
    
			
    3. 
						
  3. 转载：mysql数据库连接自动断开
			
    转自:https://www.cnblogs.com/ay-a/p/10520425.html MySql连接空闲8小时自动断开引起的问题   一.问题描述 ​ 最近遇到了一个奇怪的MySql数据库问 ...
    
			
    4. 
						
  4. 独热编码 pandas get_dummies
			
    映射技巧 将'income_raw'编码成数字值 income_mapping = {'<=50K': 0,'>50K': 1} income = income_raw.map(incom ...
    
			
    5. 
						
  5. python之multiprocessing多进程
			
    multiprocessing 充分利用cpu多核一般情况下cpu密集使用进程池,IO密集使用线程池.python下想要充分利用多核CPU,就用多进程. Process 类Process 类用来描述一 ...
    
			
    6. 
						
  6. MySQL配置文件my.cnf中文详解
			
    #BEGIN CONFIG INFO #DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大 #TYPE: SYSTEM #END CONFIG INFO # # ...
    
			
    7. 
						
  7. docker_Ubuntu16.04下安装cuda
			
    经过一上午的研究,终于配置好docker环境,并成功安装cuda9.0. (1)下载安装文件.首先去英伟达官网下载cuda安装包:https://developer.nvidia.com/cuda-t ...
    
			
    8. 
						
  8. orace result cache解析
			
      (1)   orace 11.2.0.4 在RAC数据库Dataguard切换时,出现少量数据丢失:          解决方案:关闭result cache 功能 或升级数据库版本并安装补丁:  ...
    
			
    9. 
						
  9. php禁止个别ip访问网站
			
    PHP禁止个别IP访问自己的网站,可以看看下面的方法. function get_ip_data(){ $ip=file_get_contents("http://ip.taobao.com ...
    
			
    10. 
						
  10. 文件操作相关函数（POSIX 标准  open,read,write,lseek,close）
			
    POSIX标准 open函数属于Linux中系统IO,用于“打开”文件,代码打开一个文件意味着获得了这个文件的访问句柄. int fd = open(参数1,参数2,参数3): int fd = op ...
    
			
    11.