增加录屏回放demo

pkg/api/recording.go

@@ -0,0 +1,93 @@
+package api
+
+import (
+	"encoding/json"
+	"next-terminal/pkg/utils"
+	"os"
+	"time"
+)
+
+type Env struct {
+	Shell string `json:"SHELL"`
+	Term  string `json:"TERM"`
+}
+
+type Header struct {
+	Title     string `json:"title"`
+	Version   int    `json:"version"`
+	Height    int    `json:"height"`
+	Width     int    `json:"width"`
+	Env       Env    `json:"env"`
+	Timestamp int    `json:"timestamp"`
+}
+
+type Recorder struct {
+	file      *os.File
+	timestamp int
+}
+
+func NewRecorder(filename string) (recorder *Recorder, err error) {
+	recorder = &Recorder{}
+
+	if utils.FileExists(filename) {
+		if err := os.RemoveAll(filename); err != nil {
+			return nil, err
+		}
+	}
+	var file *os.File
+	file, err = os.Create(filename)
+	if err != nil {
+		return nil, err
+	}
+
+	recorder.file = file
+	return recorder, nil
+}
+
+func (recorder *Recorder) Close() {
+	if recorder.file != nil {
+		recorder.file.Close()
+	}
+}
+
+func (recorder *Recorder) WriteHeader(header *Header) (err error) {
+	var p []byte
+
+	if p, err = json.Marshal(header); err != nil {
+		return
+	}
+
+	if _, err := recorder.file.Write(p); err != nil {
+		return err
+	}
+	if _, err := recorder.file.Write([]byte("\n")); err != nil {
+		return err
+	}
+
+	recorder.timestamp = header.Timestamp
+
+	return
+}
+
+func (recorder *Recorder) WriteData(data string) (err error) {
+	now := int(time.Now().UnixNano())
+
+	delta := float64(now-recorder.timestamp*1000*1000*1000) / 1000 / 1000 / 1000
+
+	row := make([]interface{}, 0)
+	row = append(row, delta)
+	row = append(row, "o")
+	row = append(row, data)
+
+	var s []byte
+	if s, err = json.Marshal(row); err != nil {
+		return
+	}
+	if _, err := recorder.file.Write(s); err != nil {
+		return err
+	}
+	if _, err := recorder.file.Write([]byte("\n")); err != nil {
+		return err
+	}
+	return
+}

pkg/api/ssh.go

@@ -142,6 +142,24 @@ func SSHEndpoint(c echo.Context) error {
 	}
 	_ = WriteMessage(ws, msg)
 
+	recorder, err := NewRecorder("./" + assetId + ".cast")
+	if err != nil {
+		return err
+	}
+
+	header := &Header{
+		Title:     "test",
+		Version:   2,
+		Height:    height,
+		Width:     width,
+		Env:       Env{Shell: "/bin/bash", Term: "xterm-256color"},
+		Timestamp: int(time.Now().Unix()),
+	}
+
+	if err := recorder.WriteHeader(header); err != nil {
+		return err
+	}
+
 	var mut sync.Mutex
 	var active = true
 
@@ -150,6 +168,7 @@ func SSHEndpoint(c echo.Context) error {
 			mut.Lock()
 			if !active {
 				logrus.Debugf("会话: %v -> %v 关闭", sshClient.LocalAddr().String(), sshClient.RemoteAddr().String())
+				recorder.Close()
 				break
 			}
 			mut.Unlock()
@@ -159,10 +178,14 @@ func SSHEndpoint(c echo.Context) error {
 				continue
 			}
 			if n > 0 {
+				s := string(p)
 				msg := Message{
 					Type:    Data,
-					Content: string(p),
+					Content: s,
 				}
+				// 录屏
+				_ = recorder.WriteData(s)
+
 				message, err := json.Marshal(msg)
 				if err != nil {
 					logrus.Warnf("生成Json失败 %v", err)

web/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "next-terminal",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -17901,8 +17901,7 @@
     "xterm-addon-fit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.4.0.tgz",
-      "integrity": "sha512-p4BESuV/g2L6pZzFHpeNLLnep9mp/DkF3qrPglMiucSFtD8iJxtMufEoEJbN8LZwB4i+8PFpFvVuFrGOSpW05w==",
-      "dev": true
+      "integrity": "sha512-p4BESuV/g2L6pZzFHpeNLLnep9mp/DkF3qrPglMiucSFtD8iJxtMufEoEJbN8LZwB4i+8PFpFvVuFrGOSpW05w=="
     },
     "xterm-addon-web-links": {
       "version": "0.4.0",

web/package.json

@@ -17,8 +17,8 @@
     "react-scripts": "^4.0.0",
     "typescript": "^3.9.7",
     "xterm": "^4.9.0",
-    "xterm-addon-web-links": "^0.4.0",
-    "xterm-addon-fit": "^0.4.0"
+    "xterm-addon-fit": "^0.4.0",
+    "xterm-addon-web-links": "^0.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

web/src/components/access/AccessSSH.css

@@ -0,0 +1,22 @@
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: transparent;
+    overflow-y: scroll;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    --scrollbar-color: var(--highlight) var(--dark);
+    --scrollbar-width: thin;
+}
+
+.xterm-viewport::-webkit-scrollbar {
+    background-color: var(--dark);
+    width: 5px;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb {
+    background: var(--highlight);
+}

web/src/components/access/AccessSSH.js

@@ -6,6 +6,7 @@ import {wsServer} from "../../common/constants";
 import "./Console.css"
 import {getToken} from "../../utils/utils";
 import {FitAddon} from 'xterm-addon-fit';
+import "./Access.css"
 
 class AccessSSH extends Component {
 
@@ -33,10 +34,10 @@ class AccessSSH extends Component {
         let term = new Terminal({
             fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
             fontSize: 14,
-            theme: {
-                background: '#1b1b1b',
-                lineHeight: 17
-            },
+            // theme: {
+            //     background: '#1b1b1b',
+            //     lineHeight: 17
+            // },
             rightClickSelectsWord: true,
         });
 

web/src/components/session/asciinema.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" type="text/css" href="asciinema-player.css"/>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+<asciinema-player src="./903dfd65-838c-453f-9866-eadd5725321b.cast"></asciinema-player>
+<script src="asciinema-player.js"></script>
+</body>
+
+</html>