关于长连接的协议方式MQTT

协议名称
MQTT

远程控制水肥机项目

//选中订阅主题 w2320308267 waterFertilizer
var selectedTopics = [‘waterFertilizer’];

    //选中发布主题
    var currentTopic='waterFertilizer';

    //客户端选项
    var option = {
        "ServerUri": "39.98.155.166",
        "ServerPort": 8083,
        "UserName": "zzokq",
        "Password": "123456",
        "ClientId": "",
        "TimeOut": 5,
        "KeepAlive": 100,
        "CleanSession": false,
        "SSL":false
    }

    //客户端
    var client;
    var Afeisu,Bfeisu,Cfeisu,Dfeisu,suanLiu;
	
	option.ClientId = guid();

            client = new Paho.Client(option.ServerUri, option.ServerPort, option.ClientId)

            client.onConnectionLost = onConnectionLost;
            client.onMessageArrived = onMessageArrived;

            client.connect({
                invocationContext: {
                    host: option.ServerUri,//IP地址
                    port: option.ServerPort,//端口号
                    path: client.path,
                    clientId: option.ClientId//标识
                },
                timeout: option.TimeOut,//连接超时时间
                keepAliveInterval: option.KeepAlive,//心跳间隔
                cleanSession: option.CleanSession,//是否清理Session
                useSSL: option.SSL,//是否启用SSL
                userName: option.UserName,  //用户名
                password: option.Password,  //密码
                onSuccess: onConnect,//连接成功回调事件
                onFailure: onError//连接失败回调事件
            });

// var msg = “”;
// for(var i in selectedTopics){
// var t = selectedTopics[i];
// console.log(t.Topic)
// client.subscribe(t.Topic);
// msg+=t.Topic+“;”
// }
// WriteToStatus(“成功订阅主题：” + msg);

