Question

这是为我的网页处理websocket通信的代码。

function prepareWebSocket() {
    console.log("preparing web socket");
    webSocket = new WebSocket("ws://192.168.99.70:2012");
    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) {
    console.log("Open");
}

function onClose(evt) {
    console.log("Close");
}

function onMessage(evt) {

    console.log("received: " + evt.data);
    re(JSON.parse(evt.data));
}



function onError(evt) {

}

这是处理用户事件的代码。它在按下鼠标时收集数组中的点，并在释放鼠标时将其发送到服务器。

$('#canvas').mousedown(function(e) {
    // Mouse down location
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    paint = true;
    addClick(mouseX, mouseY, false);
    redraw();
});

$('#canvas').mousemove(function(e){
    if(paint==true){
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        redraw();
    }
});

$('#canvas').mouseup(function (e) {
    paint = false;
    redraw();
    console.log("sending clicks: " + clicks);
    webSocket.send(JSON.stringify(clicks));
});

$('#canvas').mouseleave(function(e){

    paint = false;
});

这是收集点数的功能：

function addClick(x, y, dragging) {
    clicks.push({
    clickX: x,
    clickY: y,
    clickDrag: dragging
    });
}

可以预见，会产生很多积分。

received: [{"clickX":197,"clickY":67,"clickDrag":false},{"clickX":194,"clickY":69,"clickDrag":true},{"clickX":191,"clickY":72,"clickDrag":true},{"clickX":183,"clickY":78,"clickDrag":true},{"clickX":177,"clickY":85,"clickDrag":true},{"clickX":168,"clickY":92,"clickDrag":true},{"clickX":162,"clickY":98,"clickDrag":true},{"clickX":155,"clickY":104,"clickDrag":true},{"clickX":150,"clickY":112,"clickDrag":true},{"clickX":145,"clickY":117,"clickDrag":true},{"clickX":141,"clickY":121,"clickDrag":true},{"clickX":136,"clickY":126,"clickDrag":true},{"clickX":132,"clickY":129,"clickDrag":true},{"clickX":129,"clickY":133,"clickDrag":true},{"clickX":123,"clickY":137,"clickDrag":true},{"clickX":118,"clickY":141,"clickDrag":true},{"clickX":114,"clickY":143,"clickDrag":true},{"clickX":108,"clickY":146,"clickDrag":true},{"clickX":103,"clickY":149,"clickDrag":true},{"clickX":97,"clickY":153,"clickDrag":true},{"clickX":91,"clickY":156,"clickDrag":true},{"clickX":86,"clickY":159,"clickDrag":true},{"clickX":80,"clickY":164,"clickDrag":true},{"clickX":75,"clickY":168,"clickDrag":true},{"clickX":68,"clickY":173,"clickDrag":true},{"clickX":60,"clickY":178,"clickDrag":true},{"clickX":53,"clickY":184,"clickDrag":true},{"clickX":46,"clickY":188,"clickDrag":true},{"clickX":40,"clickY":192,"clickDrag":true},{"clickX":35,"clickY":197,"clickDrag":true},{"clickX":33,"clickY":199,"clickDrag":true},{"clickX":31,"clickY":202,"clickDrag":true},{"clickX":30,"clickY":203,"clickDrag":true},{"clickX":29,"clickY":204,"clickDrag":true},{"clickX":50,"clickY":70,"clickDrag":false},{"clickX":52,"clickY":70,"clickDrag":true},{"clickX":54,"clickY":69,"clickDrag":true},{"clickX":56,"clickY":67,"clickDrag":true},{"clickX":57,"clickY":66,"clickDrag":true},{"clickX":61,"clickY":61,"clickDrag":true},{"clickX":64,"clickY":58,"clickDrag":true},{"clickX":68,"clickY":53,"clickDrag":true},{"clickX":71,"clickY":50,"clickDrag":true},{"clickX":73,"clickY":48,"clickDrag":true},{"clickX":78,"clickY":46,"clickDrag":true},{"clickX":80,"clickY":45,"clickDrag":true},{"clickX":80,"clickY":47,"clickDrag":true},{"clickX":80,"clickY":48,"clickDrag":true},{"clickX":80,"clickY":51,"clickDrag":true},{"clickX":80,"clickY":56,"clickDrag":true},{"clickX":77,"clickY":62,"clickDrag":true},{"clickX":75,"clickY":67,"clickDrag":true},{"clickX":72,"clickY":74,"clickDrag":true},{"clickX":70,"clickY":79,"clickDrag":true},{"clickX":67,"clickY":87,"clickDrag":true},{"clickX":67,"clickY":88,"clickDrag":true},{"clickX":67,"clickY":89,"clickDrag":true},{"clickX":68,"clickY":89,"clickDrag":true},{"clickX":70,"clickY":88,"clickDrag":true},{"clickX":72,"clickY":87,"clickDrag":true},{"clickX":74,"clickY":87,"clickDrag":true},{"clickX":75,"clickY":87,"clickDrag":true},{"clickX":76,"clickY":87,"clickDrag":true},{"clickX":78,"clickY":87,"clickDrag":true},{"clickX":78,"clickY":89,"clickDrag":true},{"clickX":81,"clickY":92,"clickDrag":true},{"clickX":82,"clickY":93,"clickDrag":true},{"clickX":82,"clickY":96,"clickDrag":true},{"clickX":83,"clickY":98,"clickDrag":true},{"clickX":84,"clickY":100,"clickDrag":true},{"clickX":84,"clickY":101,"clickDrag":true},{"clickX":85,"clickY":102,"clickDrag":true},{"clickX":86,"clickY":103,"clickDrag":true},{"clickX":87,"clickY":103,"clickDrag":true},{"clickX":88,"clickY":103,"clickDrag":true},{"clickX":89,"clickY":103,"clickDrag":true},{"clickX":91,"clickY":103,"clickDrag":true},{"clickX":93,"clickY":103,"clickDrag":true},{"clickX":95,"clickY":104,"clickDrag":true},{"clickX":97,"clickY":106,"clickDrag":true},{"clickX":100,"clickY":109,"clickDrag":true},{"clickX":102,"clickY":111,"clickDrag":true},{"clickX":103,"clickY":112,"clickDrag":true},{"clickX":105,"clickY":114,"clickDrag":true},{"clickX":106,"clickY":115,"clickDrag":true},{"clickX":110,"clickY":115,"clickDrag":true},{"clickX":111,"clickY":115,"clickDrag":true},{"clickX":112,"clickY":115,"clickDrag":true}]

问题是如果发送了太多的点，Web套接字似乎会关闭连接。

有没有办法避免这种情况？

Answer 1

连接中断时是否调用了onError（）或onClose（）方法？如果是这样，您可以考虑重新连接。

顺便说一句，我注意到你的onError（）方法是空的。可能不是一个好主意，因为这可能会告诉你为什么你的连接正在破裂。

如果发送的数据太多，Web套接字会关闭连接

1 个答案: