特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：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. |、&、||、&&、^符号含义
			
    |和&为计算机中二进制之间的位运算 在计算机中二进制的0表示false,1表示true. |为位运算中的或运算:它的运算逻辑为一真则真,全假则假 &为位运算中的并运算:它的运算逻辑为一 ...
    
			
    2. 
						
  2. typeof,instanceof的区别，扩展知识：显示原型（prototype）与隐式类型（__protot__）
			
    3.typeof 和instanceof区别 1.typeof 主要用于判断对象类型 console.log(typeof null) //object console.log(typeof unde ...
    
			
    3. 
						
  3. N4_75条语法
			
    1. コ/ソ/ア/ド体系 -(こ.そ.あ.ど)れ/-(こ.そ.あ.ど)の A:-(こ.そ.あ.ど)れ 接续: 指示代词和场所代词,分近称.中称.远称.疑问称. 意思: 这个,那个,那个,哪个 例:これ ...
    
			
    4. 
						
  4. Java 计算两点间的全部路径（二）
			
    一.有向线段,存储开始点与结束点 /** * 有方向的线段 * * @author Gm * */ public class DirectionLine implements Cloneable {  ...
    
			
    5. 
						
  5. mac系统下Eclipse + pydev配置python Interpreter
			
    mac系统下Eclipse + pydev配置python Interpreter   之前都在windows下使用Eclipse + pydev 进行开发,未发现什么异常,最近对wxpy.itcha ...
    
			
    6. 
						
  6. shell条件嵌套（if条件语句）
			
    [注意1]:和Java.PHP等语言不一样,sh的流程控制不可为空,如: 代码如下: <?php if (isset($_GET["q"])) { search(q); }  ...
    
			
    7. 
						
  7. 4.pca与梯度上升法
			
    (一)什么是pca pca,也就是主成分分析法(principal component analysis),主要是用来对数据集进行降维处理.举个最简单的例子,我要根据姓名.年龄.头发的长度.身高.体重 ...
    
			
    8. 
						
  8. 2.flask模板--jinja2
			
    1.jinja2模板介绍和查找路径 import os from flask import Flask, render_template # 之前提到过在渲染模板的时候,默认会从项目根目录下的temp ...
    
			
    9. 
						
  9. concurrent.futures：线程池，让你更加高效、并发的处理任务
			
    并发任务池 concurrent.futures模块提供了使用工作线程或进程池运行任务的接口. 线程池和进程池的API是一致的,所以应用只需要做最小的修改就可以在线程和进程之间进行切换 这个模块提供了 ...
    
			
    10. 
						
  10. tensorflow各版本下载地址
			
    https://pypi.org/project/tensorflow-gpu/1.13.0/#files 把13改对你想要的版本
    
			
    11.