MQTT的入门级使用方法

微小菜鸡

已于 2024-06-20 10:39:00 修改

阅读量1.3k

点赞数 1

文章标签：信息与通信 nginx fiddler

于 2023-04-09 00:13:19 首次发布

本文链接：https://blog.csdn.net/2301_77256003/article/details/130034912

版权

前言

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

我是在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;
    }


}