fix bug

html/src/components/terminal/index.tsx

@@ -61,9 +61,10 @@ export class Terminal extends Component<Props, State> {
                 if (data.status !== '-1') {
                     if (options.get('type') === 'docker') {
                         this.xterm.open(this.container);
+                        this.xterm.changeContainerStatus(data.status);
                         this.xterm.connect();
                     } else {
-                        this.intervalID = setInterval(this.loadOutput, 3000);
+                        this.intervalID = setInterval(this.loadOutput, 8000);
                         this.xterm.open(this.container);
                         this.xterm.changeUrl(this.currentDevcontainer.ip, this.currentDevcontainer.port)
                         this.xterm.changeStatus(true);

html/src/components/terminal/xterm/index.ts

@@ -103,10 +103,12 @@ export class Xterm {
     private closeOnDisconnect = false;
     private intervalID: NodeJS.Timeout;
     private writeFunc = (data: ArrayBuffer) => this.writeData(new Uint8Array(data));
-    private status = false;
-    private titleStatus = false;
-    private checkStatus = false;
     private connectStatus = false;
+    private hostTitle = "";
+    private postAttachCommand = [];
+    private postAttachCommandStatus = false;
+    private workdir = "";
+    private containerStatus = "";
     private beforeCommand?: string;
     constructor(
         private options: XtermOptions,
@@ -186,7 +188,7 @@ export class Xterm {
         register(
             terminal.onData(data =>
             {
-                if (this.status) {
+                if (this.connectStatus) {
                     sendData(data);
                 } else {
                     this.writeData('\b \b');
@@ -266,7 +268,7 @@ export class Xterm {
 
     @bind
     public changeStatus(v: boolean){
-        this.status = v;
+        this.connectStatus = v;
     }
 
     @bind
@@ -281,7 +283,11 @@ export class Xterm {
         register(addEventListener(socket, 'error', () => (this.doReconnect = false)));
         const options = new URLSearchParams(decodeURIComponent(window.location.search));
         if (options.get('type') === 'docker') {
-            this.intervalID = setInterval(this.loadCommand, 3000);
+            if(this.containerStatus === '4' || this.containerStatus === '-1'){
+                this.intervalID = setInterval(this.loadCommand, 1000);
+            }else{
+                this.intervalID = setInterval(this.loadCommand, 8000);
+            }
         }
     }
 
@@ -352,26 +358,23 @@ export class Xterm {
         )
             .then(response => response.json())
             .then(data => {
+                if (this.workdir === ''){
+                    this.workdir = data.workdir;
+                }
                 if (data.status !== '4' && data.status !== '0') {
-                    this.sendData(data.command);
+                    if(this.containerStatus !== data.status){
+                        this.sendData(data.command);
+                    }
+                    this.containerStatus = data.status;
                 } else {
-                    clearInterval(this.intervalID);
+                    if(this.containerStatus !== '4'){
+                        this.writeData("\x1b[31mCreation completed. Please refresh the page to connect to the devcontainer\x1b[0m");
+                    }
+                    this.containerStatus = data.status;
                     if (data.status === '4') {
-                        fetch(
-                            'http://' + options.get('domain') + ':'+ options.get('port') +'/' +
-                                options.get('user') +
-                                '/' +
-                                options.get('repo') +
-                                '/devcontainer/command?' +
-                                params
-                        )
-                            .then(response => response.json())
-                            .then(data => {
-                                this.sendData(data.command);
-                            })
-                            .catch(error => {
-                                console.error('Error:', error);
-                            });
+                        const parts = data.command.split('\n');
+                        this.sendData(parts[0]+"\n");
+                        this.postAttachCommand = parts;
                     }
                 }
             })
@@ -379,7 +382,10 @@ export class Xterm {
                 console.error('Error:', error);
             });
     }
-
+    @bind
+    public changeContainerStatus(v: string){
+        this.containerStatus = v;
+    }
     @bind
     private parseOptsFromUrlQuery(query: string): Preferences {
         const { terminal } = this;
@@ -422,43 +428,43 @@ export class Xterm {
         const data = rawData.slice(1);
         switch (cmd) {
             case Command.OUTPUT:
+                console.log('[ttyd] output:', textDecoder.decode(data));
                 const options = new URLSearchParams(decodeURIComponent(window.location.search));
+                const params = new URLSearchParams({
+                    repo: options.get('repoid') as string,
+                    user: options.get('userid') as string,
+                });
                 if (options.get('type') === 'docker') {
+                    // 保存host的标题
+                    if (this.hostTitle === ""){
+                        this.hostTitle = textDecoder.decode(data).replace(/\s/g, '');
+                    }
+                    // 检测是否退出devcontainer，标题等于host的标题
+                    if (this.connectStatus && textDecoder.decode(data).replace(/\s/g, '').includes(this.hostTitle)){
+                        this.connectStatus = false
+                    }
+                    // this.connectStatus = true 连接完成
                     if (
-                        this.status === false &&
-                        textDecoder.decode(data).replace(/\s/g, '').includes('Successfully connected to the container'.replace(/\s/g, ''))
+                        this.connectStatus === false &&
+                        textDecoder.decode(data).replace(/\s/g, '').includes('Successfully connected to the devcontainer'.replace(/\s/g, ''))
                     ) {
-                        if(this.connectStatus == true){
-                            this.status = true;
-                        }
                         this.connectStatus = true;
+                        clearInterval(this.intervalID);
                     }
-                    if (this.checkStatus) {
-                        if (textDecoder.decode(data).replace(/\s/g, '').includes('You have out the container. Please refresh the terminal to reconnect.'.replace(/\s/g, ''))) {
-                            this.checkStatus = false;
-                            this.status = false;
-                            this.connectStatus = false;
-                        }
-                        if(textDecoder.decode(data).includes('\x1b')){
-                            this.checkStatus = false;
-                        }
-                    }
-                    if (this.titleStatus && textDecoder.decode(data).includes('\x1b')) {
-                        this.titleStatus = false;
-                        this.checkStatus = true;
-                        this.sendData(
-                            `echo $WEB_TERMINAL\n`
-                        );
-                    }
+                    // 连接完成之前，不输出标题和docker命令
                     if ( 
-                        !(this.status === false && (textDecoder.decode(data).includes('\x1b') || textDecoder.decode(data).replace(/\s/g, '').includes('docker'))) &&
-                        this.titleStatus !== true &&
-                        this.checkStatus !== true
+                        !(this.connectStatus === false && 
+                            (textDecoder.decode(data).includes('\x1b') || 
+                            textDecoder.decode(data).replace(/\s/g, '').includes('docker-H')))
                     ){
                         this.writeFunc(data);
                     }
-                    if (textDecoder.decode(data).replace(/\s/g, '').includes('exit')) {
-                        this.titleStatus = true;
+                    // 连接完成且出现容器的标题，且没有执行过postAttach命令
+                    if (this.connectStatus && textDecoder.decode(data).replace(/\s/g, '').includes(this.workdir) && !this.postAttachCommandStatus){
+                        for (let i = 1; i < this.postAttachCommand.length; i++){
+                            this.sendData(this.postAttachCommand[i]+"\n");
+                        }
+                        this.postAttachCommandStatus = true;
                     }
                     
                 } else {

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "ttyd",
+  "name": "webTerminal",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {}