Skip to content

Commit 8b3d478

Browse files
committed
move document to separate site
1 parent 1363bf2 commit 8b3d478

File tree

1 file changed

+7
-108
lines changed

1 file changed

+7
-108
lines changed

README.md

Lines changed: 7 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,20 @@
1-
<mark>**WiTTY: Web-based interactive TTY**<mark>
1+
# WiTTY: Web-based interactive TTY
22

3-
# Introduction
3+
Read document of WiTTY at [**https://syssecfsu.github.io/witty/**](https://syssecfsu.github.io/witty/)
44

5-
This program allows you to use terminal in the browser. Simply run the program and give it the command to execute when users connect via the browser. The design goal of this tool is to help teaching courses that use Unix-like CLI environment. WiTTY has the following features that distinguish itself from other similar tools:
5+
WiTTY allows you to use terminal in the browser. Simply run the program and give it the command to execute when users connect via the browser. WiTTY has the following features that distinguish itself from other similar tools:
66

7-
1. WiTTY allows users to **easily record, replay, and share console sessions** with just a few clicks. This make it a breeze to answer course-related questions. Instead of wall of text to describe their questions, students can just send a recorded session.
7+
1. WiTTY allows users to **easily record, replay, and share console sessions** with just a few clicks.
88

99
2. It allows others to **view ongoing interactive sessions**. This is useful for providing live remote help.
1010

11-
>A challenge of this use case is that our home networks are almost always behind NAT, making it difficult to run WiTTY as a publicly accessible server. Security is also potentially a concern.
1211

13-
3. Great attention has been paid to ensure the cleanses of the code. This, hopefully, provides a useful example of **Do as I say and as I do**.
12+
3. Great attention has been paid to ensure the cleanses of the code. This, hopefully, provides a useful counter-example of **Do as I say, but not as I do**.
1413

15-
# User Interface
16-
17-
You can use WiTTY to run any command line programs, such as ```bash```, ```htop```, ```vi```, ```ssh```. This screenshot shows the main page of WiTTY after login. There are two tabs that list live and recorded sessions, respectively. You can click ```New Session``` to create a new interactive session. Click the <img src="assets/img/view.svg" width="16px"> icon of an interactive session opens a read-only view of that session.
18-
19-
<img src="extra/main.png" width="800px">
20-
21-
22-
On the interactive terminal window, you can record an ongoing session.
14+
Here is a screenshot of WiTTY running on Raspberry Pi:
2315

2416
<img src="extra/interactive.png" width="800px">
2517

26-
This screenshot shows three recorded sessions, you can replay <img src="assets/img/play.svg" width="16px">, download <img src="assets/img/download.svg" width="16px">, rename <img src="assets/img/edit.svg" width="16px">, and delete <img src="assets/img/delete.svg" width="16px"> recorded sessions.
27-
28-
<img src="extra/view.png" width="800px">
29-
30-
31-
Here is a recorded session, where we domonstrate how to use the command line replay utility (in ```cmd/replay```) to replay another recorded session that sshes into a Raspberry Pi running
32-
[pi-hole](https://pi-hole.net/). You can fully control the playback using the progress bar.
33-
34-
>The inception is strong with this one!
35-
36-
<img src="extra/replay.gif" width="800px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
37-
38-
39-
<!--
40-
commands to create high quality gif from mkv/mp4 files
41-
ffmpeg -i replay.mkv -vf palettegen palette.png
42-
ffmpeg -i replay.mkv -i palette.png -lavfi paletteuse output.gif
43-
gifsicle -O3 .\output.gif -o replay.gif
44-
-->
45-
46-
47-
This program is written in the [go programming language](https://go.dev/), using the
48-
[Gin web framework](https://github.com/gin-gonic/gin), [gorilla/websocket](https://github.com/gorilla/websocket), [pty](https://github.com/creack/pty), and the wonderful [xterm.js](https://xtermjs.org/)!
49-
The workflow is simple, the client will initiate a terminal
50-
window (xterm.js) and create a websocket with the server, which relays the data between pty and xterm. You can customize the look and feel of the HTML pages by editing files under the ```assets``` directory.
51-
52-
The program has been tested on Linux, WSL2, Raspberry Pi 3B (Debian), and MacOSX using Google Chrome, Firefox, and Safari.
53-
54-
Most icons were provided by [fontawesome](https://fontawesome.com/) under this [license](https://fontawesome.com/license).
55-
56-
# Installation
57-
58-
1. Install the [go](https://go.dev/) compiler. __Make sure you have go 1.17 or higher.__
59-
60-
2. Download the release and unzip it, or clone the repo
61-
62-
```git clone https://github.com/syssecfsu/witty.git```
63-
64-
3. Go to the root directory of the source code and build the program. WiTTY uses go:embed to embed assets in the binary. Remember to build WiTTY after changing templates.
65-
66-
```go build .```
67-
68-
4. WiTTY uses TLS to protect its traffic. You can request a free [Let's Encrypt](https://letsencrypt.org/) cert or use a self-signed cert. Here is how to create a self-signed cert in the ```tls``` sub-directory:
69-
70-
\# Generate a private key for a curve
71-
72-
```openssl ecparam -name prime256v1 -genkey -noout -out private-key.pem```
73-
74-
\# Create a self-signed certificate
75-
76-
```openssl req -new -x509 -key private-key.pem -out cert.pem -days 360```
77-
78-
5. Add a user to the user accounts, follow the instructions on screen to provide the password
79-
80-
```./witty adduser <username>```
81-
82-
6. Start the server and give it the command to run. By default, the server listens on 8080 (you can override it with the ```-p/-port``` option):
83-
84-
```./witty run htop``` or
85-
86-
```./witty run -p 9000 ssh <ssh_server_ip> -l <user_name>```
87-
88-
If so desired, you can disable user authenticate with ```-n/-naked```, (not recommended) for example:
89-
90-
```./witty run -naked htop```
91-
92-
7. Connect to the server with your browser at port 8080 or the one specified in step 6, for example
93-
94-
```https://<witty_server_ip>:8080```
95-
96-
# User Authentication
97-
98-
WiTTY uses username/password based authentication. The user database is stored in ```user.db```. The passwords are salted with 64 bytes of random characters and then hashed using SHA256. WiTTY has three sub-commands to manage ```user.db```.
99-
100-
- ```witty adduser <username>```
101-
- ```witty deluser <username>```
102-
- ```witty listusers```
103-
104-
They are pretty self-explanatory. Just follow the instructions on screen. Note that passwords must be 12 bytes or longer.
105-
106-
# Recorded Sessions
107-
108-
WiTTY provides two sub-commands to merge and replay recorded sessions.
109-
110-
- ```witty replay -w <wait_time> <recorded_session>```
111-
- ```witty merge -o <output_file> <record1> <record2> ...```
112-
113-
Recorded sessions often have long delay between outputs. You can set wait_time to limit the maximum wait time between outputs, to speed up the replay.
114-
115-
You can also use ```witty merge``` to merge two or more recorded sessions, as shown below.
116-
117-
<img src="extra/merge.png" width="640px">
18+
You can find more information at [**https://syssecfsu.github.io/witty/**](https://syssecfsu.github.io/witty/)
11819

119-
The intended use case is to record a separate session for each individual task, rename and merge them into a final session for submission. The following screenshot shows how to rename a recorded session (you can also rename a recorded session using commands in a shell. All the recorded sessions are located under the ```records``` directory).
12020

121-
<img src="extra/rename.png" width="800px">

0 commit comments

Comments
 (0)