前言
作为小萌新的第一篇文章。
我是在Windows上成功运行的。
在此浅讲一下mqtt的协议简单用法。
逻辑图如下:
一.所需软件和配置。
代理方面:nginx,fiddler
使用到的编程软件:notepad++(或电脑自带记事本)
mqtt消息服务器:emqx
浏览器:chrome
二.软件下载地址。
nginx:
英语官方:nginx news
中文文档:http://www.nginx.cn/doc/
fiddler:
Download Fiddler Web Debugging Tool for Free by Telerik
emqx:
chrome:
三.所需配置
emqx:在WebSocket客户端里面配置
(附加:第一次使用可以直接开多个连接,在本机上自己发给自己测试)
配置html:
<script type="text/javascript" src="http://www.my-soft.net.cn/zctx/Js/third/jquery.min.js"></script>
<script type="text/javascript" src="http://www.my-soft.net.cn/zctx/Js/third/mqttws31.js"></script>
MQTT也可以为H5页面直接访问,如下是一个基于Websockets的MQTT调试器,这里使用浏览器+Nginx+Mosquitto演示。
<br/>
<table width=100% border=1px>
<tr><td style="width:20%">Client</td><td style="width:80%"> <input id="client" type="text" value="client_20220603" /></td></tr>
<tr><td>Host</td><td> <input id="host" type="text" value="www.my-soft.net.cn"/></td></tr>
<tr><td>Port</td><td> <input id="port" type="number" value="443"/> </td></tr>
<tr><td>SSL</td><td> <input id="ssl" type="checkbox" checked/> </td></tr>
<tr><td>User</td><td> <input id="user" type="text" value="user"/> </td></tr>
<tr><td>Passwd</td><td> <input id="pwd" type="text" value="passwd"/> </td></tr>
<tr><td>Subscribe Topic</td><td> <input id="subtopic" type="text" value="ccnet/#"/> </td></tr>
<tr><td>Publish Topic</td><td> <input id="pubtopic" type="text" value="ccnet/up/abc"/> </td></tr>
<tr><td>State</td><td id="state"> </td></tr>
<tr><td></td><td>
<input type="button" value="Init" onclick="javascript:onInit();"/>
<input type="button" value="Send" onclick="javascript:onSend();"/>
</td></tr>
<tr><td>Publish Message</td><td> <textarea id="message" cols=50 rows=2>Hello , Websockets world!</textarea> </td></tr>
<tr><td>Subscribe Messages</td><td> <textarea id="submessage" cols=50 rows=10></textarea> </td></tr>
</table>
<script>
var ind = 0;
var ssl = true;
var mqtt;
var client = $("#client").val();
var host = $("#host").val();
var port = parseInt($("#port").val());
var user = $("#user").val();
var pwd = $("#pwd").val();
// onInit
function onInit(){
client = $("#client").val();
host = $("#host").val();
port = parseInt($("#port").val());
user = $("#user").val();
pwd = $("#pwd").val();
console.log(ssl);
ind = 0;
MQTTconnect();
}
// onConnect 事件
function onConnect() {
console.log('connected.');
$("#state").text('connected.');
// 订阅 download topic
var subOptions = {
qos: 1,
onSuccess: onSubscribe
};
mqtt.subscribe($("#subtopic").val(), subOptions);
}
function onSend() {
console.log('onSend.');
$("#state").text('onSend.');
var raw_message = $("#message").val();
message = new Paho.MQTT.Message(raw_message);
message.destinationName = $("#pubtopic").val();
console.log('sending message: ' + raw_message );
mqtt.send(message);
}
// 订阅主题成功事件
function onSubscribe(context) {
console.log('subscribe success');
console.log(context);
$("#state").text('subscribe success');
}
// 连接失败事件
function onFailure(message) {
console.log('connect failed.');
$("#state").text('connect failed.');
}
// onMessageArrived 事件
function onMessageArrived(message) {
console.log('new message arrived...');
$("#state").text('new message arrived...');
console.log(message.payloadString);
$("#submessage").text( ++ind + ":" + message.payloadString + "\r\n" + $("#submessage").text());
}
// 建立 MQTT websocket 连接
function MQTTconnect() {
console.log('connecting to ' + host + ':' + port + " listen on " + client);
$("#state").text('connecting to ' + host + ':' + port + " listen on " + client);
mqtt = new Paho.MQTT.Client(host, port, client);
var options = {
timeout: 3,
onSuccess: onConnect,
onFailure: onFailure,
useSSL: ssl, // https required
userName: user,
password: pwd,
mqttVersion: 4
};
mqtt.onMessageArrived = onMessageArrived;
mqtt.connect(options);
}
$("#ssl").click(function () {
if ($(this).prop("checked")) {
ssl = true;
} else {
ssl = false;
}
});
</script>
html效果图
配置nginx:
在nginx的目录下conf里面创建一个conf形式的文件加入此配置。
#这个配置mqtt
map $http_upgrade $connection_upgrade{
default upgrade;
'' close;
}
server
{
#访问80端口
listen 80;
#listen 443 ssl;
#ssl_certificate /etc/nginx/conf.d/www.domain.com/server.crt;
#ssl_certificate_key /etc/nginx/conf.d/www.domain.com/server.key;
#ssl_password_file /etc/nginx/conf.d/www.domain.com/pwd.txt;
#server_name后面是配置的域名(可根据自己喜好:www.abc.com等)
server_name www.domain.com;
#这个配置访问配置好的html(root +html的绝对地址)(index +html的名字)
location / {
root D:/TX/mqtt;
index index.html;
}
#(端口号要与emqx里面设置的一样)
location /mqtt {
proxy_pass http://127.0.0.1:8083/mqtt/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
注意事项:
1.nginx在每次开机后需要启动
start nginx
2.nginx每次更改配置后需要在cmd里面重启
nginx -s reload
3.查看是否有多个nginx
ps aux|grep nginx
4.杀死进程
kill -s SIGTERM (对应pid号)
5.每次更新nginx都需要重启(必须)
6.每次重启玩nginx后chrome都需要重启或刷新(建议关了再开)
fiddler配置:
点击菜单栏TOOLS——HOSTS勾选Enable后输入 {IP地址(加空格)自己编辑的域名}点击save
也可以在C:\Windows\System32\drivers\etc\hosts里面添加 {IP地址(加空格)自己编辑的域名}(不推荐)
IP地址可以选择127.0.0.1(代表本机)
或者在查看自己所连局域网的IP地址(192.168.XXX.XXX)不同网络下IP不同
小技巧:使用fiddler代理可以让手机也进入这个界面(需要在同一局域网里面)
四.效果演示:
这里因为手机编译的问题出现乱码,稍微调整一下html就可以修改过来。
五.结束语。
作为我的处女作,还是有些小兴奋的。如果有什么错误之处,还望各位指出,以便我更正错误。