Websocket协议支持双向通信，即服务器端可以主动推送消息。云测试开放平台在线调试UI脚本，采用websocket协议，将移动端的脚本step执行结果实时同步至客户端，通过websocket与平台浏览器直连的方式，实时同步每一步的执行情况，更快更简洁。
      首先客户端发起UI调试任务，任务直接下发至执行机，执行机起ws服务端并回传ws通信端口，客户端拿到ws端口后直连websocket服务端，建立会话。

任务.png

执行机起UI测试任务，收集到结果，起广播服务
在执行机模块起websocket服务端，广播每一步的执行结果

if(taskType == Constants.UI_AUTO_SCRIPT_DEBUG) {
                stepResult = new JSONObject();
                stepResult.put("step_order", Integer.parseInt(testStep.getStep_order())+1);
                stepResult.put("step_title", testStep.getUi_element().getName());
                stepResult.put("step_result", stepResult);              webSocketServer.broadcast(stepResult.toJSONString());
            }

同时执行机需要通过server告知clients，websocket通信的端口，采用dubbo调用或者http请求。
客户端起一个定时job，5s执行一次获取websocket通信端口，直到拿到通信端口后释放job。

var connectWebSocket = setInterval(getWebSocketPort, 5000);
function getWebSocketPort(){
    var scriptId =getUrlParam("scriptId");
    $.ajax({
        type : 'get',
        url : xxxxx
        dataType : "json",
        contentType: "application/json;charset=utf-8",
        success : function(data) {
            if(check(data)){
                var debugResult = data.data.debugResult;
                if(debugResult != undefined){
                    clearInterval(connectWebSocket);
                    var connectPort = debugResult.connectPort;
                    var connectIp = debugResult.connectIp;
                    connectToWebsocket(connectIp,connectPort);
                }
            }
        }
    });
}

拿到连接端口后，起websokect客户端，服务器端会主动广播每一步的测试结果。客户端拿到结果后，分别判断是图片还是文本，将结果展示在预留的坑位canvas元素中。

function connectToWebsocket(Ip, port) {
    var ws = new WebSocket('ws://' + Ip + ':' + port)
    ws.binaryType = 'blob';
    ws.onclose = function () {
        console.log('关闭', arguments)
    }
    ws.onerror = function () {
        console.log('失败', arguments)
    }
    ws.onmessage = function (message) {
        if (message.data instanceof Blob) {
            processBlob(message);
        } else {
            processData(message);
        }
    }
    ws.onopen = function () {
        console.log('打开', arguments)
        ws.send('1920x1080/0')
    }
}

图片的展示示例如下：

  function processBlob(message) {
    var canvas = document.getElementById('canvas')
        , g = canvas.getContext('2d');
    var blob = new Blob([message.data], {type: 'image/jpeg/jpg'})
    var URL = window.URL || window.webkitURL;
    var img = new Image();
    img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        g.drawImage(img, 0, 0);
        img.onload = null;
        img = null;
        u = null;
        blob = null;
    }
    var u = URL.createObjectURL(blob);
    img.src = u;
}

前端展示示例：

成功步骤.png

失败步骤.png

通过websokect直接回传每一步的执行情况，快速便捷，不需要通过数据库保存执行结果，便于UI脚本在线调试。