-
Notifications
You must be signed in to change notification settings - Fork 76
/
VncScreen.js
101 lines (83 loc) · 2.74 KB
/
VncScreen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React, { Component } from "react";
import RFB from "@novnc/novnc/core/rfb";
import urlTo from "../../util/urlTo";
import isSecure from "../../util/isSecure";
export default class VncScreen extends Component {
static resizeVnc(rfb) {
if (rfb) {
rfb.resizeSession = true;
rfb.scaleViewport = true;
}
}
static defaultPort({ port, protocol }) {
return port || (protocol === "https:" ? "443" : "80");
}
connection(connection) {
this.props.onUpdateState(connection);
}
onVNCDisconnect = () => {
this.connection("disconnected");
};
onVNCConnect = () => {
this.connection("connected");
};
componentDidMount() {
const { session, origin } = this.props;
this.connection("connecting");
if (origin && session) {
const link = urlTo(window.location.href);
const port = VncScreen.defaultPort(link);
this.disconnect(this.rfb);
this.rfb = this.createRFB(link, port, session, isSecure(link));
}
}
componentDidUpdate(prevProps) {
const prevOrigin = prevProps.origin;
const { session, origin } = this.props;
if (origin && session && prevOrigin !== origin) {
const link = urlTo(window.location.href);
const port = VncScreen.defaultPort(link);
this.disconnect(this.rfb);
this.rfb = this.createRFB(link, port, session, isSecure(link));
}
}
componentWillUnmount() {
this.rfb && this.rfb.removeEventListener("disconnect", this.onVNCDisconnect);
this.rfb && this.rfb.removeEventListener("connect", this.onVNCConnect);
this.disconnect(this.rfb);
}
createRFB(link, port, session, secure) {
const rfb = new RFB(this.canvas, `${secure ? "wss" : "ws"}://${link.hostname}:${port}/ws/vnc/${session}`, {
credentials: {
password: "selenoid",
},
});
rfb.addEventListener("connect", this.onVNCConnect);
rfb.addEventListener("disconnect", this.onVNCDisconnect);
rfb.scaleViewport = true;
rfb.resizeSession = true;
rfb.viewOnly = true;
return rfb;
}
lock(unlocked) {
if (this.rfb) {
this.rfb.viewOnly = !unlocked;
}
}
disconnect(rfb) {
if (rfb && rfb._rfb_connection_state && rfb._rfb_connection_state !== "disconnected") {
rfb.disconnect();
}
}
render() {
return (
<div
className="vnc-screen"
ref={screen => {
this.canvas = screen;
VncScreen.resizeVnc(this.rfb);
}}
></div>
);
}
}