MQTT的入门级使用方法

前言

作为小萌新的第一篇文章。

我是在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:

快速开始 | EMQX 5.0 文档

chrome:

Google 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就可以修改过来。  

 五.结束语。

作为我的处女作,还是有些小兴奋的。如果有什么错误之处,还望各位指出,以便我更正错误。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值