0.0.5 • Published 4 years ago

simple-novnc v0.0.5

Weekly downloads
1
License
ISC
Repository
-
Last release
4 years ago

#安装

npm install 安装使用,适用于vue,react前后端分离项目

- npm install simple-novnc
 import SimpleVNC from 'simple-novnc/src/index'
 import 'simple-novnc/build/vnc.css'

传统js链接方式调用

下载中台服务提供的vnc插件包,直接在页面中引入相对资源路径
```
    <script src="./js/simplevnc.min.js"></script>
    <link rel="stylesheet" href="./css/simplevnc.css">
```

使用方式

eg:在服务包的/dist/index.html,是一个基本的使用demo,你可以参考它
- Hmtl文件引入dom
```
     <div class="vnc"  id="noVNC_main">
        <!--  top_bar info dom-->
        <div id="top_bar">
            <div id="status">Loading</div>
            <div id="sendCtrlAltDelButton" class="sendCtrlAltDelButton" onclick="sendCtrlAltDel">Send CtrlAltDel</div>
        </div>
        <!-- main node dom ,you must code -->
        <div id="noVNC_canvas" class="vnc-canvas"> </div>
        <!-- clipBoard ,You can decide if you need it -->
        <div class="noVNC_vcenter">
            <div id="noVNC_clipboard" class="noVNC_panel">
                    <textarea id="noVNC_clipboard_text" rows=5></textarea>
                    <input id="noVNC_clipboard_clear_button" type="button" value="清除" class="noVNC_submit_clear">
                </div>
            <button  id="noVNC_clipboard_button" class="noVNC_button" >剪贴板</button> 
        </div>
    </div>
```
- js调用方式
 let novnc = new SimpleVNC({
          nodeId: 'noVNC_canvas',
          width: '800px',
          height: '600px',
          config: {
              host: '192.168.200.15',
              port: '8888',
              password: 'ssssss',
              path: 'websockify/?vm_uuid=532922ca-92ca-4556-b963-22f4de627469',
          }
      });
      novnc.initVNC()

#API -SimpleVNC 提供的vnc对象 ,使用 new SimpleVNC() 即可实例化整个VNC对象,提供一个option参数传入 option 参数,实例化对象后传入可配置的参数选项 -nodeId : string类型,传入VNC_canvas 中dom的ID,必传项 - width : string类型,宽度,支持px,vw,vh,em等单位,与css一致 - height: string类型,高度,支持px,vw,vh,em等单位,与css一致 - addLoadiing :bool类型,是否在初始loading时加载 loadding动画,默认true - autoConnect :bool类型,是否加载dom,实例化后自动连接,默认自动连接为true,你也可以选择false后,执行手动连接事件 - config :Object类型,必传,连接VNC所需的配置参数,包括 host 地址,port 端口,password 密码,path (webscoket 连接信息) eg:config:{ host: '192.168.200.15', port: '8888', password: '', path: 'websockify/?vm_uuid=532922ca-92ca-4556-b963-22f4de627469', } -Event 事件

0.0.5

4 years ago

0.0.3

4 years ago

0.0.4

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago