mirror of https://github.com/midoks/mdserver-web
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.3 KiB
93 lines
2.3 KiB
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="../../src/xterm.css" />
|
|
<link rel="stylesheet" href="../../demo/style.css" />
|
|
<script src="../../src/xterm.js"></script>
|
|
<script src="attach.js"></script>
|
|
<style>
|
|
body {
|
|
color: #111;
|
|
}
|
|
|
|
h1, h2 {
|
|
color: #444;
|
|
border-bottom: 1px solid #ddd;
|
|
text-align: left;
|
|
}
|
|
|
|
form {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
input, button {
|
|
line-height: 22px;
|
|
font-size: 16px;
|
|
display: inline-block;
|
|
border-radius: 2px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
input {
|
|
height: 22px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
button {
|
|
height: 28px;
|
|
background-color: #ccc;
|
|
cursor: pointer;
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<h1>
|
|
xterm.js: socket attach
|
|
</h1>
|
|
<p>
|
|
Attach the terminal to a WebSocket terminal stream with ease. Perfect for attaching to your
|
|
Docker containers.
|
|
</p>
|
|
<h2>
|
|
Socket information
|
|
</h2>
|
|
<form id="socket-form">
|
|
<input id="socket-url"
|
|
type="text"
|
|
placeholder="Enter socket url (e.g. ws://mysock)"
|
|
autofocus />
|
|
<button>
|
|
Attach
|
|
</button>
|
|
</form>
|
|
<div id="terminal-container"></div>
|
|
|
|
</div>
|
|
<script>
|
|
var term = new Terminal(),
|
|
container = document.getElementById('terminal-container'),
|
|
socketUrl = document.getElementById('socket-url'),
|
|
socketForm = document.getElementById('socket-form');
|
|
|
|
socketForm.addEventListener('submit', function (ev) {
|
|
ev.preventDefault();
|
|
var url = socketUrl.value,
|
|
sock = new WebSocket(url);
|
|
sock.addEventListener('open', function () {
|
|
term.attach(sock);
|
|
});
|
|
});
|
|
|
|
term.open(container);
|
|
</script>
|
|
</body>
|
|
</html> |