0
これは私のWebページのWebソケット通信を処理するコードです。あまりにも多くのデータが送信されると、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ソケットが接続を閉じると思われることです。
これを回避する手段はありますか？