通過TigerVNCServer + noVNC構建基於HTML的VNC環境

搭建TigerVNCServer服務器

TigerVNC is a high-performance, platform-neutral implementation of VNC.

下載

官方地址： https://tigervnc.org
GitHub地址：https://github.com/TigerVNC/tigervnc

採用版本：TigerVNC 1.9.0

安裝

查看BUILDING.txt，TigerVNC 的相關依賴

================================
Build Requirements (All Systems)
================================

-- CMake (http://www.cmake.org) v2.8 or later

-- zlib

-- FLTK 1.3.3 or later

-- If building TLS support:
   * GnuTLS 3.x
   * See "Building TLS Support" below.

-- If building native language support (NLS):
   * Gnu gettext 0.14.4 or later
   * See "Building Native Language Support" below.

-- libjpeg-turbo
   * "Normal" libjpegv6 is also supported, although it is not
     recommended as it is much slower.


=========================
Build Requirements (Unix)
=========================

-- Non-Mac platforms:
   * X11 development kit

-- If building Xvnc/libvnc.so:
   * Xorg server source code, 1.7 or never
* All build requirements Xorg imposes (see its documentation)

1、依賴FLTK庫

官方下載地址： http://www.fltk.org/index.php

進入源碼文件，依次執行如下操作：

mkdir build
cd build
cmake ..
make
make install

相關的libfltk*.a的庫均安裝在/usr/local/lib64/目錄下

2、安裝TigerVNC

進入源碼文件，修改CMakeLists.txt文件 ，增加如下內容：

# Install fltk
set(FLTK_BASE_LIBRARY "/usr/local/lib64/libfltk.a")
set(FLTK_IMAGES_LIBRARY "/usr/local/lib64/libfltk_images.a")
set(FLTK_INCLUDE_DIR "/usr/local/include/")

依次執行如下操作：

mkdir build
cd build
cmake -G "Unix Makefiles" -DCMAKE_INSTALL_PREFIX=/usr -DCMAKE_BUILD_TYPE=Release -Wno-dev ..
make
make install

undefined reference to symbol ‘dlsym@@GLIBC_2.2.5’ 錯誤處理：

/usr/bin/ld: /usr/local/lib64/libfltk.a(Fl_Window_shape.cxx.o): undefined reference to symbol 'dlsym@@GLIBC_2.2.5'
/usr/lib64/libdl.so.2: error adding symbols: DSO missing from command line
collect2: 錯誤：ld 返回 1
make[2]: *** [vncviewer/vncviewer] 錯誤 1
make[1]: *** [vncviewer/CMakeFiles/vncviewer.dir/all] 錯誤 2
make: *** [all] 錯誤 2

這個錯誤在GitHUB的ISSUE中有人提出：

https://github.com/TigerVNC/tigervnc/issues/7

作者的建議如下：

I'm afraid that your use case is impossible to solve in any general way.

The problem is that you are trying to link FLTK statically. For any static linking to work, you then need to know every dependency that static library has. But unfortunately there is no good way to determine this. And we cannot have a hard coded list as the dependencies change depending on the platform, versions and even how the other library was built.

So I'm sorry, but I'm going to have to refuse this request.

解決方案:

編譯時增加 -ldl

我通過修改編譯代碼的方式編譯成功，但是不同的運行環境需要修改的地方不一樣，如果遇到相同問題的讀者可以在下面留言，我會針對特定環境給出特定的方法。

png_*未引用錯誤處理：

/usr/local/lib64/libfltk_images.a(Fl_PNG_Image.cxx.o)：在函數‘png_read_data_from_mem’中：
Fl_PNG_Image.cxx:(.text+0x1c)：對‘png_get_io_ptr’未定義的引用
Fl_PNG_Image.cxx:(.text+0x50)：對‘png_error’未定義的引用
/usr/local/lib64/libfltk_images.a(Fl_PNG_Image.cxx.o)：在函數‘Fl_PNG_Image::load_png_(char const*, unsigned char const*, int)’中：
Fl_PNG_Image.cxx:(.text+0x24c)：對‘png_create_read_struct’未定義的引用
Fl_PNG_Image.cxx:(.text+0x265)：對‘png_create_info_struct’未定義的引用
Fl_PNG_Image.cxx:(.text+0x29e)：對‘png_destroy_read_struct’未定義的引用
Fl_PNG_Image.cxx:(.text+0x335)：對‘png_set_longjmp_fn’未定義的引用
Fl_PNG_Image.cxx:(.text+0x362)：對‘png_destroy_read_struct’未定義的引用
Fl_PNG_Image.cxx:(.text+0x42b)：對‘png_set_read_fn’未定義的引用
Fl_PNG_Image.cxx:(.text+0x440)：對‘png_init_io’未定義的引用
Fl_PNG_Image.cxx:(.text+0x453)：對‘png_read_info’未定義的引用
Fl_PNG_Image.cxx:(.text+0x466)：對‘png_get_color_type’未定義的引用
Fl_PNG_Image.cxx:(.text+0x47b)：對‘png_set_expand’未定義的引用
Fl_PNG_Image.cxx:(.text+0x48e)：對‘png_get_color_type’未定義的引用
Fl_PNG_Image.cxx:(.text+0x4dc)：對‘png_get_tRNS’未定義的引用
Fl_PNG_Image.cxx:(.text+0x4ef)：對‘png_get_color_type’未定義的引用
Fl_PNG_Image.cxx:(.text+0x52a)：對‘png_get_image_width’未定義的引用
Fl_PNG_Image.cxx:(.text+0x550)：對‘png_get_image_height’未定義的引用
Fl_PNG_Image.cxx:(.text+0x58a)：對‘png_get_bit_depth’未定義的引用
Fl_PNG_Image.cxx:(.text+0x59f)：對‘png_set_packing’未定義的引用
Fl_PNG_Image.cxx:(.text+0x5ab)：對‘png_set_expand’未定義的引用
Fl_PNG_Image.cxx:(.text+0x5c0)：對‘png_get_bit_depth’未定義的引用
Fl_PNG_Image.cxx:(.text+0x5d5)：對‘png_set_strip_16’未定義的引用
Fl_PNG_Image.cxx:(.text+0x5ed)：對‘png_get_valid’未定義的引用
Fl_PNG_Image.cxx:(.text+0x602)：對‘png_set_tRNS_to_alpha’未定義的引用
Fl_PNG_Image.cxx:(.text+0x663)：對‘png_set_longjmp_fn’未定義的引用
Fl_PNG_Image.cxx:(.text+0x784)：對‘png_set_interlace_handling’未定義的引用
Fl_PNG_Image.cxx:(.text+0x7b1)：對‘png_read_rows’未定義的引用
Fl_PNG_Image.cxx:(.text+0x7e1)：對‘png_read_end’未定義的引用
Fl_PNG_Image.cxx:(.text+0x7f9)：對‘png_destroy_read_struct’未定義的引用
collect2: 錯誤：ld 返回 1
make[2]: *** [vncviewer/vncviewer] 錯誤 1
make[1]: *** [vncviewer/CMakeFiles/vncviewer.dir/all] 錯誤 2
make: *** [all] 錯誤 2

解決方案:

編譯時增加 -lpng

3、安裝成功

在/usr/bin下生成相關可執行文件：

[zhaojq@localhost bin]# vnc
vncconfig  vncpasswd  vncserver  vncviewer

啓動

1、設置VNC密碼

[root@vio062033 ~]# vncserver

You will require a password to access your desktops.

Password:
Verify:
Would you like to enter a view-only password (y/n)? y
Password:
Verify:

New 'vio062033:1 (root)' desktop is vio062033:1

Creating default startup script /root/.vnc/xstartup
Creating default config /root/.vnc/config
Starting applications specified in /root/.vnc/xstartup
Log file is /root/.vnc/vio062033:1.log

2、 查看該服務是否正確運行

[root@vio062033 ~]# netstat -lntp | grep "5901"
tcp        0      0 0.0.0.0:5901            0.0.0.0:*               LISTEN      6711/Xvnc           
tcp6       0      0 :::5901                 :::*                    LISTEN      6711/Xvnc      

搭建noVNC客戶端

NoVnc Web 端的Vnc軟件、可以直接通過網頁訪問遠程主機,採用 HTML5、WebSockets、Canvas和 JavaScript 實現,被普遍用在各大雲平臺中。

下載

官方地址： http://novnc.com
GitHub地址：https://github.com/novnc/noVNC

採用版本：noVNC 1.0.0

啓動（源碼下載後無需安裝)

