• 八、网页版消息推送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 水平有限、如有不妥的地方欢迎指正 谢谢!

  • 相关阅读:
    前端 CSS 基础
    前端 HTML基础
    前端 JavaScript基础
    GoldenGate 复制进程报错"OGG-01296 Error mapping",丢弃文件报错“Mapping problem with delete record (target format)”,且实际条目存在
    SaltStack 与 Python 程序的结合
    SUSE-11 本地 zypper 配置
    Centos-7 + Docker-1.12 中 devicemapper + direct_lvm 的 Docker 存储配置
    Docker-v17 的层级(layer)概念
    Oracle-11g 中使用表空间透明数据加密(TDE)
    SaltStack 的远程执行机制
  • 原文地址:https://www.cnblogs.com/yueli/p/7815093.html
Copyright © 2020-2023  润新知