title: “Writing a Welcome Message in xterm.js” tags:

• WebShell slug: 944b8316 date: 2024-03-29 09:41:29 summary: “How to write a welcome message in an xterm.js terminal: server and client setup for a better connection experience.”

Terminals often display a welcome message on login. How do you change it? While building a WebShell recently, I considered how to implement this.

Server‑side configuration

The most direct way is server configuration — for example, add echo 'hello world' to bashrc so it prints after WebShell login.

Server‑side drawbacks:

1. Adding a welcome line affects all terminal logins, not just WebShell.
2. It requires modifying server config (e.g., editing bashrc), which is heavier.

xterm.js client‑side approach

Alternatively, implement it on the client with xterm.js. After the terminal connects, run:

term.write("\x1B[34;43mmy github is https://github.com/alanhe421 my github is https://github.com/alanhe421 my github is https://github.com/alanhe421 my github is https://github.com/alanhe421\x1B[0m"

              + '\r\n', () => {
            webshell.sendData('resize', {
              rows: term.rows,
              cols: term.cols,
            });
          });

Explanation:

1. term.write writes directly to the terminal emulator; it is not echoed back from the server.
2. Since the server didn’t send this content, it doesn’t know the terminal size. Send rows/cols to avoid misaligned output in subsequent interactions.