[zhaojq@localhost Client]$ cd noVNC
[zhaojq@localhost Client]$ ./utils/launch.sh --vnc localhost:5901          ##第一次會幫我們下載Websokify
Warning: could not find self.pem
Using local websockify at /home/zhaojq/Workspace/VNC/Client/utils/websockify/run
Starting webserver and WebSockets proxy on port 6080


Navigate to this URL:

    http://localhost.localdomain:6080/vnc.html?host=localhost.localdomain&port=6080

Press Ctrl-C to exit


WebSocket server settings:
  - Listen on :6080
  - Web server. Web root: /home/zhaojq/Workspace/VNC/Client
  - No SSL/TLS support (no cert file)
  - proxying from :6080 to 173.0.20.109:5901
localhost.localdomain - - [16/Oct/2018 18:20:32] 127.0.0.1: Plain non-SSL (ws://) WebSocket connection
localhost.localdomain - - [16/Oct/2018 18:20:32] 127.0.0.1: Path: '/websockify'
localhost.localdomain - - [16/Oct/2018 18:20:32] connecting to: 173.0.20.109:5901

訪問

在瀏覽器打開地址就可以訪問

http://127.0.0.1:6080/vnc.html

點擊鏈接，輸入VNC Server端密碼：

遠程訪問成功