八、網頁版消息推送SDK-WebSockets

介紹

　　由於項目組需求、最近在研究消息推送服務平台、結合業務和使用場景分析最終選擇的是 Mosquitto 消息服務器、 Mosquitto 服務器的安裝、配置、集群搭建 我就不在這多說了、有興趣的可以看我對 Mosquitto  學習記錄的前七篇文章。 今天在這主要介紹網頁版 WebSockets 實現消息的推送。

1: 本 SDK 的開發 是基於 eclipse.paha.javaScript 包來實現的。

2: 引入開發需要的JavaScript 

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

 注： 此文件可以到官網下載、 地址：https://raw.githubusercontent.com/eclipse/paho.mqtt.javascript/master/src/mqttws31.js

3: 封裝實現 js - sdk 

var websocket = function(config) {

	this.host = config.host;// ip 
	this.port = config.port;// 端口
	this.useTLS = config.useTLS; // 是否啟用TLS 安全連接
	this.topic = config.topic;// 訂閱Topic
	this.userName = config.userName; // 連接用戶名
	this.password = config.password; // 密碼
	this.cleansession = config.cleansession; //false : 表示每次相同的身份登陸： true ： 表示每次以新身份登陸 
	this.reconnectTimeout = 5000; // 重試超時時間
	this.clientId = config.clientId; // 客戶端名稱
	var mqttClient;

	this.connect = function MQTTconnect() {
		mqttClient = new Paho.MQTT.Client(this.host, this.port, clientId);

		var options = {
			timeout : 10,
			useSSL : this.useTLS,
			cleanSession : this.cleansession,
			onSuccess : onConnect,
			onFailure : function(message) {
				faildMssge(message.errorMessage, "Retrying",
						fialdMessageCallback)
				setTimeout(MQTTconnect, this.reconnectTimeout);
			}
		};

		mqttClient.onConnectionLost = onConnectionLost;
		mqttClient.onMessageArrived = onMessageArrived;

		if (this.userName != null) {
			options.userName = this.userName;
			options.password = this.password;
		}

		console.log("Host=" + host + ", port=" + port + " TLS = " + useTLS
				+ " username=" + userName + " password=" + password);
		mqttClient.connect(options);
	}
	function onConnect() {
		mqttClient.subscribe(topic, {
			qos : 0
		});
	}

	function onConnectionLost(response) {
		setTimeout(MQTTconnect, this.reconnectTimeout);
		faildMssge("connection lost: " + responseObject.errorMessage,
				". Reconnecting", fialdMessageCallback)
	}
	;

	function onMessageArrived(message) {
		var topic = message.destinationName;
		var payload = message.payloadString;
		callback(topic, payload, messageCallback);
	}
	;

	function callback(topic, payload, messageCallback) {
		messageCallback(topic, payload);
	}

	function faildMssge(errorMessage, type, fialdMessageCallback) {
		fialdMessageCallback(errorMessage, type);
	}

	this.sendMessage = function sendMessage(topic, message) {
		var message = new Paho.MQTT.Message(message);
		message.destinationName = topic;
		message.qos = 0;
		mqttClient.send(message);
	}
}

 4: 使用說明

// Create a config 
config = {
		host : '172.16.192.103',
		port : 9001,
		topic : '#',
		useTLS : false,
		userName : null,
		password : null,
		cleansession : true,
		clientId : 'clientId'
	}	
//Create a client instance
var client = new websocket(config);
// connect the client
client.connect();
//send message 	
client.sendMessage(topic, message);
// subscribe topic message callback function
function messageCallback(topic, payload) {
	// 業務邏輯處理
}
//error message callback function
function fialdMessageCallback(errorMessage, type) {
	//業務邏輯處理
}

 到這網頁版消息推送基本功能已經實現： 如想要完整的 web 應用實例請到如下地址下載：https://github.com/yuelicn/mqtt-client.git 

本人 JavaScript 水平有限、如有不妥的地方歡迎指正 謝謝！