專題指導(物聯網雲端應用)

楊皓程 2021/11/02

相關檔案/工具

MQTT Broker架設(Linux)

root@localhost:~# sudo apt update
root@localhost:~# sudo apt upgrade
root@localhost:~# sudo apt install -y mosquitto mosquitto-clients vim
root@localhost:~# rm /etc/mosquitto/passwd
root@localhost:~# echo "" > /etc/mosquitto/passwd
root@localhost:~# sudo mosquitto_passwd -b /etc/mosquitto/passwd test 12345
root@localhost:~# echo "port 1883" > /etc/mosquitto/conf.d/test.conf
root@localhost:~# echo "allow_anonymous false" >> /etc/mosquitto/conf.d/test.conf
root@localhost:~# echo "password_file /etc/mosquitto/passwd" >> /etc/mosquitto/conf.d/test.conf
root@localhost:~# echo "listener 1884" >> /etc/mosquitto/conf.d/test.conf
root@localhost:~# echo "protocol websockets" >> /etc/mosquitto/conf.d/test.conf
root@localhost:~# sudo systemctl restart mosquitto

A-2. 測試伺服器

Web: https://mqtt.cumi.co
MQTT: mqtt://mqtt.cumi.co:1883
WS: ws://mqtt.cumi.co/websocket
WSS: wss://mqtt.cumi.co/websocket
帳號: test
密碼: 12345

Web Server架設(Linux)

B-1. 架設(Nginx)

root@localhost:~# sudo apt update
root@localhost:~# sudo apt upgrade
root@localhost:~# sudo apt install -y nginx

B-2. Nginx WebSite Config

root@localhost:~# cd /etc/nginx/sites-available
root@localhost:~# vi iot-mqtt

server {
	#網域名稱
	server_name xxx.xxx.xx;
	#網站目錄
	root /var/www/html;
	location /websocket {
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header Host $host;
		proxy_pass http://websocket-mqtt;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
		proxy_connect_timeout 4s;
		proxy_send_timeout 12s;
		proxy_read_timeout 3600s;
	}
	listen 80;
	listen [::]:80;
}
upstream websocket-mqtt {
	#代理Websocker Port
	server 127.0.0.1:1884;
	keepalive 1000;
}

root@localhost:~# cd ../sites-enabled
root@localhost:~# ln -s ../sites-available/iot-mqtt .
root@localhost:~# service nginx restart

B-3. WebClient程式

root@localhost:~# vi /var/www/html/mqtt.html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="robots" content="index, follow">
		<title>MQTT over Websocket</title>
		<!-- cdn javascript and css -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/3.0.0/mqtt.min.js"></script>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="container">
			<script>
			const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8);
			const host = 'ws://xxx.xxx.xx/websocket';
			const options = {
				keepalive: 10,
				clientId: clientId,
				protocolId: 'MQTT',
				protocolVersion: 4,
				username: 'test',
				password: '12345',
				clean: true,
				will: {
					topic: 'iot/web-client',
					payload: 'web client is online',
					qos: 0,
					retain: false
				},
			};
			const client = mqtt.connect(host, options);
			client.on('connect', () => {
				$(".console").prepend($("<li/>").html('Connected to MQTT server'));
				client.subscribe('iot/#', { qos: 0 });
			});
			client.on('message', (topic, message, packet) => {
				$(".console").prepend($("<li/>").html("[<span style='color:green'>" + topic + "</span>] <span style='color:blue'>" + message.toString() + "</span>"));
			});
			client.on('error', (err) => {
				$(".console").prepend($("<li/>").html('Connection error'));
				client.end();
			});
			function publish_data() {
				var uid = $("#uid").val();
				var device = $("#device").val();
				var power = $("#power").val();
				client.publish('iot/' + uid, device + "." + power, { qos: 0, retain: false });
			}
			</script>
			<h1>MQTT over Websocket</h1>
			<div>
				<input class="input input-sm" id="uid" type="input" value="a1">
				<select class="input input-sm" id="device">
					<option value="1">加熱裝置</option>
					<option value="2">降溫裝置</option>
				</select>
				<input class="input input-sm" id="power" type="number" value="0" max="100" min="0">
				<button class="btn btn-primary btn-sm" onclick="publish_data()">發送指令</button>
			</div>
			<div class="console"></div>
		</div>
	</body>
