背景：
2019年12月5日，微軟宣布放棄瀏覽器Edge，轉而推出一款新的瀏覽器，而這款新瀏覽器將會采用谷歌的Chromium 內核。。。
好了，反正已經無力吐槽，微軟爛尾的項目也不是一個兩個了，之前放棄IE轉Edge，現在有把Edge丟掉擁抱Chromium，
徹底結束了IE家族；居於這個原因，之前項目中有使用過一些跟IE綁定的ActiveX插件，也不得不做出改變了。
現狀：
網上搜索“web訪問遠程桌面”，沒有找到合適的解決方案，基本上有以下幾種：
1、在Google瀏覽器上使用“IE TAB”插件，這個插件是Google瀏覽器應用商店上的插件；試過之后確實可以運行IE上的ActiveX插件；
缺點：
1）最重要的，需要翻牆，由於國內不能直接方法Google應用商店，所以要安裝這個插件必須翻牆出去；
這在大部分情況下就不適合，因為很多人不會；
2）操作冗余，每次打開插件都需要在Google菜單欄點擊一個小按鈕，如何頁面才會跟着轉換，這會很奇怪；
3）兼容性糟糕，如果js在不同的ie瀏覽器下調試通過的，那在Google上也需要右鍵“IE TAB”按鈕，找到屬性欄，
選擇對應的IE版本；這體驗就非常不好，因為很多用戶根本不會使用瀏覽器插件，更不要說去設置參數
4）還是翻牆，這個插件居然還引用了一個ajax的js文件，這個文件剛好是在Google域名下的；這就會導致設置插件
屬性的時候不翻牆根本打不開；
5）放棄。。
2、使用IIS的遠程桌面，基於“Remote desktop web connection”技術，詳細可瀏覽這篇文章“遠程桌面web連接”
缺點：
1）頁面和操作步驟不可定制，只能使用IIS封裝好的頁面
2）每次離開需要重新輸入賬戶，很不方便
3）需要服務器該功能支持，以及各種配置操作
4）優先級低下，放棄。。。
3、微軟最新的退出的“Remote Desktop”技術，詳細可瀏覽這篇文章“微軟宣推Remote Desktop遠程桌面網頁版”
以及官方介紹：“為用戶設置遠程桌面 Web 客戶端”
缺點：
1）需要windows service 2016火災windows service 2019，並且安裝RD網關；
2）配置太繁瑣，非人類操作，看官方的安裝配置介紹的非常不清晰，各種配置、各種工具支持、
各種命令，要是決定使用這個方案，怕是會忍不住砸了電腦；
3）放棄放棄。。，狗命要緊。
4、guacamole，說是html5的遠程web應用，支持rdp，vnc，ssh，在windows和Linux下都能運行，
需要很多配置、依賴等，支持docker下部署
缺點：
1）門檻較高，非Linux原生碼農使用起來可能會非常煩躁，而且安裝包還不小，幾百M操作復雜
2）而且好像只支持Java的？不是很確定。
3）本人沒有使用過這種方式，不過看起來這個在web端訪問遠程桌面還是做的比較好的，國內外知名度很高
4）.net下沒有找到有用的資料，高手可以嘗試一番
5）放棄，，
5、remote spark的spark gateway，這個我一點都不了解，網上搜到的，具體查看這篇文章“HTML5遠程工具”
缺點：
1）資料太少，太小眾，出問題都不知道怎么改
2）放棄
6、那就是使用ActiveX瀏覽器插件了，但是現在以及不合適了，ActiveX恐怕要徹底退出歷史舞台；
功能需求：
基於以上的各種調研，始終沒有找到一個合適的、容易上手、部署簡單、使用方便的web端訪問服務器的方案；
因為我始終無法理解為什么把這種插件安裝以及使用搞的那么復雜，完全沒有必要啊？
首先我們列舉一下我們想要的功能：
1）屏幕共享，在web端能實時查看服務器的屏幕信息
2）鼠標事件，需要支持單擊、雙擊、右鍵、光標移動，支持這4個功能足夠了
3）鍵盤事件，需要支持鍵盤按下、松開、組合鍵（比如切換輸入法）
4）拖動窗體、拖動選擇文本
如果支持以上4點那就足夠了，基本滿足用戶99%交互操作。
自研：
現在需求有了，那干脆也不繼續找現有別人的產品了，既然沒有，那就自己搞一個出來。
1、工具基本架構
2、實現原理
1）web端使用html5的websocket與web后台通信，web后台與服務端使用TCP協議通信
2）定制傳輸協議，發送命令與接收數據包需要一個傳輸協議保證數據完整，組包、檢驗包
3）web端接收到后台推送過來的頻幕位圖流數據，直接在img或canvas元素上渲染出來；
4）服務端接收到前端命令，轉成各種方式實現相應操作
3、前端功能列舉
1）websocket，接收到數據包賦值給img
|
1
2
3
4
5
6
7
8
|
var wsImpl = window.WebSocket || window.MozWebSocket;
var ws = new wsImpl('ws://localhost:7184/');
ws.onmessage = function (evt) {
var image = document.getElementById("desktop");
image.src = evt.data;
...
}
|
2）鍵盤事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(window).keypress(function (event) {
ws.send("{'action':3,'c':'" + event.which + "'}");
});
$(window).keydown(function (event) {
if (event.key == "Shift") {
if (event.ctrlKey) {
ws.send("{'action':3,'c':'" + 201 + "'}");
}
else {
ws.send("{'action':3,'c':'" + 200 + "'}");
}
}
});
|
3）鼠標事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(desktop).mousemove(function (e) {
sendXY(e.offsetX, e.offsetY);
});
$(desktop).mousedown(function (event) {
sendMousedown(event);
});
$(desktop).mouseup(function (event) {
sendMouseup(event);
});
$(desktop).click(function (e) {
sendClick();
});
$(desktop).dblclick(function (e) {
sendDoubleClick();
});
...
|
4）前端HTML
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="../Scripts/jquery-1.10.2.js"></script> 7 <script src="../Scripts/jquery.webDesktop.min.js"></script> 8 <script type="text/javascript"> 9 $(function () { 10 $(".desktop_login").click(function (e) { 11 $(".webDesktop").desktop({ 'ip': 'localhost' }); 12 }); 13 }); 14 </script> 15 16 <style> 17 body { 18 padding: 0px; 19 margin: 0px; 20 background-color: #000033; 21 color: white; 22 font-weight: bold; 23 } 24 25 .main { 26 width: 100%; 27 height: 100%; 28 } 29 30 .webDesktop { 31 text-align: left; 32 } 33 34 .tip { 35 margin-left: 100px; 36 margin-top: 100px; 37 font-size: 22px; 38 } 39 40 .user { 41 clear: both; 42 min-height: 100px; 43 } 44 45 .desktop_name { 46 margin-left: 100px; 47 margin-top: 36px; 48 font-size: 18px; 49 float: left; 50 } 51 52 .desktop_login { 53 padding: 3px 20px 3px 20px; 54 margin-left: 30px; 55 margin-top: 30px; 56 font-size: 20px; 57 float: left; 58 border: 3px solid #ffffff; 59 cursor: pointer; 60 } 61 62 .time { 63 position: fixed; 64 left: 100px; 65 bottom: 250px; 66 width: 100%; 67 height: 50px; 68 z-index: 9999; 69 font-size: 120px; 70 font-weight: normal; 71 } 72 73 .day { 74 position: fixed; 75 left: 100px; 76 bottom: 80px; 77 width: 100%; 78 height: 50px; 79 z-index: 9998; 80 font-size: 55px; 81 font-weight: normal; 82 } 83 </style> 84 </head> 85 86 <body onselectstart="return false"> 87 <div class="webDesktop"> 88 <div class="tip">按下 "登錄服務器" 進入。</div> 89 <div class="user"> 90 <div class="desktop_name">Administrator 已登錄。</div> 91 <div class="desktop_login">登錄服務器</div> 92 </div> 93 <div class="time">15:19</div> 94 <div class="day">10月21日, 星期一</div> 95 </div> 96 </body> 97 </html>
5、后台界面
1）處理前端命令
1 Task.Run(() => 2 { 3 while (true) 4 { 5 try 6 { 7 if (isBreak) break; 8 9 if (clientSocket == null || !clientSocket.Connected) 10 { 11 break; 12 } 13 14 var data = new byte[64]; 15 var length = clientSocket.Receive(data); 16 if (length > 0) 17 { 18 log.Clear(); 19 20 var cmd = StringHelper.BytesToStruct<SDesktop>(data, typeof(SDesktop)); 21 if (cmd.action != 0x02) 22 { 23 lastActionTime = DateTime.Now; 24 } 25 log.AppendLine(clientSocket.RemoteEndPoint.ToString()); 26 log.AppendFormat(">> action:{0},x:{1},y:{2},c:{3},k:{4}", cmd.action, cmd.x, cmd.y, cmd.c, cmd.k).AppendLine(); 27 28 if (cmd.action == 0x03) 29 { 30 if (cmd.k == 201 || cmd.k == 200) 31 { 32 SwitchToLanguageMode(ref log); 33 } 34 else 35 { 36 SendKeys.SendWait(cmd.c.ToString()); 37 log.AppendFormat(">> SendKeys:({0})", cmd.c).AppendLine(); 38 } 39 } 40 else 41 { 42 Desktop.Cmd(cmd, log); 43 } 44 45 AppendLog(log.ToString()); 46 } 47 } 48 catch (Exception ex) 49 { 50 AppendLog(clientSocket.RemoteEndPoint.ToString() + " >> Receive出錯,ex:" + ex.Message); 51 } 52 } 53 });
2）處理屏幕數據
1 Task.Run(() => 2 { 3 while (true) 4 { 5 try 6 { 7 if (isBreak) break; 8 9 if (clientSocket == null || !clientSocket.Connected) 10 { 11 break; 12 } 13 14 var screen = GetScreen(); 15 for (var i = 0; i < screen.Length; i = i + packsize) 16 { 17 lock (objSocketSend) 18 { 19 if (screen.Length - i < packsize) 20 { 21 clientSocket.Send(screen, i, screen.Length - i, SocketFlags.None); 22 } 23 else 24 { 25 clientSocket.Send(screen, i, packsize, SocketFlags.None); 26 } 27 } 28 } 29 } 30 catch (Exception ex) 31 { 32 AppendLog(clientSocket.RemoteEndPoint.ToString() + " >> Send出錯,ex:" + ex.Message); 33 } 34 35 var tm = (DateTime.Now - lastActionTime).TotalMilliseconds; 36 if (tm > 2000) 37 { 38 var speed = cbSpeed.Text.ToInt(); 39 Thread.Sleep(speed); 40 41 var content = string.Format("{0} >> Screen.{1},tm:{2}", clientSocket.RemoteEndPoint.ToString(), speed, tm); 42 AppendLog(content); 43 } 44 else 45 { 46 Thread.Sleep(10); 47 AppendLog(clientSocket.RemoteEndPoint.ToString() + " >> Screen,tm:" + tm); 48 } 49 } 50 51 connCount--; 52 });
最終效果：
1）鼠標事件
1）鍵盤事件
