特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过。如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处: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. Tsung MQTT协议简介及MQTT xml文档配置介绍

    MQTT协议简介及MQTT xml文档配置介绍 by:授客 QQ:1033553122 1. MQTT协议介绍 MQTT(Message Queuing Telemetry Transport,消息队 ...

  3. MQTT协议及推送服务

    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...

  4. MQTT协议-MQTT协议简介及协议原理

    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...

  5. MQTT协议简介及协议原理

    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...

  6. 转战物联网·基础篇05-通俗理解MQTT协议的实现原理和异步方式

      网络上搜索MQTT协议,会出现太多的解释,这里就不做官方标准释义的复制了.这一节我们从实战理解角度,通俗的将MQTT协议的作用及实现原理说一下,旨在可以快速理解MQTT协议.所以可能会出现很多看似 ...

  7. 采用MQTT协议实现android消息推送(2)MQTT服务端与客户端软件对比、android客户端示列表

    1.服务端软件对比 https://github.com/mqtt/mqtt.github.io/wiki/servers 名称(点名进官网) 特性 简介 收费 支持的客户端语言 IBM MQ 完整的 ...

  8. MQTT协议笔记之mqtt.io项目Websocket协议支持

    前言 MQTT协议专注于网络.资源受限环境,建立之初不曾考虑WEB环境,倒也正常.虽然如此,但不代表它不适合HTML5环境. HTML5 Websocket是建立在TCP基础上的双通道通信,和TCP通 ...

  9. Lua编写wireshark插件初探——解析Websocket上的MQTT协议

    一.背景 最近在做物联网流量分析时发现, App在使用MQTT协议时往往通过SSL+WebSocket+MQTT这种方式与服务器通信,在使用SSL中间人截获数据后,Wireshark不能自动解析出MQ ...

随机推荐

  1. java中内部类

    package com.xt.instanceoftest; import com.xt.instanceoftest.Body.Heart; public class StaticInnerClas ...

  2. ASP.NET CORE CACHE的使用(含MemoryCache,Redis)

    原文:ASP.NET CORE CACHE的使用(含MemoryCache,Redis) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接 ...

  3. luogu题解 P2419 【牛大赛Cow Contest】传递丢包

    题目链接: https://www.luogu.org/problemnew/show/P2419 分析: "在交际网络中,给定若干元素和若干对二元关系,且关系具有传递性. 通过传递性推导出 ...

  4. jumpserver开源堡垒机部署安装

    0x01.前言 Jumpserver 是全球首款完全开源的堡垒机,使用 GNU GPL v2.0 开源协议,是符合 4A 的专业运维审计系统. Jumpserver 使用 Python / Djang ...

  5. no input file specified 三种解决方法

    一.IIS Noinput file specified 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.ini 找到 ; cgi.f ...

  6. Windows下nginx的启动,重启,关闭功能

    @echo off rem 提供Windows下nginx的启动,重启,关闭功能 echo ==================begin======================== cls :: ...

  7. 20199319《Linux内核原理与分析》第十二周作业

    SET-UID程序漏洞实验 一.实验简介 Set-UID是Unix系统中的一个重要的安全机制.当一个Set-UID程序运行的时候,它被假设为具有拥有者的权限.例如,如果程序的拥有者是root,那么任何 ...

  8. c++ 数组 结构体

    接下来的一点时间我将会记录下我看的c++的一些心得体会,人贵在坚持,希望我可以一直坚持下去!!Go Fighting!   一.c++复合数据类型: 数组类型的一些注意事项: sizeof的用法: 当 ...

  9. mysql 在gtid环境下缺少一部分binlog部署从库

    我的环境: 有两台linux服务器 一台是192.168.1.1  mysql  端口3301 一台是192.168.1.2   mysql 端口3303 要讨论如何恢复从库,我们得先来了解如下一些概 ...

  10. HDU - 6393 Traffic Network in Numazu (基环树+树链剖分/LCA)

    题意:给定一个带权边无向基环树,有两种操作,一种是改变某个边的权值,另一种是询问两点间的最短路径. 可以对环进行缩点,以环为根建立一棵新树,并记录与环相连的所有点和环上的哪个点相连,将路径分为环外和环 ...