// setTimeout(function(){
// client.subscribe(‘waterFertilizer’);
// WriteToStatus(“成功订阅主题：” );
// },100)

	//连接成功事件
    function onConnect() {
        WriteToStatus("连接成功！")
        client.subscribe('waterFertilizer');
        WriteToStatus("成功订阅主题：水肥机主题" );
        client.subscribe('meteorology');
        WriteToStatus("成功订阅主题：环境监测主题" );
        enable($("#btnConnect"), false);
        enable($("#btnDisconnect"), true);
        enable($("#btnPublish"), true);
        enable($("#btnSubscribe"), true);
    }
    //连接失败事件
    function onError(e) {
        WriteToStatus("连接失败：" + e)

        enable($("#btnConnect"), true);
        enable($("#btnDisconnect"), false);
        enable($("#btnPublish"), false);
        enable($("#btnSubscribe"), false);
    }
    //连接断开事件
    function onConnectionLost(e) {
        if (e.errorCode !== 0) {
            WriteToStatus("连接异常断开:" + e.errorMessage);
            enable($("#btnConnect"), true);
            enable($("#btnDisconnect"), false);
            enable($("#btnPublish"), false);
            enable($("#btnSubscribe"), false);
        }
    }
    //接收消息事件
    function onMessageArrived(data) { //jinbang  dianchifaA shuifeiji chubeng dianchifaB
    	console.log(data.payloadString)
    	var returnData= JSON.parse(data.payloadString);
    	console.log(returnData)
    	
    	if(returnData.se){
    	
    	for (i = 0; i < returnData.se.length; i++) { 
		    console.log(returnData.se[i])

// if(returnData.se[i].ch==“电磁阀1”){
// console.log(returnData.se[i].val)
// if(returnData.se[i].val==“1”){
// console.log(“电磁阀1 “)
// $(”#dianchifaA”).lcs_on();
// }else{
// $(“#dianchifaA”).lcs_off();
// }
// }
// if(returnData.se[i].ch==“电磁阀2”){
// if(returnData.se[i].val==“1”){
// $(“#dianchifaB”).lcs_on(); $(“#dianchifaB”).lcs_off();
// }else{
// $(“#dianchifaB”).lcs_off();
// }
// }
//
// if(returnData.se[i].ch==“进水泵”){
// if(returnData.se[i].val==“1”){
// $(“#jinbang”).lcs_on();
// }else{
// $(“#jinbang”).lcs_off();
// }
// }
//
// if(returnData.se[i].ch==“施肥泵”){
// console.log(returnData.se[i].val)
// if(returnData.se[i].val==“1”){
// $(“#chubeng”).lcs_on();
// }else{
// $(“#chubeng”).lcs_off();
// }
// }

		    if(returnData.se[i].ch=="酸流速"){
		    	console.log(returnData.se[i].val)
		    	suanLiu=returnData.se[i].val
		    }
		    
		    if(returnData.se[i].ch=="B肥速"){
		    	console.log(returnData.se[i].val)
		    	Bfeisu=returnData.se[i].val
		    }
		    
		    if(returnData.se[i].ch=="C肥速"){
		    	console.log(returnData.se[i].val)
		    	Cfeisu=returnData.se[i].val
		    }
		    
		    if(returnData.se[i].ch=="D肥速"){
		    	console.log(returnData.se[i].val)
		    	Dfeisu=returnData.se[i].val
		    }
		    
		    if(returnData.se[i].ch=="A肥速"){
		    	console.log(returnData.se[i].val)
		    	Afeisu=returnData.se[i].val
		    }
		    
		    if(returnData.se[i].ch=="PH值"){
		    	console.log(returnData.se[i].val)

// suanLiu=returnData.se[i].val
}

		    if(returnData.se[i].ch=="EC电导率"){
		    	console.log(returnData.se[i].val)
		    }
		    
		    if(returnData.se[i].ch=="A肥用量"){
		    	console.log(returnData.se[i].val)
		    }
		    
		    if(returnData.se[i].ch=="B肥用量"){
		    	console.log(returnData.se[i].val)
		    }
		    
		    if(returnData.se[i].ch=="C肥用量"){
		    	console.log(returnData.se[i].val)
		    }
		    
		    if(returnData.se[i].ch=="D肥用量"){
		    	console.log(returnData.se[i].val)
		    }
		    
		    if(returnData.se[i].ch=="总肥量"){
		    	console.log(returnData.se[i].val)
		    }

// if(returnData.se[i].ch==“水肥机”){
// console.log(returnData.se[i].val)
// if(returnData.se[i].val==“1”){
// $(“#shuifeiji”).lcs_on();
// }else{
// $(“#shuifeiji”).lcs_off();
// }
// }

		 }
    }else if(returnData.environments){
    	console.log(returnData)
    	for (i = 0; i < returnData.environments.length; i++) { 
    		console.log(returnData.environments[i])
    		
    		
    		if(returnData.environments[i].name=="大气压"){
		    	console.log(returnData.environments[i].value)
		    	$("#daqiya").text(returnData.environments[i].value)
		    }
    		if(returnData.environments[i].name=="土壤温度"){
		    	console.log(returnData.environments[i].value)
		    	$("#trwd").text(returnData.environments[i].value)
		    }
    		if(returnData.environments[i].name=="土壤水分"){
		    	console.log(returnData.environments[i].value)
		    	$("#trsd").text(returnData.environments[i].value)
		    }
    		if(returnData.environments[i].name=="土壤PH"){
		    	console.log(returnData.environments[i].value)
		    	$("#PH").text(returnData.environments[i].value)
		    }
    		
    		if(returnData.environments[i].name=="空气溫度"){ //kqwd trwd daqiya kqwd trsd PH
		    	console.log(returnData.environments[i].value)
		    	$("#kqwd").text(returnData.environments[i].value)
		    }
    		if(returnData.environments[i].name=="空气湿度"){
		    	console.log(returnData.environments[i].value)
		    	$("#kqsd").text(returnData.environments[i].value)
		    }
    		
    		
    	}
    }
    	
    	var Ydata = [Afeisu,Bfeisu,Cfeisu,Dfeisu,suanLiu]
    	tongjiTu(Ydata);
    	
    	
    }

// var checkfun = function (val, checked) {
// var checkNode = $(“[name=dept][value=”+val+“]”)
// checked ? checkNode.lcs_on() : checkNode.lcs_off();
// }

	//生成GUID
    function guid() {
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }
	
	//切换按钮状态
    function enable(button,enabled) {
        if (enabled) {
            button.removeAttr("disabled");
        }
        else {

            button.attr("disabled", "disabled");
        }
    }
	
	//状态输出
    function WriteToStatus(data) {
        console.log(data)
    }
	

	
