From 38cad37fcd0a7132a163711073f1d701ce7d646f Mon Sep 17 00:00:00 2001 From: Shuanglei Tao Date: Fri, 24 May 2019 20:40:59 +0800 Subject: [PATCH] html: convert numeric value to enum --- html/js/app.ts | 88 +++++++++++++++++++++++++++----------------------- src/index.html | 4 +-- 2 files changed, 50 insertions(+), 42 deletions(-) diff --git a/html/js/app.ts b/html/js/app.ts index d74ca8a..b636477 100644 --- a/html/js/app.ts +++ b/html/js/app.ts @@ -1,6 +1,6 @@ import '../sass/app.scss'; -import { Terminal, ITerminalOptions, IDisposable } from 'xterm'; +import { Terminal, ITerminalOptions, ITheme } from 'xterm'; import * as fit from 'xterm/lib/addons/fit/fit'; import * as Zmodem from 'zmodem.js/src/zmodem_browser'; @@ -10,9 +10,18 @@ import { Modal } from './zmodem'; Terminal.applyAddon(fit); Terminal.applyAddon(overlay); +const enum TtydCommand { + // server side + OUTPUT = '0', + SET_WINDOW_TITLE = '1', + SET_PREFERENCES = '2', + SET_RECONNECT = '3', + // client side + INPUT = '0', + RESIZE_TERMINAL = '1' +} + interface ITtydTerminal extends Terminal { - resizeDisposable: IDisposable; - dataDisposable: IDisposable; reconnectTimeout: number; showOverlay(msg: string, timeout?: number): void; @@ -33,6 +42,31 @@ const wsPath = window.location.pathname.endsWith('/') ? 'ws' : '/ws'; const url = [protocol, window.location.host, window.location.pathname, wsPath, window.location.search].join(''); const textDecoder = new TextDecoder(); const textEncoder = new TextEncoder(); +const termOptions = { + fontSize: 13, + fontFamily: '"Menlo for Powerline", Menlo, Consolas, "Liberation Mono", Courier, monospace', + theme: { + foreground: '#d2d2d2', + background: '#2b2b2b', + cursor: '#adadad', + black: '#000000', + red: '#d81e00', + green: '#5ea702', + yellow: '#cfae00', + blue: '#427ab3', + magenta: '#89658e', + cyan: '#00a7aa', + white: '#dbded8', + brightBlack: '#686a66', + brightRed: '#f54235', + brightGreen: '#99e343', + brightYellow: '#fdeb61', + brightBlue: '#84b0d8', + brightMagenta: '#bc94b7', + brightCyan: '#37e6e8', + brightWhite: '#f1f1f0' + } as ITheme +} as ITerminalOptions; const authToken = (typeof window.tty_auth_token !== 'undefined') ? window.tty_auth_token : null; let autoReconnect = -1; @@ -72,7 +106,7 @@ const openWs = function(): void { while (octets.length) { const chunk = octets.splice(0, 4095); const buffer = new Uint8Array(chunk.length + 1); - buffer[0] = '0'.charCodeAt(0); + buffer[0] = TtydCommand.INPUT.charCodeAt(0); buffer.set(chunk, 1); ws.send(buffer); } @@ -106,35 +140,11 @@ const openWs = function(): void { // expose term handle for some programatic cases // which need to get the content of the terminal - term = window.term = new Terminal({ - fontSize: 13, - fontFamily: '"Menlo for Powerline", Menlo, Consolas, "Liberation Mono", Courier, monospace', - theme: { - foreground: '#d2d2d2', - background: '#2b2b2b', - cursor: '#adadad', - black: '#000000', - red: '#d81e00', - green: '#5ea702', - yellow: '#cfae00', - blue: '#427ab3', - magenta: '#89658e', - cyan: '#00a7aa', - white: '#dbded8', - brightBlack: '#686a66', - brightRed: '#f54235', - brightGreen: '#99e343', - brightYellow: '#fdeb61', - brightBlue: '#84b0d8', - brightMagenta: '#bc94b7', - brightCyan: '#37e6e8', - brightWhite: '#f1f1f0' - } - } as ITerminalOptions); + term = window.term = new Terminal(termOptions); - term.resizeDisposable = term.onResize((size: {cols: number, rows: number}) => { + term.onResize((size: {cols: number, rows: number}) => { if (ws.readyState === WebSocket.OPEN) { - sendMessage('1' + JSON.stringify({columns: size.cols, rows: size.rows})); + sendMessage(TtydCommand.RESIZE_TERMINAL + JSON.stringify({columns: size.cols, rows: size.rows})); } setTimeout(() => term.showOverlay(size.cols + 'x' + size.rows), 500); }); @@ -145,7 +155,7 @@ const openWs = function(): void { } }); - term.dataDisposable = term.onData((data: string) => sendMessage('0' + data)); + term.onData((data: string) => sendMessage(TtydCommand.INPUT + data)); while (terminalContainer.firstChild) { terminalContainer.removeChild(terminalContainer.firstChild); @@ -168,7 +178,7 @@ const openWs = function(): void { const cmd = String.fromCharCode(rawData[0]); const data = rawData.slice(1).buffer; switch (cmd) { - case '0': + case TtydCommand.OUTPUT: try { zsentry.consume(data); } catch (e) { @@ -176,18 +186,18 @@ const openWs = function(): void { resetTerm(); } break; - case '1': + case TtydCommand.SET_WINDOW_TITLE: title = textDecoder.decode(data); document.title = title; break; - case '2': + case TtydCommand.SET_PREFERENCES: const preferences = JSON.parse(textDecoder.decode(data)); Object.keys(preferences).forEach((key) => { console.log('[ttyd] xterm option: ' + key + '=' + preferences[key]); term.setOption(key, preferences[key]); }); break; - case '3': + case TtydCommand.SET_RECONNECT: autoReconnect = JSON.parse(textDecoder.decode(data)); console.log('[ttyd] reconnect: ' + autoReconnect + ' seconds'); break; @@ -201,16 +211,14 @@ const openWs = function(): void { console.log('[ttyd] websocket closed, code: ' + event.code); modal.hide(); if (term) { - term.resizeDisposable.dispose(); - term.dataDisposable.dispose(); if (!wsError) { term.showOverlay('Connection Closed', null); } } window.removeEventListener('beforeunload', unloadCallback); - // 1008: POLICY_VIOLATION - Auth failure + // 1008: POLICY_VIOLATION - Auth failure if (event.code === 1008) { - location.reload(); + window.location.reload(); } // 1000: CLOSE_NORMAL if (event.code !== 1000 && autoReconnect > 0) { diff --git a/src/index.html b/src/index.html index f3dcb0e..0a48de6 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,3 @@ ttyd - Terminal
\ No newline at end of file +/*# sourceMappingURL=app.8ffe4ace5a65d81688f7.css.map */
\ No newline at end of file -- 2.43.4