erhwenkuo · July 24, 2016 08:05
diff --git a/angular-mqtt-sub.html b/angular-mqtt-sub.html
 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="rtwApp">
 <head>
    <meta charset="utf-8" />
    <title>完成版:Angular-Mqtt-Sub</title>
    <link rel="icon" type="image/png" href="assets/imgs/ok.ico">
    <link href="assets/css/bootstrap.css" rel="stylesheet" />       <!-- 讓網頁漂亮一點的CSS Style -->
    <link href="assets/css/main.css" rel="stylesheet" />            <!-- 讓表單與角落離開一點 -->
    <script src="assets/js/angular.min.js"></script>                <!-- 操控網頁元件的函式庫 -->
    <script src="assets/js/mqttws31.min.js"></script>               <!-- 連結MQTT Broker的函式庫 -->
    <script src="assets/js/Math.uuid.js"></script>                  <!-- 一個產生Unique ID的函式庫 -->
 </head>
 <body ng-controller="rtwAppCtrl">
    <h3>Mqtt - 訊息主題的訂閱</h3>
    <!-- 一個簡單的網頁表單UI -->
    <form>
        Mqtt Host/Port: <br />
        <input type="text" ng-model="vm.mqtt_host" /> <input type="text" ng-model="vm.mqtt_port" /> <br />
        Topic: <br />
        <input type="text" ng-model="vm.topic" ng-show="vm.is_connected" ng-disabled="vm.is_subscribed" />
        <input type="button" value="Subscribe" ng-click="action.subscribe_topic()" ng-show="vm.is_connected && !vm.is_subscribed" />
        <input type="button" value="Unsubscribe" ng-click="action.unsubscribe_topic()" ng-show="vm.is_connected && vm.is_subscribed" /> <br /><br />
        <input type="button" id="connect" value="Connect" ng-click="action.connect_mqtt()" ng-show="!vm.is_connected" />
    </form>
    <!-- 程式邏輯 -->
    <script>
        // 定義Angular Module - APP
        var rtwApp = angular.module('rtwApp', []);

        // 定義Angular Controller
        rtwApp.controller('rtwAppCtrl', function ($scope) {
            // 全域變數
            var mqtt_client;
            // 初始view model的資料與變數
            $scope.vm = {};
            $scope.vm.mqtt_host = "eighty20.cc";
            $scope.vm.mqtt_port = "9001";
            $scope.vm.topic = "chat";
            $scope.vm.message = "";
            $scope.vm.btn_subscribe = "Subscribe";
            $scope.vm.is_connected = false;
            $scope.vm.is_subscribed = false;
            // 設定UI會觸發的動作
            $scope.action = {};
            $scope.action.connect_mqtt = function () {
                // 產生mqtt連結client物件的instance
                mqtt_client = new Paho.MQTT.Client($scope.vm.mqtt_host, Number($scope.vm.mqtt_port), Math.uuid(8, 16));
                // 設定某些事件的回呼處理的functions
                mqtt_client.onConnectionLost = onConnectionLost;
                mqtt_client.onMessageArrived = onMessageArrived;

                // 連接mqtt broker
                mqtt_client.connect({ onSuccess: onConnect });
                // 當成功建立mqtt broker的連結時會被呼叫的function
                function onConnect() {
                    // UI元件的控制
                    $scope.vm.is_connected = true;
                    $scope.$apply(); //<--這個動作通知angular.js來觸發data-binding的sync
                }
                // 當與mqtt broker的連結被斷開時會被呼叫的function
                function onConnectionLost(responseObject) {
                    if (responseObject.errorCode !== 0) {
                        console.log("onConnectionLost:" + responseObject.errorMessage);
                    }
                    // UI元件的控制
                    $scope.vm.is_connected = false;
                    $scope.$apply(); //<--這個動作通知angular.js來觸發data-binding的sync
                }
                // 當訂閱的主題有訊息時會被呼叫的callback function
                function onMessageArrived(message) {
                    // 把訊息的主要資訊擷取出來
                    var topic = message.destinationName;
                    // 建構一個訊息資訊物件
                    var msgObj = {
                        'topic': message.destinationName,
                        'retained': message.retained,
                        'qos': message.qos,
                        'payload': message.payloadString
                    };

                    // 打印到Browser的debug console
                    console.log("onMessageArrived:" + JSON.stringify(msgObj));
                    // 使用html的alert視窗來秀出訊息
                    alert(JSON.stringify(msgObj));
                }
            };

            $scope.action.subscribe_topic = function () {
                // 要訂閱訊息主題
                mqtt_client.subscribe($scope.vm.topic);                
                $scope.vm.is_subscribed = true; // 更新flag                
            };

            $scope.action.unsubscribe_topic = function () {               
                // 要解除訂閱
                mqtt_client.unsubscribe($scope.vm.topic);
                $scope.vm.is_subscribed = false; // 更新flag                
            };
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>

	<html xmlns="http://www.w3.org/1999/xhtml" ng-app="rtwApp">
	<head>
	<meta charset="utf-8" />
	<title>完成版:Angular-Mqtt-Sub</title>
	<link rel="icon" type="image/png" href="assets/imgs/ok.ico">
	<link href="assets/css/bootstrap.css" rel="stylesheet" /> <!-- 讓網頁漂亮一點的CSS Style -->
	<link href="assets/css/main.css" rel="stylesheet" /> <!-- 讓表單與角落離開一點 -->
	<script src="assets/js/angular.min.js"></script> <!-- 操控網頁元件的函式庫 -->
	<script src="assets/js/mqttws31.min.js"></script> <!-- 連結MQTT Broker的函式庫 -->
	<script src="assets/js/Math.uuid.js"></script> <!-- 一個產生Unique ID的函式庫 -->
	</head>
	<body ng-controller="rtwAppCtrl">
	<h3>Mqtt - 訊息主題的訂閱</h3>
	<!-- 一個簡單的網頁表單UI -->
	<form>
	Mqtt Host/Port: <br />
	<input type="text" ng-model="vm.mqtt_host" /> <input type="text" ng-model="vm.mqtt_port" /> <br />
	Topic: <br />
	<input type="text" ng-model="vm.topic" ng-show="vm.is_connected" ng-disabled="vm.is_subscribed" />
	<input type="button" value="Subscribe" ng-click="action.subscribe_topic()" ng-show="vm.is_connected && !vm.is_subscribed" />
	<input type="button" value="Unsubscribe" ng-click="action.unsubscribe_topic()" ng-show="vm.is_connected && vm.is_subscribed" /> <br /><br />
	<input type="button" id="connect" value="Connect" ng-click="action.connect_mqtt()" ng-show="!vm.is_connected" />
	</form>
	<!-- 程式邏輯 -->
	<script>
	// 定義Angular Module - APP
	var rtwApp = angular.module('rtwApp', []);

	// 定義Angular Controller
	rtwApp.controller('rtwAppCtrl', function ($scope) {
	// 全域變數
	var mqtt_client;
	// 初始view model的資料與變數
	$scope.vm = {};
	$scope.vm.mqtt_host = "eighty20.cc";
	$scope.vm.mqtt_port = "9001";
	$scope.vm.topic = "chat";
	$scope.vm.message = "";
	$scope.vm.btn_subscribe = "Subscribe";
	$scope.vm.is_connected = false;
	$scope.vm.is_subscribed = false;
	// 設定UI會觸發的動作
	$scope.action = {};
	$scope.action.connect_mqtt = function () {
	// 產生mqtt連結client物件的instance
	mqtt_client = new Paho.MQTT.Client($scope.vm.mqtt_host, Number($scope.vm.mqtt_port), Math.uuid(8, 16));
	// 設定某些事件的回呼處理的functions
	mqtt_client.onConnectionLost = onConnectionLost;
	mqtt_client.onMessageArrived = onMessageArrived;

	// 連接mqtt broker
	mqtt_client.connect({ onSuccess: onConnect });
	// 當成功建立mqtt broker的連結時會被呼叫的function
	function onConnect() {
	// UI元件的控制
	$scope.vm.is_connected = true;
	$scope.$apply(); //<--這個動作通知angular.js來觸發data-binding的sync
	}
	// 當與mqtt broker的連結被斷開時會被呼叫的function
	function onConnectionLost(responseObject) {
	if (responseObject.errorCode !== 0) {
	console.log("onConnectionLost:" + responseObject.errorMessage);
	}
	// UI元件的控制
	$scope.vm.is_connected = false;
	$scope.$apply(); //<--這個動作通知angular.js來觸發data-binding的sync
	}
	// 當訂閱的主題有訊息時會被呼叫的callback function
	function onMessageArrived(message) {
	// 把訊息的主要資訊擷取出來
	var topic = message.destinationName;
	// 建構一個訊息資訊物件
	var msgObj = {
	'topic': message.destinationName,
	'retained': message.retained,
	'qos': message.qos,
	'payload': message.payloadString
	};

	// 打印到Browser的debug console
	console.log("onMessageArrived:" + JSON.stringify(msgObj));
	// 使用html的alert視窗來秀出訊息
	alert(JSON.stringify(msgObj));
	}
	};

	$scope.action.subscribe_topic = function () {
	// 要訂閱訊息主題
	mqtt_client.subscribe($scope.vm.topic);
	$scope.vm.is_subscribed = true; // 更新flag
	};

	$scope.action.unsubscribe_topic = function () {
	// 要解除訂閱
	mqtt_client.unsubscribe($scope.vm.topic);
	$scope.vm.is_subscribed = false; // 更新flag
	};
	});
	</script>
	</body>
	</html>