Created
July 24, 2016 08:02
-
-
Save erhwenkuo/550eba6049a3437f597eb906f74ec2aa to your computer and use it in GitHub Desktop.
e2-rtw-s01-homework(angular-mqtt-pub)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml" ng-app="rtwApp"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>完成版:Angular-Mqtt-Pub</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 /><br /> | |
| Topic: <br /> | |
| <input type="text" ng-model="vm.topic" ng-show="vm.is_connected" /> | |
| <br /> | |
| Message: <br /> | |
| <input type="text" ng-model="vm.message" ng-show="vm.is_connected" /> | |
| <input type="button" value="Send" ng-click="action.send_message()" ng-show="vm.is_connected" /> <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.is_connected = 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 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 | |
| } | |
| }; | |
| $scope.action.send_message = function () { | |
| var mqtt_message = new Paho.MQTT.Message($scope.vm.message); | |
| mqtt_message.destinationName = $scope.vm.topic; | |
| mqtt_client.send(mqtt_message); | |
| // 重置變數 | |
| reset_variables(); | |
| }; | |
| // Utility函式 | |
| reset_variables = function () { | |
| $scope.vm.message = ""; | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment