noVNC+websockify 实现远程桌面统一端口

1. noVNC

场景和目的

场景:需要可视化调试作业环境。

​ noVNC是一种基于浏览器的VNC(Virtual Network Computing)客户端,它使用户能够通过网页浏览器远程访问和控制其他计算机上的桌面环境。noVNC利用了WebSockets和HTML5 Canvas技术,通过这些技术,它可以在不需要安装任何额外插件或软件的情况下,在浏览器中提供高性能的远程桌面体验。noVNC是一个 基于HTML5 的VNC客户端,采用 WebSockets, Canvas 和 JavaScript 实现,noVNC 被普遍用在各大云计算、虚拟机控制面板中,比如 OpenStack Dashboard 和 OpenNebula Sunstone 都用的是 noVNC。目的通过浏览器远程访问os的桌面。

image-20250703164237046


​ VNC (Virtual Network Console)是虚拟网络控制台的缩写,分为server端和client端两部分,分别部署完成后在server端简单的配置即可使用,基于TCP的通信。noVNC项目是通过取消VNC Client的安装,直接通过浏览器访问noVNC,然后由noVNC间接访问VNC server来达到client web化。从上面部署方式看到,VNC server仍然保留且没有任何修改,处理的始终是TCP流量,但是浏览器和noVNC之间是在http基础上使用WebSocket交互,由于VNC server 无法处理websocket流量,因此引入了 websockify ,noVNC的姐妹项目,负责把WebSocket流量转换为普通的TCP流,使VNC server正常工作。noVNC其实是一个HTML形式的APP,websockify并充当了一个mini web server的角色,当浏览器访问时,会通过网络加载运行noVNC。

浏览器 --(基于http的websocket协议)–noVNC [websockify]-- (tcp)–vncserver

整体流程

  • PC Chrome 请求 Node1,websockify 将请求转发到指定的 Target1或Target2 ,Target1或Target2 收到请求返回 TCP socket 响应,在 Node1 websockify 代理器这里被转成 Web socket 的响应。

2. 环境安装

2.1 VNCserver 和 界面安装

  • centos
  1. 安装VNC server
    yum install -y "tigervnc-server"

  2. 安装并使用图形界面

     yum groupinstall -y "GNOME Desktop"
     systemctl set-default graphical.target
    
  • ubuntu
  1. 安装VNC server
    apt install tigervnc-standalone-server"

  2. 安装并使用图形界面

     apt install ubuntu-gnome-desktop
     systemctl set-default multi-user.target
    

~/.vnc/目录下生成一个 passwd文件

2.2 noVNC 和 websockify 下载

noVNC采用WebSockets协议实现,但是目前大多数VNC服务器都不支持 WebSockets,所以noVNC是不能直接连接 VNC 服务器,需要一个代理来做WebSockets和TCP sockets 之间的转换。
这个代理在noVNC的目录里,叫做websockify。 websockify以前名为wsproxy,是noVNC项目的一部分,websockify的主要实现是用python。有其他语言的几种替代实现:websockify-js(JavaScript / Node.js)和(C,Clojure,Ruby)等实现的。

下载地址:

3. 启动VNCServer 和 noVNC 服务

3.1 启动VNC服务器

  • 提前写入密码和配置权限

    echo $mypasswd | vncpasswd -f > /root/.vnc/passwd 
    chmod 0600 /root/.vnc/passwd 
    
    
  • 启动
    vncserver -localhost no :1

    vncserver :1

    • 启动成功查看端口

      image-20240419104509610

3.2 启动 noVNC

3.2.1 websockify 和 noVNC 独立启动

  • 启动noVNC

    cd path/noVNC
    ./utils/novnc_proxy --listen 6900
    

    noVNC 这里启动,作为提供一个vnc.html的webServer

    image-20240419104520691
  • 启动websockify

    cd path/websockify
    webosockify 目录下 `$ run --token-plugin TokenFile --token-source ./token/ 6800`
    

    Alt text

cat ./token/token.conf

(base) [root@master129 websockify]# pwd
/root/noVNC/utils/websockify
(base) [root@master129 websockify]# cat ./token/token.conf 
f88d92a40a754f6cad4e635ae8bde295: 10.244.200.230:5901
test2: 192.168.38.131:5901

token文件内容形如 token1:host1:port1,这里的 token1 是全局唯一的一个字符串标识,host1 目标主机的 ip 地址,而 port1 是目标主机上VNC Server 的端口号。

  • 登录
http://192.168.38.129:6900/vnc.html?host=192.168.38.129&port=6800&path=websockify/?token=test2

第一个ip+port是noVNC的ip加端口,第二个ip+port是websockify的ip加端口
“test2” 是token

image-20240419104604355

登录成功

image-20240419104630041

3.2.2 websockify 一步启动

一个端口,多个代理原理:引入 token 文件,在 websockify 项目的 Wiki 主页介绍了实现一个端口,多个代理的方法就是 websocketproxy.py 这个代理从一个指定的 token 目录读取 token 文件,一个 token 文件通常对应一台客户机。

  • 启动
/root/noVNC/utils/websockify/run --web /root/noVNC --target-config ./token 6080
  • 登录

    http://192.168.38.129:6080/vnc.html?path=websockify/?token=test2
    

    image-20240419104825571

4. 部署

4.1 以deployment方式部署在k8s集群

  • websockify

    apiVersion: apps/v1
    kind: Deployment
    metadata:
    namespace: bita-user
    name: novnc-websockify
    labels:
      app: novnc-websockify
    spec:
    selector:
      matchLabels:
        app: novnc-websockify
    replicas: 1
    template:
      metadata:
        labels:
          app: novnc-websockify
      spec:
        hostNetwork: false
        containers:
         - name: novnc-websockify-v1
           image: registry.bitahub.com:5000/leinaoyun-tag/websockify:v1.1
           volumeMounts:
             - mountPath: /websockify/token/token.conf
               name: tokenconf
               subPath: token.conf
           imagePullPolicy: Always
        restartPolicy: Always
        nodeSelector:
           novnc: "true"
        volumes:
          - name: tokenconf
            hostPath:
              path: /etc/websockify/token
              type: Directory
    
    
- websockify-service

​```yaml
apiVersion: v1
kind: Service
metadata:
  name: novnc-websockify
  namespace: bita-user
spec:
  selector:
    app: novnc-websockify
  type: NodePort
  ports:
    - protocol: TCP
      port: 36081
      targetPort: 6081
      nodePort: 36081

5. 其他细节

5.1 用户登录VNC

  • token
    当vncserver 数量较多,要保证token的唯一性,所以这个token建议通过接口调用返回 。

  • 密码
    密码可以在启动容器时,提前设置好,用户只用关心VNC作业使用即可。

5.2 自定义分辨率

在服务器端启动VNC服务时按如下命令启动:vncserver -geometry 1152x864 -depth 24 即可以1152x864的分辨率和24位的颜色深度来显示。

-geometry x指定显示桌面的分辨率,默认为1024x768
-depth 指定显示颜色,设定范围8~32

这个命令实际中发挥作用场景:例如本地分辨率为1024x768 如果不设定远程VNC服务分辨率就会造成桌面显示不全的问题。

6. 参考文档

https://github.com/novnc/noVNC
https://github.com/novnc/websockify

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值