Websocket-stf

// 去除实时图片按键操作
$(function () {
    var leftall = document.getElementById("leftall");
    leftall.oncontextmenu = function () { return false; };
    leftall.ondragstart = function () { return false; };
    leftall.onselectstart = function () { return false; };
    leftall.onselect = function () { return false; };
})


// stf实时监控类
function NewStf(id,device){

// var wsUri = "ws://127.0.0.1/mandala-agent/ws/stf";
var wsUri = "ws://192.168.3.85:8090/mrd/10/88";

var phoneImg = document.getElementById(id);

NewStf.prototype.startWebSocket = function(){
    stf_websocket= new WebSocket(wsUri);
    stf_websocket.onopen = function (evt) {
        doSend(device);  
    };
    stf_websocket.onclose = function (evt) {
        alert("断开连接");
    };
    stf_websocket.onmessage = function (evt) {
        onMessage(evt)
    };
    stf_websocket.onerror = function (evt) {
        alert("异常错误断开连接");
    };
}

function onMessage(evt) {

    if (typeof (evt.data) == "string") {
        $("#loading").fadeOut(300);

    } else {
        phoneImg.src = URL.createObjectURL(evt.data);
    }

}

function doSend(message) {
    stf_websocket.send(message);
}
function doSendNoWrite(message) {
    stf_websocket.send(message);
}

var mousedown = false;
phoneImg.onmousedown = function (e) {
    if (e.button == 2) return;
    var rect = this.getBoundingClientRect();
        var mouseX = e.clientX - rect.left;//获取鼠标在canvsa中的坐标
        var mouseY = e.clientY - rect.top;
        doSend("1:" + mouseX/phoneImg.width + "," + mouseY/phoneImg.height);
        mousedown = true;

    }

    phoneImg.onmouseout = function (e) {
        if (e.button == 2) return;
        if (mousedown != true) return;
        mousedown = false;
        doSend("2:up");
    }

    phoneImg.onmouseup = function (e) {
        if (e.button == 2) return;
        if (mousedown != true) return;
        mousedown = false;
        doSend("2:up");

    }

    phoneImg.onmousemove = function (e) {
        if (e.button == 2) return;
        if (mousedown != true) return;
        var e = window.event || e
        var rect = this.getBoundingClientRect();
        var mouseX = e.clientX - rect.left;//获取鼠标在canvsa中的坐标
        var mouseY = e.clientY - rect.top;
        doSendNoWrite("3:" + mouseX/phoneImg.width + "," + mouseY/phoneImg.height);
    }

    $("#android-menu").click(function () {
        doSend("4:KEYCODE_APP_SWITCH");
    })

    $("#android-home").click(function () {
        doSend("4:3");
    })

    $("#android-power").click(function () {
        doSend("4:26");
    })

    $("#android-volum-up").click(function () {
        doSend("4:24");
    })

    $("#android-volum-down").click(function () {
        doSend("4:25");
    })

    $("#android-volum-mute").click(function () {
        doSend("4:164");
    })

    $("#android-settings").click(function () {
        // doSend("4:KEYCODE_SETTINGS");
    })

    $("#android-notification").click(function () {
        // doSend("4:83");
    })

    //确保服务器已经释放相关资源

}  



setTimeout(function () {
 var stf =new  NewStf("phoneImg","NDSL3P0003");
 stf.startWebSocket();
 }, 500);


// 开启logcat
function getLogcat(){
    setTimeout(function () {    
     var log = new Logcat("NDSL3P0003");
     if($.trim($("#g-and-s").text())=="获取"){
        $("#g-and-s").html('  停止');
        log.startWebSocket();
    }else{
        $("#g-and-s").html('  获取');
        log.close();
    }



}, 500);
}



// LogCat类
function Logcat(device){

var wsUri = "ws://192.168.3.85:8090/logcat/10/88";
// var wsUri = "ws://10.10.23.88/mandala-agent/ws/logcat";

var logData = document.getElementById("logData");

var logForm = document.getLog;

Logcat.prototype.close = function() {
    websocket.send(getFilterJson("stop",""));
}

Logcat.prototype.startWebSocket = function(){
    websocket= new WebSocket(wsUri);
    websocket.onopen = function (evt) {
        onOpen(evt)
    };
    websocket.onclose = function (evt) {
        onClose(evt)
    };
    websocket.onmessage = function (evt) {
        onMessage(evt)
    };
    websocket.onerror = function (evt) {
        onError(evt)
    };
}

function onOpen(evt) {            
    websocket.send(getFilterJson("get",device));            
}

function onClose(evt) {
    websocket.send(getFilterJson("stop",""));
}

function onMessage(evt) {
    console.log(evt.data);
    if (typeof (evt.data) == "string") {
        writeToScreen(evt.data);
        $("#loading").fadeOut(300);

    } else {
        writeToScreen(evt.data);
    }

}

function onError(evt) {
        // $("#loading").fadeOut(300);            
        alert("异常错误断开连接");
    }

    function doSend() {
        websocket.send(getFilterJson("filter",""));
    }


    function writeToScreen(message) {
        if (logData.children.length>20){
            logData.removeChild(logData.childNodes[0]);
        }
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        if(message.indexOf("I/")>0){
            pre.style.color = "teal";
        }
        else if(message.indexOf("D/")>0){
            pre.style.color = "royalblue";
        }
        else if(message.indexOf("E/")>0){
            pre.style.color = "red";
        }
        else if(message.indexOf("W/")>0){
            pre.style.color = "orange";
        }
        else if(message.indexOf("F/")>0){
            pre.style.color = "firebrick";
        }            


        pre.innerHTML = message;                       
        logData.appendChild(pre);
        logData.scrollTop = logData.scrollHeight;
        
    }

    function getFilterJson(action,device){
        var data = new Object();
        data.action = action;
        data.device = device;
        data.type = logForm.type.value;
        data.time = logForm.time.value;
        data.pid = logForm.pid.value;
        data.tid = logForm.tid.value;
        data.tag = logForm.tag.value;
        data.text = logForm.text.value;
        return JSON.stringify(data);
    }   

    document.getElementById("getLog").addEventListener("input", doSend);
    document.getElementById("type").addEventListener("change", doSend);
}


// 重置搜索
function clear(){
    $("#getLog :input").each(function () {  
        $(this).val("");  
    });  
    $("select[name='type']").val("all");
}
// 清空log
function clearLog(){
    $("#logData").empty(); 
    $('#myMenu').hide(200);
}