https://dylanchiang-dev.github.io/en/tags/websocket/WebSocketHugo Blox Builder (https://hugoblox.com)en-USSat, 03 Oct 2026 00:00:00 +0000https://dylanchiang-dev.github.io/media/icon_hu_982c5d63a71b2961.pnghttps://dylanchiang-dev.github.io/en/tags/websocket/https://dylanchiang-dev.github.io/en/project/shellmate/Sat, 03 Oct 2026 00:00:00 +0000https://dylanchiang-dev.github.io/en/project/shellmate/<p>ShellMate is a Web SSH workbench I developed for managing multiple hosts. It brings host settings, interactive terminals, and reusable commands into a deployable single-machine prototype.</p> <h2 id="my-work">My work</h2> <ul> <li><strong>Live terminal integration</strong>: Connected React, TypeScript, and xterm.js to Node.js/ssh2 through bidirectional WebSocket communication.</li> <li><strong>Hosts and tabs</strong>: Implemented host editing, grouping, and terminal-tab switching.</li> <li><strong>Command snippets</strong>: Organized reusable commands into groups and sent them to the active terminal.</li> <li><strong>Basic access controls</strong>: Integrated login, JWT API authentication, password hashing, and encrypted host-password storage.</li> <li><strong>Backend structure</strong>: Separated authentication, host data, snippets, SSH sessions, and WebSocket handlers, with clearer connection errors.</li> <li><strong>Deployment tradeoffs</strong>: Supplied Docker/Compose deployment and lightweight JSON storage without claiming large-scale multi-user capability.</li> </ul> <h2 id="architecture">Architecture</h2> <figure><img src="https://dylanchiang-dev.github.io/project/shellmate/architecture.png" alt="ShellMate host management, terminal interaction, WebSocket backend, and SSH connections."><figcaption> <p>A conceptual diagram containing no real hosts, addresses, accounts, or credentials. It does not expose a live SSH service.</p> </figcaption> </figure> <h2 id="scope">Scope</h2> <p>This project demonstrates frontend, realtime communication, backend, and deployment integration. Basic safeguards are not independent security certification; finer permissions and scalable multi-user storage remain extension areas.</p> <p> </p>