vue+go实现web端连接Linux终端

作者：人工智能uu | 2024-06-29 01:20:19

踩

实现效果

在这里插入图片描述

实现逻辑1——vue

依赖包

"xterm": "^5.3.0",
    "xterm-addon-attach": "^0.9.0",
    "xterm-addon-fit": "^0.8.0"
1
2
3

样式和代码逻辑

<template>
  <a-modal
    v-model:visible="visible"
    :title="$t(`routers.dom_system_terminal`)"
    :footer="null"
    @cancel="closeWs"
    width="80%"
    destroyOnClose
  >
    <div>
      <div v-show="showForm" class="form-container">
        <a-form :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }">
          <a-form-item :label="$t('routers.table_address')" v-bind="validateInfos.server">
            <a-input
              :maxlength="60"
              v-model:value="modelRef.server"
              :placeholder="$t('routers.text_please_address')"
            />
          </a-form-item>
          <a-form-item :label="$t('routers.dom_username')" v-bind="validateInfos.user">
            <a-input
              :maxlength="60"
              v-model:value="modelRef.user"
              :placeholder="$t('routers.text_username')"
            />
          </a-form-item>
          <a-form-item :label="$t('routers.dom_pass')" v-bind="validateInfos.pwd">
            <a-input-password
              :maxlength="60"
              autocomplete="new-password"
              v-model:value="modelRef.pwd"
              :placeholder="$t('routers.text_password')"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 5, span: 15 }">
            <a-button @click="handleOk" type="primary">{{ $t("routers.dom_save") }}</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div v-show="!showForm" style="height: 400px" ref="terminal" />
    </div>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, onBeforeUnmount } from "vue";
  import "xterm/css/xterm.css";
  import { Terminal } from "xterm";
  import { FitAddon } from "xterm-addon-fit";
  import { AttachAddon } from "xterm-addon-attach";
  import { system } from "@/api";
  import { useI18n } from "vue-i18n";
  import { Form } from "ant-design-vue";
  export default defineComponent({
    name: "TermModal",
    setup() {
      const visible = ref<boolean>(false);
      const showForm = ref<boolean>(true);
      const modelRef = reactive({
        server: "",//带端口号输入
        user: "",
        pwd: "",
      });
      const { t } = useI18n();
      const rulesRef = reactive({
        server: [
          {
            required: true,
            message: t("routers.text_please_address"),
          },
        ],
        user: [
          {
            required: true,
            message: t("routers.text_username"),
          },
        ],
        pwd: [
          {
            required: true,
            message: t("routers.text_password"),
          },
        ],
      });
      const show = () => {
        visible.value = true;
      };
      const data = reactive<any>({
        term: null,
        fitAddon: null,
        socketUrl: "ws://" + window.location.host + "/ws", //这里正常应该是后端地址，但我这边前后端都是自己做的，打包以后的ip和端口相同
        socket: "",
      });
      const terminal = ref();
      const initTerm = () => {
        // 1.xterm终端初始化
        let height = document.body.clientHeight;
        let rows: number = Number((height / 15).toFixed(0)); //18是字体高度,根据需要自己修改
        data.term = new Terminal({
          rows: rows,
        });
        // 2.webSocket初始化
        data.socket = new WebSocket(data.socketUrl); // 带 token 发起连接
        // 链接成功后
        // 3.websocket集成的插件,这里要注意,网上写了很多websocket相关代码.xterm4版本没必要.
        const attachAddon = new AttachAddon(data.socket);
        data.fitAddon = new FitAddon(); // 全屏插件
        attachAddon.activate(data.term);
        data.fitAddon.activate(data.term);
        data.term.open(terminal.value);
        setTimeout(() => {
          data.fitAddon.fit();
        }, 5);

        data.term.focus();

        data.socket.onclose = () => {
          //网络波动，ws连接断开
          data.term && data.term.dispose();
          showForm.value = true;
          console.log("close socket");
        };
        data.socket.onmessage = (res: any) => {
          //ssh连接失败返回
          if (res && res.data && res.data.indexOf("失败") !== -1)
            setTimeout(() => {
              closeWs();
            }, 3000);
        };
        window.addEventListener("resize", windowChange);
      };
      onBeforeUnmount(() => {
        closeWs();
      });
      const windowChange = () => {
        data.fitAddon.fit();
        data.term.scrollToBottom();
      };
      const closeWs = () => {
        resetFields();
        data.socket && data.socket.close();
        data.term && data.term.dispose();
        window.removeEventListener("resize", windowChange);
        showForm.value = true;
      };
      const useForm = Form.useForm;
      const { validate, validateInfos, resetFields } = useForm(modelRef, rulesRef);

      const handleOk = () => {
        validate()
          .then(() => {
            system
              .wsInfo({ server: modelRef.server, user: modelRef.user, pwd: modelRef.pwd })
              .then(() => {
                showForm.value = false;//连接ws，隐藏表单页
              })
              .catch((err: any) => {
                console.log("error", err);
              })
              .finally(() => {
                initTerm();
              });
          })
          .catch((err: any) => {
            console.log("error", err);
          });
      };
      return {
        show,
        visible,
        terminal,
        closeWs,
        validateInfos,
        modelRef,
        resetFields,
        showForm,
        handleOk,
      };
    },
  });