</html>

韌體

C-1. NodeMCU(ESP8266)

#include <ESP8266WiFi.h>
#include <PubSubClient.h>

// WiFi
const char *ssid = "TestWifi";		// Enter your WiFi name
const char *password = "123456789";	// Enter WiFi password

// MQTT Broker
const char *mqtt_broker = "xxx.xxx.xx";
const char *topic = "iot/a2";
const char *mqtt_username = "test";
const char *mqtt_password = "12345";
const int mqtt_port = 1883;

WiFiClient espClient;
PubSubClient client(espClient);

void setup() {
	// Set software serial baud to 115200;
	Serial.begin(9600);
	// connecting to a WiFi network
	WiFi.begin(ssid, password);
	while (WiFi.status() != WL_CONNECTED) {
		delay(500);
		//Serial.println("Connecting to WiFi..");
	}
	//Serial.println("Connected to the WiFi network");
	//connecting to a mqtt broker
	client.setServer(mqtt_broker, mqtt_port);
	client.setCallback(callback);
	while (!client.connected()) {
		String client_id = "esp8266-client-";
		client_id += String(WiFi.macAddress());
		//Serial.printf("The client %s connects to the public mqtt broker\n", client_id.c_str());
		if (client.connect(client_id.c_str(), mqtt_username, mqtt_password)) {
			//Serial.println("Public mqtt broker connected");
		} else {
			//Serial.print("failed with state ");
			//Serial.print(client.state());
			delay(2000);
		}
	}
	// publish and subscribe
	client.publish(topic, "device is online");
	client.subscribe(topic);
}

void callback(char *topic, byte *payload, unsigned int length) {
	char strarr[length];
	for (int i = 0; i < length; i++) {
		strarr[i] = (char) payload[i];
		//Serial.print((char) payload[i]);
	}
	Serial.println(strarr);
}

void loop() {
	client.loop();
}

Heroku MQTT 測試伺服器(by HC)

D-1. 連線資訊

host: driver.cloudmqtt.com
mqtt port: mqtt://driver.cloudmqtt.com:18687
mqtt(ssl) port: mqtt://driver.cloudmqtt.com:28687
wss(tls) port: wss://driver.cloudmqtt.com:38687
connection limit: 5
user: test
pass: 12345
topic: iot/#

D-2. 測試頁面

D-3. NodeMCU(ESP8266) 韌體

#include <ESP8266WiFi.h>
#include <PubSubClient.h>

// WiFi
const char *ssid = "TestWifi";		// Enter your WiFi name
const char *password = "123456789";	// Enter WiFi password

// MQTT Broker
const char *mqtt_broker = "driver.cloudmqtt.com";
const char *topic = "iot/a1";
const char *mqtt_username = "test";
const char *mqtt_password = "12345";
const int mqtt_port = 18687;

WiFiClient espClient;
PubSubClient client(espClient);

void setup() {
	// Set software serial baud to 115200;
	Serial.begin(9600);
	// connecting to a WiFi network
	WiFi.begin(ssid, password);
	while (WiFi.status() != WL_CONNECTED) {
		delay(500);
		//Serial.println("Connecting to WiFi..");
	}
	//Serial.println("Connected to the WiFi network");
	//connecting to a mqtt broker
	client.setServer(mqtt_broker, mqtt_port);
	client.setCallback(callback);
	while (!client.connected()) {
		String client_id = "esp8266-client-";
		client_id += String(WiFi.macAddress());
		//Serial.printf("The client %s connects to the public mqtt broker\n", client_id.c_str());
		if (client.connect(client_id.c_str(), mqtt_username, mqtt_password)) {
			//Serial.println("Public mqtt broker connected");
		} else {
			//Serial.print("failed with state ");
			//Serial.print(client.state());
			delay(2000);
		}
	}
	// publish and subscribe
	client.publish(topic, "device is online");
	client.subscribe(topic);
}

void callback(char *topic, byte *payload, unsigned int length) {
	char strarr[length];
	for (int i = 0; i < length; i++) {
		strarr[i] = (char) payload[i];
		//Serial.print((char) payload[i]);
	}
	Serial.println(strarr);
}

void loop() {
	client.loop();
}