Hextile working. Improve latency by coallescing sends.
- Hextile has an undocumented weirdness where RAW frames are often followed by a 0 byte that should be ignored. - Coallesce client messages that are one after another. Without this the server seems to often ignore frames that are send right after another frame has been sent. This fixes a reconnect issue where setEncodings seems to be ignored. Also results in a huge performance increase after key strokes (by adding a update request to the key event message) because the server always sends an update instead of sometimes waiting for the next poll to be sent.
This commit is contained in:
parent
2bcb2d5b15
commit
9f4af5a722
138
vnc.js
138
vnc.js
|
@ -52,6 +52,7 @@ var FBU = {
|
|||
height : 0,
|
||||
encoding : 0,
|
||||
subencoding : -1,
|
||||
background: null,
|
||||
arr : null};
|
||||
|
||||
|
||||
|
@ -66,7 +67,7 @@ ws : null, // Web Socket object
|
|||
version : "RFB 003.003\n",
|
||||
state : 'ProtocolVersion',
|
||||
shared : 1,
|
||||
poll_rate : 3000,
|
||||
poll_rate : 1413,
|
||||
|
||||
host : '',
|
||||
port : 5900,
|
||||
|
@ -194,10 +195,14 @@ init_msg: function (data) {
|
|||
|
||||
Canvas.init('vnc', RFB.fb_width, RFB.fb_height, RFB.keyDown, RFB.keyUp);
|
||||
|
||||
RFB.setEncodings();
|
||||
RFB.setPixelFormat();
|
||||
|
||||
RFB.fbUpdateRequest(0, 0, 0, RFB.fb_width, RFB.fb_height);
|
||||
var init = [];
|
||||
init = init.concat(RFB.pixelFormat());
|
||||
init = init.concat(RFB.encodings());
|
||||
init = init.concat(RFB.fbUpdateRequest(0, 0, 0, RFB.fb_width, RFB.fb_height));
|
||||
RFB.send_array(init);
|
||||
|
||||
/* Start polling */
|
||||
RFB.poller.delay(RFB.poll_rate);
|
||||
|
||||
RFB.state = 'normal';
|
||||
break;
|
||||
|
@ -250,18 +255,24 @@ display_rre: function () {
|
|||
},
|
||||
|
||||
display_hextile: function() {
|
||||
console.log(">> display_hextile, tiles: " + FBU.tiles + ", arr.length: " + FBU.arr.length + ", bytes: " + FBU.bytes + ", subencoding: " + FBU.subencoding);
|
||||
var subencoding, subrects = 0;
|
||||
//console.log(">> display_hextile, tiles: " + FBU.tiles + ", arr.length: " + FBU.arr.length + ", bytes: " + FBU.bytes);
|
||||
var subencoding, subrects, cur_tile, tile_x, x, w, tile_y, y, h;
|
||||
|
||||
/* FBU.bytes comes in as 0, FBU.arr.length at least 2 */
|
||||
while ((FBU.tiles > 0) && (FBU.arr.length >= FBU.bytes)) {
|
||||
var cur_tile = FBU.total_tiles - FBU.tiles;
|
||||
var tile_x = cur_tile % FBU.tiles_x;
|
||||
var tile_y = Math.floor(cur_tile / FBU.tiles_x);
|
||||
cur_tile = FBU.total_tiles - FBU.tiles;
|
||||
tile_x = cur_tile % FBU.tiles_x;
|
||||
tile_y = Math.floor(cur_tile / FBU.tiles_x);
|
||||
x = FBU.x + tile_x * 16;
|
||||
y = FBU.y + tile_y * 16;
|
||||
w = Math.min(16, (FBU.x + FBU.width) - x)
|
||||
h = Math.min(16, (FBU.y + FBU.height) - y)
|
||||
subrects = 0;
|
||||
if (FBU.subencoding == -1) {
|
||||
/* We enter with at least 2 bytes */
|
||||
var subencoding = FBU.arr[0]; // Peek
|
||||
FBU.bytes += 1; // Since we aren't shifting it off
|
||||
subencoding = FBU.arr[0]; // Peek
|
||||
//console.log(" display_hextile, subencoding: " + subencoding);
|
||||
FBU.bytes++; // Since we aren't shifting it off
|
||||
//console.log(" subencoding: " + subencoding);
|
||||
if (subencoding > 30) { // Raw
|
||||
console.log("Illegal subencoding " + subencoding);
|
||||
|
@ -271,14 +282,13 @@ display_hextile: function() {
|
|||
|
||||
/* Figure out how much we are expecting */
|
||||
if (subencoding & 0x01) { // Raw
|
||||
var twidth = 16, theight = 16;
|
||||
if ((FBU.width % 16) && (tile_x + 1 == FBU.tiles_x)) {
|
||||
twidth = FBU.width % 16;
|
||||
//console.log(" Raw subencoding");
|
||||
FBU.bytes = w * h * RFB.fb_Bpp;
|
||||
if (FBU.arr[FBU.bytes] == 0) {
|
||||
/* Weird: ignore blanks after RAW */
|
||||
//console.log(" Ignoring blank after RAW");
|
||||
FBU.bytes ++;
|
||||
}
|
||||
if ((FBU.height % 16) && (tile_y + 1 == FBU.tiles_y)) {
|
||||
theight = FBU.height % 16;
|
||||
}
|
||||
FBU.bytes = twidth * theight * RFB.fb_Bpp;
|
||||
} else {
|
||||
if (subencoding & 0x02) { // Background
|
||||
FBU.bytes += RFB.fb_Bpp;
|
||||
|
@ -287,9 +297,14 @@ display_hextile: function() {
|
|||
FBU.bytes += RFB.fb_Bpp;
|
||||
}
|
||||
if (subencoding & 0x08) { // AnySubrects
|
||||
subrects = FBU.arr[FBU.bytes]; // Peek
|
||||
FBU.bytes += 1; // Since we aren't shifting it off
|
||||
if (subencoding & 0x016) { // SubrectsColoured
|
||||
FBU.bytes++; // Since we aren't shifting it off
|
||||
if (FBU.arr.length < FBU.bytes) {
|
||||
/* Wait for subrects byte */
|
||||
//console.log(" waiting for subrects byte");
|
||||
return;
|
||||
}
|
||||
subrects = FBU.arr[FBU.bytes-1]; // Peek
|
||||
if (subencoding & 0x10) { // SubrectsColoured
|
||||
FBU.bytes += subrects * (RFB.fb_Bpp + 2);
|
||||
} else {
|
||||
FBU.bytes += subrects * 2;
|
||||
|
@ -298,9 +313,10 @@ display_hextile: function() {
|
|||
}
|
||||
}
|
||||
|
||||
console.log(" subencoding: " + subencoding + " tile " + cur_tile + "/" + (FBU.total_tiles - 1) + ", subrects: " + subrects + ", tile_x/y: " + tile_x + "," + tile_y + " , arr.length: " + FBU.arr.length + ", bytes: " + FBU.bytes);
|
||||
//console.log(" tile:" + cur_tile + "/" + (FBU.total_tiles - 1) + ", subencoding:" + subencoding + ", subrects:" + subrects + ", tile:" + tile_x + "," + tile_y + " [" + x + "," + y + "], arr.length:" + FBU.arr.length + ", bytes:" + FBU.bytes);
|
||||
//console.log(" arr[0..30]: " + FBU.arr.slice(0,30));
|
||||
if (FBU.arr.length < FBU.bytes) {
|
||||
console.log(" not enough");
|
||||
//console.log(" waiting for " + (FBU.bytes - FBU.arr.length) + "bytes");
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -308,38 +324,37 @@ display_hextile: function() {
|
|||
/* We know the encoding and have a whole tile */
|
||||
FBU.subencoding = FBU.arr.shift();
|
||||
if (FBU.subencoding == 0) {
|
||||
Canvas.rfbRect(FBU.x + tile_x * 16, FBU.y + tile_y * 16, 16, 16, FBU.background);
|
||||
Canvas.rfbRect(x, y, w, h, FBU.background);
|
||||
} else if (FBU.subencoding & 0x01) { // Raw
|
||||
console.log(" Raw subencoding");
|
||||
Canvas.rfbImage(FBU.x, FBU.y, FBU.width, FBU.height, FBU.arr);
|
||||
FBU.arr.splice(0, FBU.width * FBU.height * RFB.fb_Bpp);
|
||||
Canvas.rfbImage(x, y, w, h, FBU.arr);
|
||||
FBU.arr.splice(0, FBU.bytes - 1);
|
||||
} else {
|
||||
if (FBU.subencoding & 0x02) { // Background
|
||||
FBU.background = FBU.arr.shiftBytes(RFB.fb_Bpp);
|
||||
console.log(" background: " + FBU.background);
|
||||
//console.log(" background: " + FBU.background);
|
||||
}
|
||||
if (FBU.subencoding & 0x04) { // Foreground
|
||||
FBU.foreground = FBU.arr.shiftBytes(RFB.fb_Bpp);
|
||||
console.log(" foreground: " + FBU.foreground);
|
||||
//console.log(" foreground: " + FBU.foreground);
|
||||
}
|
||||
Canvas.rfbRect(FBU.x + tile_x * 16, FBU.y + tile_y * 16, 16, 16, FBU.background);
|
||||
Canvas.rfbRect(x, y, w, h, FBU.background);
|
||||
if (FBU.subencoding & 0x08) { // AnySubrects
|
||||
subrects = FBU.arr.shift8();
|
||||
for (var i = 0; i < subrects; i ++) {
|
||||
if (FBU.subencoding & 0x016) { // SubrectsColoured
|
||||
if (FBU.subencoding & 0x10) { // SubrectsColoured
|
||||
var color = FBU.arr.shiftBytes(RFB.fb_Bpp);
|
||||
} else {
|
||||
var color = FBU.foreground;
|
||||
}
|
||||
var xy = FBU.arr.shift8();
|
||||
var x = tile_x * 16 + (xy & 0xf0) >> 4;
|
||||
var y = tile_y * 16 + (xy & 0x0f);
|
||||
var sx = x + (xy >> 4);
|
||||
var sy = y + (xy & 0x0f);
|
||||
|
||||
var wh = FBU.arr.shift8();
|
||||
var w = ((wh & 0xf0) >> 4) + 1;
|
||||
var h = ((wh & 0x0f) ) + 1;
|
||||
var sw = (wh >> 4) + 1;
|
||||
var sh = (wh & 0x0f) + 1;
|
||||
|
||||
Canvas.rfbRect(FBU.x + x, FBU.y + y, w, h, color);
|
||||
Canvas.rfbRect(sx, sy, sw, sh, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -356,8 +371,7 @@ display_hextile: function() {
|
|||
FBU.rects --;
|
||||
}
|
||||
|
||||
console.log("<< display_hextile");
|
||||
|
||||
//console.log("<< display_hextile");
|
||||
},
|
||||
|
||||
|
||||
|
@ -458,9 +472,10 @@ normal_msg: function (data) {
|
|||
* Client message routines
|
||||
*/
|
||||
|
||||
setPixelFormat: function () {
|
||||
pixelFormat: function () {
|
||||
console.log(">> setPixelFormat");
|
||||
var arr = [0]; // msg-type
|
||||
var arr;
|
||||
arr = [0]; // msg-type
|
||||
arr.push8(0); // padding
|
||||
arr.push8(0); // padding
|
||||
arr.push8(0); // padding
|
||||
|
@ -473,23 +488,24 @@ setPixelFormat: function () {
|
|||
arr.push16(255); // red-max
|
||||
arr.push16(255); // green-max
|
||||
arr.push16(255); // blue-max
|
||||
arr.push8(0); // red-shift
|
||||
arr.push8(0); // red-shift
|
||||
arr.push8(8); // green-shift
|
||||
arr.push8(16); // blue-shift
|
||||
arr.push8(16); // blue-shift
|
||||
|
||||
arr.push8(0); // padding
|
||||
arr.push8(0); // padding
|
||||
arr.push8(0); // padding
|
||||
RFB.send_array(arr);
|
||||
arr.push8(0); // padding
|
||||
arr.push8(0); // padding
|
||||
arr.push8(0); // padding
|
||||
console.log("<< setPixelFormat");
|
||||
return arr;
|
||||
},
|
||||
|
||||
fixColourMapEntries: function () {
|
||||
},
|
||||
|
||||
setEncodings: function () {
|
||||
encodings: function () {
|
||||
console.log(">> setEncodings");
|
||||
var arr = [2]; // msg-type
|
||||
var arr;
|
||||
arr = [2]; // msg-type
|
||||
arr.push8(0); // padding
|
||||
|
||||
//arr.push16(3); // encoding count
|
||||
|
@ -499,31 +515,33 @@ setEncodings: function () {
|
|||
arr.push32(2); // RRE encoding
|
||||
arr.push32(1); // copy-rect encoding
|
||||
arr.push32(0); // raw encoding
|
||||
RFB.send_array(arr);
|
||||
console.log("<< setEncodings");
|
||||
return arr;
|
||||
},
|
||||
|
||||
fbUpdateRequest: function (incremental, x, y, xw, yw) {
|
||||
//console.log(">> fbUpdateRequest");
|
||||
var arr = [3]; // msg-type
|
||||
var arr;
|
||||
arr = [3]; // msg-type
|
||||
arr.push8(incremental);
|
||||
arr.push16(x);
|
||||
arr.push16(y);
|
||||
arr.push16(xw);
|
||||
arr.push16(yw);
|
||||
RFB.send_array(arr);
|
||||
//console.log("<< fbUpdateRequest");
|
||||
return arr;
|
||||
},
|
||||
|
||||
keyEvent: function (keysym, down) {
|
||||
console.log(">> keyEvent, keysym: " + keysym + ", down: " + down);
|
||||
var arr = [4]; // msg-type
|
||||
var arr;
|
||||
arr = [4]; // msg-type
|
||||
arr.push8(down);
|
||||
arr.push16(0);
|
||||
arr.push32(keysym);
|
||||
//console.log("keyEvent array: " + arr);
|
||||
arr = arr.concat(RFB.fbUpdateRequest(1, 0, 0, RFB.fb_width, RFB.fb_height));
|
||||
RFB.send_array(arr);
|
||||
RFB.fbUpdateRequest(1, 0, 0, RFB.fb_width, RFB.fb_height);
|
||||
//console.log("<< keyEvent");
|
||||
},
|
||||
|
||||
|
@ -540,19 +558,20 @@ clientCutText: function () {
|
|||
|
||||
send_string: function (str) {
|
||||
//console.log(">> send_string: " + str);
|
||||
var arr = str.split('').map(function (chr) {
|
||||
return chr.charCodeAt(0) } );
|
||||
RFB.send_array(arr);
|
||||
RFB.send_array(str.split('').map(
|
||||
function (chr) { return chr.charCodeAt(0) } ) );
|
||||
},
|
||||
|
||||
send_array: function (arr) {
|
||||
//console.log(">> send_array: " + arr);
|
||||
//console.log(">> send_array: " + Base64.encode_array(arr));
|
||||
RFB.ws.send(Base64.encode_array(arr));
|
||||
},
|
||||
|
||||
/* Mirror bits of each character and return as array */
|
||||
passwdTwiddle: function (passwd) {
|
||||
var arr = [];
|
||||
var arr;
|
||||
arr = [];
|
||||
for (var i=0; i< passwd.length; i++) {
|
||||
var c = passwd.charCodeAt(i);
|
||||
arr.push( ((c & 0x80) >> 7) +
|
||||
|
@ -569,7 +588,7 @@ passwdTwiddle: function (passwd) {
|
|||
|
||||
poller: function () {
|
||||
if (RFB.state == 'normal') {
|
||||
RFB.fbUpdateRequest(1, 0, 0, RFB.fb_width, RFB.fb_height);
|
||||
RFB.send_array(RFB.fbUpdateRequest(1, 0, 0, RFB.fb_width, RFB.fb_height));
|
||||
RFB.poller.delay(RFB.poll_rate);
|
||||
}
|
||||
},
|
||||
|
@ -625,7 +644,6 @@ init_ws: function () {
|
|||
RFB.state = "closed";
|
||||
console.log("<< onclose");
|
||||
}
|
||||
RFB.poller.delay(RFB.poll_rate);
|
||||
|
||||
console.log("<< init_ws");
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue