【前端学习记录】neffos插件与控制台交互

背景

最近项目上有个需求需要用到websocket，于是就学了一下关于websocket的使用方法。不过由于后台使用的框架限制，需要前后端一起使用neffos插件，中间踩了很多的坑，这里简单记录一下。

websocket

WebSocket 是一种在客户端和服务器之间实现双向通信的协议，它允许服务器主动向客户端推送数据，而不需要客户端发起请求。与传统的 HTTP 请求不同，WebSocket 连接是长时间保持的，可以实现实时通信，用于实现实时更新、聊天、通知等功能。

在 Vue.js 中使用 WebSocket 需要以下几个步骤：

创建 WebSocket 连接： 首先，在 Vue 组件中创建一个 WebSocket 连接。你可以使用浏览器内置的 WebSocket 构造函数来创建连接。

处理连接事件： 监听 WebSocket 的连接事件，当连接建立时，可以执行一些初始化操作。

处理消息事件： 监听 WebSocket 的消息事件，当从服务器接收到消息时，可以在 Vue 组件中处理这些消息，例如更新数据或触发事件。

<template>
  <div>
    <h1>WebSocket Example</h1>
    <p>Received message: {{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: '',
      socket: null
    };
  },
  mounted() {
    // 创建 WebSocket 连接
    this.socket = new WebSocket('ws://example.com/socket');

    // 处理连接建立事件
    this.socket.onopen = event => {
      console.log('WebSocket connected', event);
    };

    // 处理消息事件
    this.socket.onmessage = event => {
      console.log('Received message:', event.data);
      this.receivedMessage = event.data;
    };

    // 处理连接关闭事件
    this.socket.onclose = event => {
      console.log('WebSocket closed', event);
    };
  },
  beforeDestroy() {
    // 在组件销毁前关闭 WebSocket 连接
    if (this.socket) {
      this.socket.close();
    }
  }
};
</script>

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

neffos

遗憾的是，后台架构需要使用neffos插件进行通信，所以又尝试了关于neffos的使用方法。由于后端使用的是java和go语言框架，前后端在通信时，遇到了连接不上的问题。为了解决这个问题，尝试了以下的方案。

前端单独起一个demo，框架是vue2，然后把写好的关于neffos的逻辑，直接连接后台的起的服务，逐步去排查是前端还是后台的问题，确定包含网关、nginx、接口在内的配置，然后再在自己项目定位问题。

关于neffos前端的demo如下：

<template>
  <div>
    <div id="terminalContainer" ref="terminalContainer" class="terminal-container"></div>
  </div>
</template>

<script>
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import 'xterm/css/xterm.css';

