diff --git a/code/client/tunnel/vnc/h_ws.go b/code/client/tunnel/vnc/h_ws.go index 05bf76f..eee03f2 100644 --- a/code/client/tunnel/vnc/h_ws.go +++ b/code/client/tunnel/vnc/h_ws.go @@ -68,7 +68,7 @@ func (v *VNC) remoteRead(ctx context.Context, ch <-chan *network.Msg, local *web case network.Msg_vnc_image: data, err := decodeImage(msg.GetVimg()) runtime.Assert(err) - replyImage(local, msg.GetVimg(), data) + replyImage(local, msg.GetVimg(), data, len(msg.GetVimg().GetData())) default: logging.Error("on message: %s", msg.GetXType().String()) return @@ -142,15 +142,16 @@ func dumpImage(img image.Image) { } } -func replyImage(conn *websocket.Conn, msg *network.VncImage, data []byte) { +func replyImage(conn *websocket.Conn, msg *network.VncImage, data []byte, srcSize int) { info := msg.GetXInfo() - buf := make([]byte, len(data)+24) + buf := make([]byte, len(data)+28) binary.BigEndian.PutUint32(buf, info.GetScreenWidth()) binary.BigEndian.PutUint32(buf[4:], info.GetScreenHeight()) binary.BigEndian.PutUint32(buf[8:], info.GetRectX()) binary.BigEndian.PutUint32(buf[12:], info.GetRectY()) binary.BigEndian.PutUint32(buf[16:], info.GetRectWidth()) binary.BigEndian.PutUint32(buf[20:], info.GetRectHeight()) - copy(buf[24:], data) + binary.BigEndian.PutUint32(buf[24:], uint32(srcSize)) + copy(buf[28:], data) conn.WriteMessage(websocket.BinaryMessage, buf) } diff --git a/html/dashboard/js/index.js b/html/dashboard/js/index.js index 50bc9b3..1e44644 100644 --- a/html/dashboard/js/index.js +++ b/html/dashboard/js/index.js @@ -38,6 +38,7 @@ var page = { https`; break; case 'shell': + case 'vnc': op = `连接`; break; } diff --git a/html/dashboard/js/terminal.js b/html/dashboard/js/terminal.js index 2e39b0c..b2ae4ad 100644 --- a/html/dashboard/js/terminal.js +++ b/html/dashboard/js/terminal.js @@ -14,7 +14,8 @@ var page = { $.get('/api/tunnels', function(ret) { $('#terms').empty(); $.each(ret, function(_, tunnel) { - if (tunnel.type != 'shell') { + if (tunnel.type != 'shell' && + tunnel.type != 'vnc') { return; } $('#terms').append($(``)); @@ -44,7 +45,7 @@ var page = { var str = `
+ style="width:100%;min-height:800px">
`; var obj = $(str); $('#tab-content').append(obj); diff --git a/html/vnc/common.js b/html/vnc/common.js new file mode 120000 index 0000000..d91842a --- /dev/null +++ b/html/vnc/common.js @@ -0,0 +1 @@ +../js/common.js \ No newline at end of file diff --git a/html/vnc/index.css b/html/vnc/index.css index b66a23f..ddd2199 100644 --- a/html/vnc/index.css +++ b/html/vnc/index.css @@ -7,4 +7,7 @@ } #vnc { margin-top: 10px; +} +#cad { + float: right; } \ No newline at end of file diff --git a/html/vnc/index.html b/html/vnc/index.html index 106453d..740ddc8 100644 --- a/html/vnc/index.html +++ b/html/vnc/index.html @@ -11,6 +11,7 @@ + @@ -27,6 +28,7 @@    + fps: 0, bandwidth: 0 B/s diff --git a/html/vnc/index.js b/html/vnc/index.js index 696efed..47455c5 100644 --- a/html/vnc/index.js +++ b/html/vnc/index.js @@ -17,6 +17,7 @@ var page = { $('#cad').click(page.cad); // connect page.connect(); + setInterval(page.update_info, page.secs*1000); }, connect: function() { var quality = $('#quality').val(); @@ -28,6 +29,7 @@ var page = { }); }, render: function(e) { + page.fps++; var reader = new FileReader; reader.onload = function() { var dv = new DataView(this.result); @@ -42,8 +44,10 @@ var page = { var dy = dv.getUint32(12, false); var dwidth = dv.getUint32(16, false); var dheight = dv.getUint32(20, false); + var size = dv.getUint32(24, false); + page.bandwidth += size; var id = page.ctx.getImageData(dx, dy, dwidth, dheight); - var data = new Uint8Array(this.result.slice(24)); + var data = new Uint8Array(this.result.slice(28)); var buf = id.data; for (var i = 0; i < buf.length; i++) { buf[i] = data[i]; @@ -178,8 +182,25 @@ var page = { key = 'alt'; } else if (e.which == 32) { key = 'space'; + } else if (e.which == 189) { + key = '-'; + } else if (e.which == 187) { + key = '='; + } else if (e.which == 219) { + key = '['; + } else if (e.which == 221) { + key = ']'; + } else if (e.which == 186) { + key = ';'; + } else if (e.which == 222) { + key = "'"; + } else if (e.which == 188) { + key = ','; + } else if (e.which == 190) { + key = '.'; + } else if (e.which == 191) { + key = '/'; } - // TODO: 符号 page.ws.send(JSON.stringify({ action: 'keyboard', payload: { @@ -189,9 +210,19 @@ var page = { })); console.log(e); }, + update_info: function() { + var str = 'fps: '+parseInt(page.fps/page.secs)+ + ', bandwidth: '+humanize.bytes(page.bandwidth/page.secs)+'/s'; + page.fps = 0; + page.bandwidth = 0; + $('#info').text(str); + }, canvas: undefined, ctx: undefined, id: '', - ws: undefined + ws: undefined, + secs: 2, + fps: 0, + bandwidth: 0 }; $(document).ready(page.init); \ No newline at end of file