From aa283ec188c1dea0a50536bfeef278cf0d01e480 Mon Sep 17 00:00:00 2001 From: Zhi Wang Date: Tue, 4 Jan 2022 21:21:21 -0500 Subject: [PATCH] wip --- assets/index.html | 48 +++++++++++++++++----------------- assets/main.css | 5 +++- assets/main.js | 65 ++++++++++++++++++++++++----------------------- main.go | 25 +++++++++--------- 4 files changed, 73 insertions(+), 70 deletions(-) diff --git a/assets/index.html b/assets/index.html index 1436cbd..b6ed2ab 100644 --- a/assets/index.html +++ b/assets/index.html @@ -12,11 +12,12 @@ - + + Websocket Terminal @@ -28,31 +29,28 @@ diff --git a/assets/main.css b/assets/main.css index a4dc364..04ec9ae 100644 --- a/assets/main.css +++ b/assets/main.css @@ -14,12 +14,15 @@ .xterm-viewport.xterm-viewport { scrollbar-width: thin; } + .xterm-viewport::-webkit-scrollbar { width: 10px; } + .xterm-viewport::-webkit-scrollbar-track { opacity: 0; -} +} + .xterm-viewport::-webkit-scrollbar-thumb { min-height: 20px; background-color: #ffffff20; diff --git a/assets/main.js b/assets/main.js index 2ca6f15..c7a8cad 100644 --- a/assets/main.js +++ b/assets/main.js @@ -1,50 +1,51 @@ function createTerminal() { - // vscode-snazzy https://github.com/Tyriar/vscode-snazzy - var baseTheme = { - foreground: '#eff0eb', - background: '#282a36', - selection: '#97979b33', - black: '#282a36', - brightBlack: '#686868', - red: '#ff5c57', - brightRed: '#ff5c57', - green: '#5af78e', - brightGreen: '#5af78e', - yellow: '#f3f99d', - brightYellow: '#f3f99d', - blue: '#57c7ff', - brightBlue: '#57c7ff', - magenta: '#ff6ac1', - brightMagenta: '#ff6ac1', - cyan: '#9aedfe', - brightCyan: '#9aedfe', - white: '#f1f1f0', - brightWhite: '#eff0eb' - }; + // vscode-snazzy https://github.com/Tyriar/vscode-snazzy + // copied from xterm.js website + var baseTheme = { + foreground: '#eff0eb', + background: '#282a36', + selection: '#97979b33', + black: '#282a36', + brightBlack: '#686868', + red: '#ff5c57', + brightRed: '#ff5c57', + green: '#5af78e', + brightGreen: '#5af78e', + yellow: '#f3f99d', + brightYellow: '#f3f99d', + blue: '#57c7ff', + brightBlue: '#57c7ff', + magenta: '#ff6ac1', + brightMagenta: '#ff6ac1', + cyan: '#9aedfe', + brightCyan: '#9aedfe', + white: '#f1f1f0', + brightWhite: '#eff0eb' + }; const term = new Terminal({ - fontFamily:`'Fira Code', monospace`, - fontSize:12, - theme:baseTheme, + fontFamily: `'Fira Code', monospace`, + fontSize: 12, + theme: baseTheme, + convertEol: true, }); term.open(document.getElementById('terminal_view')); term.resize(120, 36); const weblinksAddon = new WebLinksAddon.WebLinksAddon(); - term.loadAddon(weblinksAddon) + term.loadAddon(weblinksAddon); // fit the xterm viewpoint to parent element const fitAddon = new FitAddon.FitAddon(); term.loadAddon(fitAddon); fitAddon.fit(); - + // create the websocket and connect to the server - const ws_uri = "ws://" + window.location.host + "/ws" - const socket = new WebSocket(ws_uri) - console.log("Attempting to connect to" + ws_uri); - const attachAddon = new AttachAddon.AttachAddon(socket) + const ws_uri = "ws://" + window.location.host + "/ws"; + const socket = new WebSocket(ws_uri); + const attachAddon = new AttachAddon.AttachAddon(socket); term.loadAddon(attachAddon); return term; -} +} \ No newline at end of file diff --git a/main.go b/main.go index 64a3bb5..f204fbe 100644 --- a/main.go +++ b/main.go @@ -2,9 +2,10 @@ package main import ( "fmt" - "strings" "net/http" "net/url" + "strings" + "github.com/gin-gonic/gin" "github.com/gorilla/websocket" ) @@ -12,11 +13,11 @@ import ( var host *string = nil var upgrader = websocket.Upgrader{ - ReadBufferSize : 4096, + ReadBufferSize: 4096, WriteBufferSize: 4096, CheckOrigin: func(r *http.Request) bool { org := r.Header.Get("Origin") - h,err := url.Parse(org) + h, err := url.Parse(org) if err != nil { return false @@ -32,9 +33,9 @@ var upgrader = websocket.Upgrader{ // handle websockets func wsHandler(w http.ResponseWriter, r *http.Request) { - conn, err := upgrader.Upgrade(w,r, nil) + conn, err := upgrader.Upgrade(w, r, nil) - if err!= nil { + if err != nil { fmt.Println(err) return } @@ -44,12 +45,12 @@ func wsHandler(w http.ResponseWriter, r *http.Request) { for { msgType, p, err := conn.ReadMessage() - if err!= nil { + if err != nil { fmt.Println(err) return } - if err := conn.WriteMessage(msgType, p); err!= nil { + if err := conn.WriteMessage(msgType, p); err != nil { fmt.Println(err) return } @@ -57,7 +58,7 @@ func wsHandler(w http.ResponseWriter, r *http.Request) { } // return files -func fileHandler (c *gin.Context, fname string) { +func fileHandler(c *gin.Context, fname string) { // if the URL has no fname, c.Param returns "/" if fname == "/" { fname = "/index.html" @@ -76,18 +77,18 @@ func fileHandler (c *gin.Context, fname string) { } } -func main () { +func main() { rt := gin.Default() rt.SetTrustedProxies(nil) rt.LoadHTMLGlob("assets/*.html") - rt.GET("/*fname", func(c *gin.Context){ + rt.GET("/*fname", func(c *gin.Context) { fname := c.Param("fname") // ws is a special case to create a new websocket switch fname { - case "/ws": + case "/ws": wsHandler(c.Writer, c.Request) default: fileHandler(c, fname) @@ -95,4 +96,4 @@ func main () { }) rt.Run(":8080") -} \ No newline at end of file +}