MyBootstrapEx
/
SetMessage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>留言板</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/from/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="css/from/bootstrap-select.css">
    <link rel="stylesheet" href="css/bootstrapEx.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/MQTT/paho-mqtt.js"></script>
    <script type="text/javascript" src="js/from/global.js"></script>
    <script type="text/javascript" src="js/from/jquery.smart-form.js"></script>
    <script type="text/javascript" src="js/from/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="js/from/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/from/bootstrap-select.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/from/jquery.validate.js"></script>
    <script type="text/javascript" src="js/from/jQuery-Validate-Extend.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrapEx2.0.js"></script>


</head>
<body style="overflow-x:hidden">
    <form action="" id="itemForm1"></form>
</body>

<script>
    $(document).ready(function(){
        ItinPahoClient();
        InitForm1();
    })

    //绘制表单
    function InitForm1() {
        //清空
        $('#itemForm1').html('');
        form1 = new bsEx.ItemForm('#itemForm1');
        form1.items = [
            { type: 'text', name: 'txtmail', title: '您的联系方式：' },
            { type: 'textarea', name: 'txtmsg', title: '您想说的话：',height:'200px' },
            { type: 'text', name: 'txtname', title: '您的姓名：' },
        ];//项
        form1.requireds = ["txtmsg","txtname"];
        //是否启用验证
        form1.validate = true;
        form1.colunb = 1;//列数
        form1.init();//开始显示

        var btn = $('#txtname').addbutton("发送");
        btn.on('click', function () {
            if(form1.valid()){
                setmessage();
            }
        });
        btn.loading('链接中...');
    }

    var sendID,_close;
    //核心方法：发送消息
    function setmessage() {
        sendID = new Date().getTime().toString();
        bsEx.ui['txtname-btn'].loading('发送中...');
        var v = form1.getFormData();
        v.sendID = sendID;
        console.log(JSON.stringify(v));
        client.publish("MyBlog_set", JSON.stringify(v));
        _close = setTimeout(function(){
            window.parent.closewindow("发送超时");
        },20000)
    }

    //核心方法：通过MQtt连接
    function ItinPahoClient() {
        //地址 端口 链接名称（不是主题）
        client = new Paho.Client('140.143.155.224', 61614,  new Date().getTime().toString());

        //监听事件
        client.onMessageArrived = function (msg) {
            console.log("返回消息"+msg.payloadString)
            msg = eval('('+msg.payloadString+')');
            console.log("返回消息"+JSON.stringify(msg))
            if(msg.sendID == sendID){
                clearTimeout(_close);
                window.parent.closewindow();
            }
        };

        //失去连接
        client.onConnectionLost = function(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("失去连接:"+responseObject.errorMessage);
            }
        }

        //链接配置
        client.connect({
            onSuccess: function () {
                //订阅主题
                client.subscribe("MyBlog_done");
                bsEx.ui['txtname-btn'].reset();
            }
        });
     }
</script>
</html>