$(document).ready(function(e) {
	$('input').lc_switch();
	// triggered each time a field changes status
	$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
		var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
		console.log('field changed status: '+ status );
		console.log(this.id)
		
		if(this.id=="jinbang"){
			if(status=="checked"){
					var datae = {
					"cmd": "relayctrl",
					"seq": 20,
					"src": "SERVER",
					"tar": "okqsfj",
				    "param":{
				         "ch": 4,
				        "port": 4,
				        "st": "OPEN"
				    }
				};
				ajaxTyy(datae)
			}else{
				var data = {
					"cmd": "relayctrl",
					"seq": 20,
					"src": "SERVER",
					"tar": "okqsfj",
				    "param":{
				         "ch": 4,
				        "port": 4,
				        "st": "CLOSE"
				    }
				}
				ajaxTyy(data)
			}
		}
		if(this.id=="dianchifaA"){
			if(status=="checked"){
				var data = {
					"cmd": "relayctrl",
					"seq": 20,
					"src": "SERVER",
					"tar": "okqsfj",
				    "param":{
				         "ch": 2004,
				        "port": 4,
				        "st": "OPEN"
				    }
				}
				ajaxTyy(data)
			}else{
				var data = {
				"cmd": "relayctrl",
				"seq": 20,
				"src": "SERVER",
				"tar": "okqsfj",
			    "param":{
			         "ch": 2004,
			        "port": 4,
			        "st": "CLOSE"
			    }
			}
				ajaxTyy(data)
			}
		}
		if(this.id=="shuifeiji"){
			if(status=="checked"){
				var data = {
				"cmd": "relayctrl",
				"seq": 20,
				"src": "SERVER",
				"tar": "okqsfj",
			    "param":{
			         "ch": 11111,
			        "port": 11111,
			        "st": "OPEN"
			    }
			}
				ajaxTyy(data)
				$("#jinbang").lcs_on(); 
				$("#chubeng").lcs_on(); 
				
			}else{
				var data = {
				"cmd": "relayctrl",
				"seq": 20,
				"src": "SERVER",
				"tar": "okqsfj",
			    "param":{
			         "ch": 11111,
			        "port": 11111,
			        "st": "CLOSE"
			    }
			    
			}
				ajaxTyy(data)
				$("#jinbang").lcs_off();
				$("#chubeng").lcs_off();
			}
		}
		if(this.id=="chubeng"){
			if(status=="checked"){
				var data = {
					"cmd": "relayctrl",
					"seq": 20,
					"src": "SERVER",
					"tar": "okqsfj",
				    "param":{
				         "ch": 1004,
				        "port": 4,
				        "st": "OPEN"
				    }
				}
				ajaxTyy(data)
			}else{
				var data = {
					"cmd": "relayctrl",
					"seq": 20,
					"src": "SERVER",
					"tar": "okqsfj",
				    "param":{
				         "ch": 1004,
				        "port": 4,
				        "st": "CLOSE"
				    }
				}
				ajaxTyy(data)
			}
		}
		if(this.id=="dianchifaB"){
			if(status=="checked"){
				var data = {
				"cmd": "relayctrl",
				"seq": 20,
				"src": "SERVER",
				"tar": "okqsfj",
			    "param":{
			         "ch": 3004,
			        "port": 4,
			        "st": "OPEN"
			    }
			}
				ajaxTyy(data)
			}else{
				var data = {
				"cmd": "relayctrl",
				"seq": 20,
				"src": "SERVER",
				"tar": "okqsfj",
			    "param":{
			         "ch": 3004,
			        "port": 4,
			        "st": "CLOSE"
			    }
			}
				ajaxTyy(data)
			}
		}
		
		
		
	});

	// triggered each time a field is checked
	$('body').delegate('.lcs_check', 'lcs-on', function() {
		console.log('field is checked');
	});
	
	
	// triggered each time a is unchecked
	$('body').delegate('.lcs_check', 'lcs-off', function() {
		console.log('field is unchecked');
	});
});



function ajaxTyy(datar){
$.ajax({
        url:"http:///waterfertilizer/commandTheme",//此处换成你的服务端地址
        type:'post',
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify(datar),
        dataType: "json",
        success:function(datac){
        	console.log(datac)
        },
        error:function (err) {
  alert('500网站后台出错了');
        }
    });
}


function tongjiTu(Ydata){
	   //月运单量统计图
var myChart1 = echarts.init(document.getElementById('myChart1'));
var option1 = {

	tooltip: {
		trigger: 'item',  
        formatter: function(params) {  
            var res = ''+params.name+'流速为：'+params.data; 
            return res;  
        }  
	},
	grid: {
		top: '5%',
		left: '0%',
        width: '100%',
        height: '95%',
        containLabel: true
    },
	xAxis: {
		data: ['A肥速','B肥速','C肥速','D肥速','酸流速'],
		axisLabel: {
            show: true,
            textStyle: {
                fontSize: 17,
                color: '#fff',
            }
       	},
       	axisLine:{  
            lineStyle:{  
                color:'#fff',  
                width:1, 
            }  
        }  
	},

	yAxis: {
		axisLabel: {
            show: true,
            textStyle: {
                fontSize: 23,
                color: '#fff',
            }
       	},
       	axisLine:{  
            lineStyle:{  
                color:'#fff',  
                width:1, 
            }  
        },
        splitLine:{  
            show:false,
		}  
	},

	series :{
		name: '',
		type: 'bar',
		barWidth : 25,
		data: Ydata,
		itemStyle: {
            normal: {
            	barBorderRadius:[5, 5, 5, 5],
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#3876cd'},
                        {offset: 0.5, color: '#45b4e7'},
                        {offset: 1, color: '#54ffff'}
                    ]
                ),
            },
        },
	},
}
  myChart1.setOption(option1);
}