iT邦幫忙

2025 iThome 鐵人賽

DAY 17
0

今天仍就是不願放棄將Terminal.Gui顯示在xterm裡。和agent再度討論後,終於將pty那層處理好,而神奇的是一但那層處理妥當,Terminal.Gui就能順利的在xterm裡呈現出來。並在成功能後詢問整個流程,將其記錄下來,日後做調整也比較清楚

⏺ This document describes a system that runs .NET Terminal.Gui applications in web browsers. Here's how it works:

  Core Concept

  Terminal.Gui is a console UI framework that normally runs in terminals. This project makes it run in browsers by creating a "pipeline" of
  components.

  The Pipeline

  Terminal.Gui App → PTY → Node.js Server → WebSocket → Browser (xterm.js)

  1. Terminal.Gui Application (.NET)

  - A standard console app using Terminal.Gui v2
  - Has buttons, text fields, menus - typical UI components
  - Outputs ANSI escape sequences (terminal formatting codes like colors, cursor positioning)
  - Located in: projects/dotnet/console-dungeon/

  2. PTY (Pseudo-Terminal)

  - Created by node-pty library
  - Tricks the Terminal.Gui app into thinking it's running in a real terminal
  - Captures all terminal output (ANSI codes, text) as binary data
  - Forwards keyboard/mouse input back to the app
  - Sets environment variables: TERM=xterm-256color, COLORTERM=truecolor

  3. Node.js Server

  - Runs on port 4041
  - Spawns the .NET app inside a PTY using: /bin/bash -lc "dotnet run"
  - Manages WebSocket connections from browsers
  - Takes PTY output and streams it to browser
  - Takes browser input (keystrokes, mouse) and sends to PTY
  - Located in: projects/nodejs/pty-service/server.js

  4. WebSocket

  - Real-time bidirectional communication protocol
  - Binary mode for terminal output (raw ANSI bytes)
  - Text mode for control messages (like terminal resize)

  5. Browser (xterm.js)

  - xterm.js is a terminal emulator written in JavaScript
  - Interprets ANSI escape sequences and renders them visually
  - Captures keyboard/mouse events and sends to server
  - Located in: projects/nodejs/sites/docs/src/components/XTerm.astro

而接下來要解決的部份則是在於mouse click的接受,以及可以在xterm裡可以播放audio(還不確定這是否可行)。而另一個要加入的則是能夠利用asciinema進行Terminal.Gui的行為、操控的錄製。

https://ithelp.ithome.com.tw/upload/images/20250930/20107519ikAVxCtCcR.png

而在確定Terminal.Gui可以正式在網頁上呈現後,又回去console app端進行調整。主要是將架構部份再和agent進行討論。看之前想到的架構是否能調整成適合這專案使用的設計,和agent來回溝通很多次,終於又有一個比較完整但重新開始的架構。再度利用micro issue的方式讓GitHub coding agent協助重整架構後的實現,等完成後再和現有的Terminal.Gui做銜接。


上一篇
Last attempt to get onto web
下一篇
Keep rolling
系列文
Before AI dominate the world, AI dominate my world21
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言