特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：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. 全面解析java编码问题
			
    1.web.xml文件里配置 <filter> <filter-name>CharacterEncodingFilter</filter-name> <fil ...
    
			
    2. 
						
  2. java中this总结（转载请注明出处）
			
    1:this在构造方法中:this可以进行构造方法中的相互调用,this(参数): 2:this调用方法中,代表调用该方法的对象的地址,例如下面的代码比较 package thisTest; publ ...
    
			
    3. 
						
  3. Charles学习（二）之使用Map local代理本地静态资源以及配置网页代理在Mac浏览器上调试移动端
			
    前言 我们在开发的过程肯定是一边写代码,一边查看自己的代码写的是否存在问题,那么问题来了,有两种情况 情况一:我们可以本地起服务,那么我们就可以在本地检查自己的代码,查看运行结果 情况二:本地无法起服 ...
    
			
    4. 
						
  4. docker 环境安装
			
    centos7下安装docker.docker-compose 参考文档:https://docs.docker.com/ 一.安装docker 1).Docker 要求 CentOS 系统的内核版本 ...
    
			
    5. 
						
  5. 部署 12306 github 项目
			
    郑重声明, 本文仅用作学习研究使用,请勿用作商业用途,遵守法律!!! 部署环境有些坑,踩一次就够了... 原项目地址 git clone 原项目以及 识别验证码的模型 如果遇到 无法解析的问题 ,则  ...
    
			
    6. 
						
  6. JDK1.8中LinkedList的实现原理及源码分析
			
    详见:https://blog.csdn.net/cb_lcl/article/details/81222394 一.概述           LinkedList底层是基于双向链表(双向链表的特点, ...
    
			
    7. 
						
  7. 常用的商业级和免费开源Web漏洞扫描工具
			
    Scanv 国内著名的商业级在线漏洞扫描.可以长期关注,经常会有免费活动.SCANV具备自动探测发现无主资产.僵尸资产的功能,并对资产进行全生命周期的管理.主动进行网络主机探测.端口探测扫描,硬件特性 ...
    
			
    8. 
						
  8. php后门简单检测脚本
			
    # coding:utf-8 import os import sys import re rulelist = [ '(\$_(GET|POST|REQUEST)\[.{0,15}\]\(\$_(G ...
    
			
    9. 
						
  9. Delphi 控制程序的执行
			
    
			
    10. 
						
  10. HackIM web关writeup
			
    Web100 访问页面将看到下面的错误 在burp里使用request / response查看有没有什么不正常的地方.如下图所示,在返回的数据包里被设置了两次不同的PHPSESSID. 如果我把PH ...
    
			
    11.