export default {
  name: 'HelloWorld',
  data() {
    return {
      radio: 'sh',
      socket: null, // WebSocket实例
      term: '',
      prefix: '>>>',
      inputText: '',
      socketURL: 'ws://localhost:11/ws',
    }
  },
  mounted() {
    // 等待 CDN 脚本加载完成再执行后续逻辑
    this.loadCDNScript().then(() => {
      // CDN 脚本加载完成后执行的逻辑
      // 可以在这里使用 neffos 变量
      this.initSocket();
      this.initTerm();
    });
  },
  beforeDestroy() {
    // this.socket.close();
    this.term.dispose();
  },
  methods: {
    // 加载 CDN 脚本的 Promise
    loadCDNScript() {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/neffos.js@latest/dist/neffos-es5.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    },
    async initSocket() {
      // 创建WebSocket实例
      let origin = window.location.origin.replace('http', 'ws');
      this.socketURL = `ws://10.1.1.1/ws`;
      // this.socket = new w3cwebsocket(this.socketURL);

      // 监听WebSocket事件
      // this.socket.onopen = this.onSocketOpen;
      // this.socket.onmessage = this.onSocketMessage;
      // this.socket.onclose = this.onSocketClose;
      // this.socket.onerror = this.onSocketError;
      const conn = await neffos.dial(this.socketURL, {
        default: { // "default" namespace.
          _OnNamespaceConnected: function (nsConn, msg) {
            if (nsConn.conn.wasReconnected()) {
              console.log('000000000000000000')
              // addMessage("re-connected after " + nsConn.conn.reconnectTries.toString() + " trie(s)");
            }
            console.log('11111111111111 1')
            // let inputTxt = document.getElementById("input");
            // let sendBtn = document.getElementById("sendBtn");

            // sendBtn.disabled = false;
            // sendBtn.onclick = function () {
            //   const input = inputTxt.value;
            //   inputTxt.value = "";
            //   // nsConn.emit("OnChat", input);
            //   // addMessage("Me: " + input);
            // };

            // addMessage("connected to namespace: " + msg.Namespace);
          },
          _OnNamespaceDisconnect: function (nsConn, msg) {
            console.log('2222222222222')
            // addMessage("disconnected from namespace: " + msg.Namespace);
          },
          // "OnChat" event.
          OnChat: function (nsConn, msg) {
            console.log('3333333333333333333')
            console.log(msg);

            // addMessage(msg.Body);
          },
          // "OnReceive" event.
          OnReceive: function (nsConn, msg) {
            console.log('4444444444444')
            // addMessage(msg.Body);
          },
          // OnClose: function () {
          //   console.log('error.......')
          // }
        }
      }).catch((err) => {
        console.log('555555555555555', err)
      });
      console.log('66666666')
      await conn.connect("default");
    },

    async initTerm() {
      const fitAddon = new FitAddon();
      // const attachAddon = new AttachAddon(this.socket);
      this.term = new Terminal({
        fontSize: 14,
        cursorBlink: true,
        allowProposedApi: true,
        disableStdin: false,
        LogLevel: "debug",
      });

      this.term.loadAddon(fitAddon);
      // this.term.loadAddon(attachAddon);
      // 开启Xterm终端
      this.term.open(document.getElementById('terminalContainer'));
      this.term.writeln("\x1b[1;1;32mwellcom to web terminal!\x1b[0m");
      this.term.write(this.prefix); //黑窗口 前缀

      await this.termPrompt();
      await this.termKeyCode(); //事件

      fitAddon.fit(); //黑窗口适应实际div宽高
      this.term.focus(); //自动聚焦
    },

    //事件
    termKeyCode() {
      const TERMINAL_INPUT_KEY = {
        BACK: 8, // 退格删除键
        DELETE: 46, // Delete删除键
        ENTER: 13, // 回车键
        UP: 38, // 方向盘上键
        DOWN: 40, // 方向盘下键
        LEFT: 37, // 方向盘左键
        RIGHT: 39, // 方向盘右键
      };
      let inputText = '';
      let currentIndex = 0;
      let inputTextList = [];
      this.term.onKey((e) => {
        const { key, domEvent } = e;
        const { keyCode, altKey, altGraphKey, ctrlKey, metaKey } = domEvent;

        const printAble = !(altKey || altGraphKey || ctrlKey || metaKey); // 禁止相关按键
        const totalOffsetLength = inputText.length + this.prefix.length; // 总偏移量
        let cursorX = this.term._core.buffer.x; // 当前x偏移量，即光标位置
        let cursorOffSetLength

        switch (keyCode) {
            // 退格
          case TERMINAL_INPUT_KEY.BACK:
            if (cursorX > this.prefix.length) {
              // 保留原来光标位置
              cursorOffSetLength = this.getCursorOffsetLength(totalOffsetLength - cursorX, "\x1b[D");
              // 将光标位置向左移动一个位置
              this.term._core.buffer.x = cursorX - 1;
              // 清除当前光标位置之后的文本内容
              this.term.write("\x1b[?K" + inputText.slice(cursorX - this.prefix.length));
              // 将光标移回保留的原位置
              this.term.write(cursorOffSetLength);
              // 更新输入文本，删除当前光标位置之前的字符
              inputText = `${ inputText.slice(0, cursorX - this.prefix.length - 1) }${ inputText.slice(
                  cursorX - this.prefix.length
              ) }`;
            }
            break;
            // 删除
          case TERMINAL_INPUT_KEY.DELETE:
            if (cursorX > this.prefix.length && cursorX < totalOffsetLength) {
              const cursorOffsetLength = this.getCursorOffsetLength(totalOffsetLength - cursorX -1, "\x1b[D"); // 保留原来光标位置

              this.term.write("\x1b[?K" + inputText.slice(cursorX - this.prefix.length + 1));
              this.term.write(cursorOffsetLength);
              inputText = inputText.slice(0, cursorX - this.prefix.length) + inputText.slice(cursorX - this.prefix.length + 1);
            }
            break;
            //回车
          case TERMINAL_INPUT_KEY.ENTER: {
            // 换行符
            this.term.write("\r\n");

            // 如果输入的内容为空，点击回车键则直接换行
            if (!inputText.trim()) {
              this.term.prompt();
              return;
            }

            if (inputTextList.indexOf(inputText) === -1) {
              inputTextList.push(inputText);
            }
            currentIndex = inputTextList.length - 1;
            // 处理回车键后的逻辑（例如发送输入文本到服务器）
            // this.sendInputToServer(inputText);

            this.term.prompt();
            inputText = "";
            break;
          }
            // 上箭头
          case TERMINAL_INPUT_KEY.UP: {
            if (inputTextList.length === 0) break;

            // 如果当前有内容，先清空
            if (inputText) {
              // 设置光标的位置为前缀后的位置
              this.term._core.buffer.x = this.prefix.length;
              // 清空光标之后的字符
              this.term.write("\x1b[0K");
            } else {
              currentIndex = inputTextList.length - 1;
            }
            inputText = inputTextList[currentIndex];
            this.term.write("\x1b[?K" + inputText)
            if (currentIndex >= 1) {
              currentIndex--;
            }

            break;
          }
            // 下箭头
          case TERMINAL_INPUT_KEY.DOWN: {
            if (inputTextList.length === 0 || currentIndex === -1) break;

            // 如果当前有内容，先清空
            if (inputText) {
              // 设置光标的位置为前缀后的位置
              this.term._core.buffer.x = this.prefix.length;
              // 清空光标之后的字符
              this.term.write("\x1b[0K");
            }

            if (currentIndex < inputTextList.length - 1) {
              currentIndex++;
              inputText = inputTextList[currentIndex];
            } else {
              currentIndex = -1;
              inputText = '';
            }
            // 将下一个历史输入显示在输入框中
            this.term.write("\x1b[?K" + inputText);
            break;
          }
            // 左箭头
          case TERMINAL_INPUT_KEY.LEFT:
            if (cursorX > this.prefix.length) {
              this.term.write(key); // '\x1b[D'
            }
            break;
            // 右箭头
          case TERMINAL_INPUT_KEY.RIGHT:
            if (cursorX < totalOffsetLength) {
              this.term.write(key); // '\x1b[C'
            }
            break;
          default: {
            // 在当前的坐标写上 key 和坐标后面的字符
            // 移动停留在当前位置的光标
            if (!printAble) break;
            if (totalOffsetLength >= this.term.cols) break;
            if (cursorX >= totalOffsetLength) {
              this.term.write(key);
              inputText += key;
              break;
            }
            let cursorOffSetLength = this.getCursorOffsetLength(totalOffsetLength - cursorX, "\x1b[D");
            this.term.write("\x1b[?K" + `${ key }${ inputText.slice(cursorX - this.prefix.length) }`);
            this.term.write(cursorOffSetLength);
            inputText = inputText.slice(0, cursorX) + key + inputText.slice(totalOffsetLength - cursorX);
            break;
          }
        }
      });
    },

    //限制和后端交互，只有输入回车键才显示结果
    termPrompt() {
      this.term.prompt = () => {
        this.term.write(this.prefix);
      };
    },

    //获取光标当前位置
    getCursorOffsetLength(offsetLength, subString) {
      let cursorOffsetLength = "";
      for (let offset = 0; offset < offsetLength; offset++) {
        cursorOffsetLength += subString;
      }
      return cursorOffsetLength;
    },

    // 发送输入文本到服务器
    sendInputToServer(inputText) {
      // 使用 WebSocket 发送输入文本到服务器
      if (this.socket && this.socket.readyState === 1) {
        this.socket.send(inputText);
      }
    },

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.terminal-container {
  width: 100%;
  height: calc(100% - 200px);
}
</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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316

遇到的问题及解决方案

1 neffos全局变量不生效

为了能让neffos可以作为全局变量，需要先加载完neffos的依赖才能使用。常用的就是直接使用cdn链接，用一个script脚本加载。直接使用时，代码总会报错。该方法放弃，采用上述代码中的使用方法，即：

    // 等待 CDN 脚本加载完成再执行后续逻辑
    this.loadCDNScript().then(() => {
      // CDN 脚本加载完成后执行的逻辑
      // 可以在这里使用 neffos 变量
      this.initSocket();
      this.initTerm();
    });

    // 加载 CDN 脚本的 Promise
    loadCDNScript() {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/neffos.js@latest/dist/neffos-es5.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在实际使用时， 也考虑在实际部署时的网络问题，不能直接使用cdn引入的方式，不稳定。

考虑将https://cdn.jsdelivr.net/npm/neffos.js@latest/dist/neffos-es5.js下载下来，直接给script.src，经过测试后这种方式也放弃。

npm i获得的依赖包也报错，最后成功的解决方法是，从git仓库里下载最新的代码，按照npm下来的依赖包的结构进行组装，放在非node_modules的文件夹下，即代码文件夹下，采用import引入的方式解决问题。

版本号是0.1.32

import * as neffos from './neffos';
1

这里的./neffos是自己组装的依赖包，此时可以将上述的loadCDNScript给去掉了

2 控制台效果交互问题

上述代码中实现了很多的前端在控制台中的交互逻辑，在其他的博客中，看到的逻辑都不是很全，于是自己写了一部分。也就是光标输入和websocket的交互操作。

但是真正做到最后发现，这部分操作是后台做的，前端只负责发送和接收数据即可，告诉后台自己按了哪些按键，部分代码如下：

const _this = this;
      this.conn = await neffos.dial(this.socketURL, {
        default: { // "default" namespace.
          _OnNamespaceConnected: function (nsConn, msg) {
            _this.nsConn = nsConn
            if (nsConn.conn.wasReconnected()) {
              _this.term.writeln("\x1b[1;1;32mre-connected after " + nsConn.conn.reconnectTries.toString() + " trie(s)\x1b[0m")
            }
            _this.term.writeln("terminal is connected");
            _this.isConnected = true;
            // nsConn.emit("OnChat", msg);
          },
          _OnConnected: (nsConn, msg) => {
            _this.term.writeln("terminal is connected");
            _this.isConnected = true;
          },
          _OnNamespaceDisconnect: function (nsConn, msg) {
            _this.term.writeln("terminal is disconnected");
            _this.isConnected = false;
          },
          OnChat: function (nsConn, msg) {
            nsConn.emit("OnChat", msg);
          },
          OnReceive: function (nsConn, msg) {
            _this.term.write(msg.Body);
          },
        }
      }, { // optional.
        // reconnect: 2000,
        timeout: 2 * 60 * 1000,
      });
      if (this.conn) {
        await this.conn.connect("default");
      }
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

	//事件
    termKeyCode() {
      const _this = this;
      const TERMINAL_INPUT_KEY = {
        BACK: 8, // 退格删除键
        DELETE: 46, // Delete删除键
        ENTER: 13, // 回车键
        UP: 38, // 方向盘上键
        DOWN: 40, // 方向盘下键
        LEFT: 37, // 方向盘左键
        RIGHT: 39, // 方向盘右键
      };
      this.term.onKey((e) => {
        const { key, domEvent } = e;
        const { keyCode } = domEvent;

        switch (keyCode) {
          // 退格
          case TERMINAL_INPUT_KEY.BACK:
            _this.nsConn.emit('OnChat', "\x08");
            break;
          // 删除
          case TERMINAL_INPUT_KEY.DELETE:
            _this.nsConn.emit('OnChat', "\x7F");
            break;
          //回车
          case TERMINAL_INPUT_KEY.ENTER: {
            if (!_this.isConnected) {
              this.initSocket();
            }
            // 处理回车键后的逻辑（例如发送输入文本到服务器
            _this.nsConn.emit('OnChat', "\r");
            break;
          }
          // 上箭头
          case TERMINAL_INPUT_KEY.UP:
          // 下箭头 fall through
          case TERMINAL_INPUT_KEY.DOWN:
          // 左箭头 fall through
          case TERMINAL_INPUT_KEY.LEFT:
          // 右箭头 fall through
          case TERMINAL_INPUT_KEY.RIGHT:
            _this.nsConn.emit('OnChat', key)
            break;
          default: {
            if (!_this.isConnected) {
              // 可以在这里使用 neffos 变量
              this.initSocket();
            }
            _this.nsConn.emit('OnChat', key)
            break;
          }
        }
      });
    },
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