Newer
Older
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html lang="en">
<head>
<meta charset="utf-8" />
<title>pyxterm.js</title>
<style>
html {
font-family: arial;
}
</style>
<link
rel="stylesheet"
href="https://unpkg.com/xterm@4.11.0/css/xterm.css"
/>
</head>
<body>
<span style="font-size: 1.4em">pyxterm.js</span>
<span style="font-size: small"
>status:
<span style="font-size: small" id="status">connecting...</span></span
>
<div style="width: 100%; height: calc(100% - 50px)" id="terminal"></div>
<div style="width: 50%; height: calc(20%)" id="term2">another terminal</div>
<p style="text-align: right; font-size: small">
built by <a href="https://chadsmith.dev">Chad Smith</a>
<a href="https://github.com/cs01">GitHub</a>
</p>
<!-- xterm -->
<script src="https://unpkg.com/xterm@4.11.0/lib/xterm.js"></script>
<script src="https://unpkg.com/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
<script src="https://unpkg.com/xterm-addon-web-links@0.4.0/lib/xterm-addon-web-links.js"></script>
<script src="https://unpkg.com/xterm-addon-search@0.8.0/lib/xterm-addon-sear
ch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
<script>
const term = new Terminal({
cursorBlink: true,
macOptionIsMeta: true,
scrollback: 300,
});
// https://github.com/xtermjs/xterm.js/issues/2941
const fit = new FitAddon.FitAddon();
term.loadAddon(fit);
term.loadAddon(new WebLinksAddon.WebLinksAddon());
term.loadAddon(new SearchAddon.SearchAddon());
term.open(document.getElementById("terminal"));
fit.fit();
term.resize(15, 50);
console.log(`size: ${term.cols} columns, ${term.rows} rows`);
fit.fit();
term.writeln("Welcome to pyxterm.js!");
term.writeln("https://github.com/cs01/pyxterm.js");
term.onData((data) => {
console.log("key pressed in browser:", data);
socket.emit("pty-input", { input: data });
});
const socket = io.connect("/pty");
const status = document.getElementById("status");
socket.on("pty-output", function (data) {
console.log("new output received from server:", data.output);
term.write(data.output);
});
socket.on("connect", () => {
fitToscreen();
status.innerHTML =
'<span style="background-color: lightgreen;">connected</span>';
});
socket.on("disconnect", () => {
status.innerHTML =
'<span style="background-color: #ff8383;">disconnected</span>';
});
function fitToscreen() {
fit.fit();
const dims = { cols: term.cols, rows: term.rows };
console.log("sending new dimensions to server's pty", dims);
socket.emit("resize", dims);
}
function debounce(func, wait_ms) {
let timeout;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait_ms);
};
}
const wait_ms = 50;
window.onresize = debounce(fitToscreen, wait_ms);
</script>
<script>
const term2 = new Terminal({
cursorBlink: true,
macOptionIsMeta: true,
scrollback: true,
});
// https://github.com/xtermjs/xterm.js/issues/2941
const fit2 = new FitAddon.FitAddon();
term2.loadAddon(fit2);
term2.loadAddon(new WebLinksAddon.WebLinksAddon());
term2.loadAddon(new SearchAddon.SearchAddon());
term2.open(document.getElementById("term2"));
fit2.fit();
term2.resize(15, 50);
console.log(`size: ${term.cols} columns, ${term.rows} rows`);
fit2.fit();
term2.writeln("Welcome to pyxterm.js!");
term2.writeln("https://github.com/cs01/pyxterm.js");
</script>
</body>
</html>