</script>

<style lang="less">
  .xterm-screen {
    height: 100%;
  }
</style>
<style lang="less" scoped>
  .form-container {
    background-color: black;
    padding: 66px 12px 60px 12px;
    ::v-deep(.ant-form-item-label > label) {
      color: white;
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

实现逻辑2——go

采用的是goframe框架
依赖包：

github.com/gogf/gf/v2 v2.5.4
github.com/gorilla/websocket v1.5.0 // indirect
1
2

main：

package main

import (
	"foxess.ems/router"
	"github.com/gogf/gf/v2/frame/g"
)
func main() {
	s := g.Server()
	router.Bind(s)
	s.Run()
}
1
2
3
4
5
6
7
8
9
10
11

router：

package router
func Bind(s *ghttp.Server) {
	s.Group("/", run)
}
func run(g *ghttp.RouterGroup) {
	g.GET("/system/ws/info", system.WsInfo)
	g.GET("/ws", system.ConnectWs)
}
1
2
3
4
5
6
7
8

system：

package system
import (
	"fmt"
	"foxess.ems/app/def"
	"github.com/gogf/gf/v2/net/ghttp"
	"github.com/gorilla/websocket"
	"net/http"
)
var wsInfo = &def.ConnectWsArg{}
func WsInfo(r *ghttp.Request) {
	res := &def.Response{}
	args := &def.ConnectWsArg{}
	if e := r.Parse(args); e != nil {
		res.Errno = 40000
	} else {
		wsInfo = args
		res.Result = &UploadResultParam{
			Access: 1,
		}
	}
	r.Response.WriteJson(res)
}
func ConnectWs(r *ghttp.Request) {
	var upGrader = websocket.Upgrader{
		ReadBufferSize:  1024,
		WriteBufferSize: 1024,
		CheckOrigin: func(r *http.Request) bool {
			return true
		},
	}
	ws, err := upGrader.Upgrade(r.Response.Writer, r.Request, nil)
	if err != nil {
		fmt.Println(err)
	}
	//延迟关闭ws连接
	defer ws.Close()
	def.SshBridgeHandler(ws, wsInfo)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

ws文件

package def

import (
	"bytes"
	"fmt"
	"github.com/gorilla/websocket"
	"golang.org/x/crypto/ssh"
	"io"
	"log"
	"sync"
	"time"
)

type wsBufferWriter struct {
	buffer bytes.Buffer
	mu     sync.Mutex
}
type XtermService struct {
	stdinPipe   io.WriteCloser
	comboOutput *wsBufferWriter
	session     *ssh.Session
	wsConn      *websocket.Conn
}

// wsBufferWriter接口实现
func (w *wsBufferWriter) Write(p []byte) (n int, err error) {
	w.mu.Lock()
	defer w.mu.Unlock()
	return w.buffer.Write(p)
}

func (w *wsBufferWriter) Bytes() []byte {
	w.mu.Lock()
	defer w.mu.Unlock()
	return w.buffer.Bytes()
}

func (w *wsBufferWriter) Reset() {
	w.mu.Lock()
	defer w.mu.Unlock()
	w.buffer.Reset()
}

type ConnectWsArg struct {
	Server string `json:"server"`
	User   string `json:"user"`
	Pwd    string `json:"pwd"`
}

func SshBridgeHandler(ws *websocket.Conn, args *ConnectWsArg) {
	// 创建 SSH 连接
	config := &ssh.ClientConfig{
		User: args.User,
		Auth: []ssh.AuthMethod{
			ssh.Password(args.Pwd),
		},
		HostKeyCallback: ssh.InsecureIgnoreHostKey(), // 注意：这会忽略对远程主机密钥的检查，不建议在生产环境中使用
	}

	client, err := ssh.Dial("tcp", args.Server, config)
	if err != nil {
		fmt.Println("Failed to dial: ", err)
		err := ws.WriteMessage(websocket.TextMessage, []byte("\n第一步:ssh连接失败"+err.Error()))
		if err != nil {
			return
		}
		return
	}
	defer client.Close()

	// 从SSH连接接收数据并发送到WebSocket

	session, err := client.NewSession()
	if err != nil {
		err := ws.WriteMessage(websocket.TextMessage, []byte("\n第二步:ssh创建会话失败"+err.Error()))
		if err != nil {
			return
		}
		return
	}
	stdin, err := session.StdinPipe()
	if err != nil {
		log.Println(err)
		return
	}
	defer stdin.Close()
	wsBuffer := new(wsBufferWriter)
	session.Stdout = wsBuffer
	session.Stderr = wsBuffer
	modes := ssh.TerminalModes{
		ssh.ECHO:          1,
		ssh.TTY_OP_ISPEED: 14400,
		ssh.TTY_OP_OSPEED: 14400,
	}
	//伪造xterm终端
	err = session.RequestPty("xterm", 100, 100, modes)
	if err != nil {
		err := ws.WriteMessage(websocket.TextMessage, []byte("第三步:会话伪造终端失败"+err.Error()))
		if err != nil {
			return
		}
		return
	}
	err = session.Shell()
	if err != nil {
		err := ws.WriteMessage(websocket.TextMessage, []byte("第四步:启动shell终端失败"+err.Error()))
		if err != nil {
			return
		}
		return
	}
	var xterm = &XtermService{
		stdinPipe:   stdin,
		comboOutput: wsBuffer,
		session:     session,
		wsConn:      ws,
	}
	//defer session.Close()
	quitChan := make(chan bool, 3)
	//4.以上初始化信息基本结束.下面是携程读写websocket和ssh管道的操作.也就是信息通信
	xterm.start(quitChan)
	//session 等待
	go xterm.Wait(quitChan)
	<-quitChan
	_, message, err := ws.ReadMessage()
	_, err = stdin.Write(message)
	if err != nil {
		log.Println(err)
		return
	}
	fmt.Println(string(message))
	output, err := session.CombinedOutput(string(message))
	err = ws.WriteMessage(websocket.TextMessage, output)
	if err != nil {
		return
	}

}

func (s *XtermService) start(quitChan chan bool) {
	go s.receiveWsMsg(quitChan)
	go s.sendWsOutput(quitChan)
}

// 将客户端信息返回到
func (s *XtermService) sendWsOutput(quitChan chan bool) {
	wsConn := s.wsConn
	defer setQuit(quitChan)
	ticker := time.NewTicker(time.Millisecond * time.Duration(60))
	defer ticker.Stop()
	for {
		select {
		case <-ticker.C:
			if s.comboOutput == nil {
				return
			}
			bytes := s.comboOutput.Bytes()
			if len(bytes) > 0 {
				wsConn.WriteMessage(websocket.TextMessage, bytes)
				s.comboOutput.buffer.Reset()
			}
		case <-quitChan:
			return
		}

	}
}

// 读取ws信息写入ssh客户端中.
func (s *XtermService) receiveWsMsg(quitChan chan bool) {
	wsConn := s.wsConn
	defer setQuit(quitChan) //告诉其他携程退出
	for {
		select {
		case <-quitChan:
			return
		default:
			//1.websocket 读取信息
			_, data, err := wsConn.ReadMessage()
			fmt.Println("===readMessage===", string(data))
			if err != nil {
				fmt.Println("receiveWsMsg=>读取ws信息失败", err)
				return
			}
			//2.读取到的数据写入ssh 管道内.
			s.stdinPipe.Write(data)
		}
	}
}

func (s *XtermService) Wait(quitChan chan bool) {
	if err := s.session.Wait(); err != nil {
		setQuit(quitChan)
	}
}

func setQuit(quitChan chan bool) {
	quitChan <- true
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/767921