如果發送太多數據，Web套接字關閉連接

這是處理我的網頁的websocket通信的代碼。如果發送太多數據，Web套接字關閉連接

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套接字似乎關閉連接。

有沒有辦法避免這種情況？

來源

2016-03-21 Sandah Aung

當連接斷開時調用onError（）或onClose（）方法嗎？如果是這樣，你可以考慮重新連接。

順便說一句，我注意到你的onError（）方法是空的。可能不是一個好主意，因爲這可能會告訴你爲什麼你的連接斷開。

來源

2016-03-23 15:18:33 FrankG

如果發送太多數據，Web套接字關閉連接

回答

相關問題