webvnc novnc 方案

項目背景

這兩天領導派了一個活，要求在我們現有的物聯網平臺做一個功能，功能的大致是這樣的。

在瀏覽器端點擊一個設備鏈接這個設備的桌面。并且能夠進行文件，命令行的操作。

其實就是一個web版的vnc鏈接功能。我們知道如果兩個設備需要遠程連接。除了使用teamview或向日葵，這種第三方的軟件，就是使用vnc來遠程連接設備。

這里說明一下vnc

vncserver 是一個為了滿足分布式用戶共享服務器上面的資源，而在服務器上開啟的一項服務，對應的客戶端軟件為vncviewer；它也可以是不同的操作系統，比如利用windows遠程訪問linux系統資源的一種遠程訪問方式。

在服務器上，或者被操控的設備上安裝vncserver，在其他設備上安裝vncviewer。這樣二者就能夠單向訪問資源了。

概念理解清楚了，我們在來分析一下需求。如果需求不要去在瀏覽器中實現，其實這個功能是很完成的。就是給一臺電腦安裝上vncviewer，給其他所有待控制的設備安裝上vncserver。使用ip地址+密碼就能進行鏈接控制。

但一旦要求在瀏覽器中就比較麻煩了。

開始調研

其實一接到這個需求，我是懵圈的，我一個前端，你讓我去調用這種方案。我連linux命令都不會敲幾個。

沒辦法就要想辦法，領導把問題拋給你，是相信你。知道你能完成。

首先我想到的是在github上找找相關的項目，搜索web-vnc，語言設置為javascript

點擊此處鏈接即可查看搜索結果

還真發現了幾個項目。

以下是截圖。

首先是noVNC這個項目，star很多，看描述完全就是我需要的功能

該項目的特征如下

支持所有現代瀏覽器，包括移動設備（iOS，Android）

支持的VNC編碼：raw，copyrect，rre，hextile，tight，tightPNG

支持縮放，裁剪和調整桌面大小

本地光標渲染

剪貼板復制/粘貼

翻譯

觸摸手勢可模擬常見的鼠標操作

主要在MPL 2.0下獲得許可，有關詳細信息，請參見 許可文檔

官方的兩個效果圖

瀏覽器的要求是 Chrome 49, Firefox 44, Safari 11, Opera 36, Edge 79

足夠使用了。而且我們平臺用戶都是不會用IE。

探索實踐

方案找到了，就開始真正的著手去做，領導讓你做方案，你不能僅僅把這個項目丟給他，你需要做出一套完整的

詳細的，可落地的方案。 每一步要做什么，安裝那些軟件，如何配置參數，那些做不到，那些需要注意。

說做就做吧

我有三臺機器，本地虛擬機，騰訊云服務器，鯤鵬云服務器，我打算用其中一臺來做web-vnc的方案。

這里先來簡單介紹一下，noVNC的原理。

noVNC是將一個設備的vnc服務使用websocket代理起來，并通過一個web服務來供用戶使用。

原理一句話就能說完。但要真正理解去不容易。

首先你的設備需要安裝并啟動了vnc，測試這一步可以使用vncviewer來鏈接設備，能正常顯示頁面則表示vnc啟動成功。

vnc啟動成功后，還需要啟動noVNC的一個websocket代理，這個代理所做的事情就是將vnc的服務代理到另一個端口，并通過websocket服務來提供訪問。

代理啟動后，我們還要針對這個websocket來進行編碼，處理返回的數據，發送請求。所幸這一步noVNC已經做好了，給我們提供了npm包支持。

通過看官方文檔，以及查閱資料，將這些概念流程都搞清楚了。下面就是動手安裝了。

首先在設備上安裝vnc服務，并啟動一個服務

sudo apt-get install xfce4 sudo apt-get install vnc4server sudo apt-get install xrdp

1

2

3

4

編輯

sudo vi ~/.vnc/xstartup

1

替換一下內容

#!/bin/sh export XKL_XMODMAP_DISABLE=1 unset SESSION_MANAGER unset DBUS_SESSION_BUS_ADDRESS gnome-panel & gnome-settings-daemon & metacity & nautilus & gnome-terminal &

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

啟動vncserver

vncserver

1

這種方式啟動的vnc一般都是5901端口，端口號隨著vnc服務累加，5902，5903,

官方提供了二種方案來安裝啟動noVNC

第一種：

源碼啟動安裝

git clone https://github.com/novnc/noVNC.git cd noVNC ./utils/launch.sh --vnc localhost:5901

1

2

3

運行launch.sh腳本可以自動地下載，并啟動noVNC的姐妹項目websocket的代理。

代理項目是這個

執行日志

Warning: could not find self.pem Using local websockify at /home/fizz/noVNC/utils/websockify/run Starting webserver and WebSockets proxy on port 6080 /home/fizz/noVNC/utils/websockify/websockify/websocket.py:31: UserWarning: no 'numpy' module, HyBi protocol will be slower warnings.warn("no 'numpy' module, HyBi protocol will be slower") WebSocket server settings: - Listen on :6080 - Web server. Web root: /home/fizz/noVNC - No SSL/TLS support (no cert file) - proxying from :6080 to localhost:5901 Navigate to this URL: http://ubuntu:6080/vnc.html?host=ubuntu&port=6080 Press Ctrl-C to exit

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

腳本有很多參數，可直接看shell源碼

第二種：

使用snap安裝。

sudo snap install novnc novnc --listen 6081 --vnc localhost:5901 # /snap/bin/novnc if /snap/bin is not in your PATH

1

2

注意snap不能在arm解構的設備上使用，比較坑。建議還是使用源碼安裝部署。可以將源碼放到oss上以加速訪問下載。

項目啟動后就可以使用ip+端口號來訪問noVNC的服務。默認的端口是6080，你也可以添加 --listen 6081來修改暴露的端口

使用瀏覽器打開地址會，會看到這個一個頁面。

看到這里方案算是差不多了。下面開始想方案。

詳細方案制定

環境要求

要使用瀏覽器連接虛擬機的VNC，需要保證滿足一下條件

? 虛擬機已安裝桌面軟件

? 虛擬機已安裝vncserver

? 虛擬機已安裝noVNC

? 虛擬機已啟動noVNC的代理

? 瀏覽版本要求 Chrome 49, Firefox 44, Safari 11, Opera 36, Edge 79

安裝運行noVNC（linux系統）

可使用snap來安裝, 但arm架構不支持此方法

sudo snap install novnc sudo novnc --listen 6081 --vnc localhost:5901 /snap/bin/novn

1

2

3

5901 為vnc端口

6081 為web服務端口

源碼來部署

git clone https://github.com/novnc/noVNC.git cd noVNC ./utils/launch.sh --vnc localhost:5901 --listen 6080

1

2

3

運行noVNC項目中的launch.sh腳本可以自動下載并開啟websockify，啟動一個webserver。

這個web服務就包含了訪問服務器vnc的所有前端資源。只需要通過一個連接就可以訪問。 客戶端無需任何集成步驟。

效果圖

相關代碼庫與功能

noVNC GitHub

noVNC官網

其他項目的使用

npm 庫

web前端 虛擬化

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。