feat: add webshell

packages/webshell/src/main.ts

@@ -0,0 +1,60 @@
+import { Terminal } from '@xterm/xterm';
+// import { FitAddon } from 'xterm-addon-fit';
+import '@xterm/xterm/css/xterm.css';
+import io from 'socket.io-client';
+const term = new Terminal();
+term.open(document.getElementById('terminal') as HTMLElement);
+// term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
+let input = '';
+term.onData((data) => {
+  // socket.emit('input', { name: 'tab', data });
+  if (data === '\b' || data === '\x7F') {
+    console.log('blank data\b');
+    input = input.slice(0, -1);
+    term.write('\b \b');
+    return;
+  }
+  input += data;
+  if (data === '\r') {
+    console.log('input', input);
+    socket.emit('tab-input', input);
+    input = '';
+  } 
+  term.write(data);
+});
+// term.on
+term.onResize(({ cols, rows }) => {
+  term.resize(cols, rows);
+});
+
+const socket = io(window.location.origin + '/terminal', { path: '/terminal', reconnection: true });
+socket.connect();
+const termialTab0 = { name: 'tab', children: [] };
+const createTerminal = (tab: any) => {
+  const name = tab.name;
+  const cwd = null;
+  socket.emit('create', { name: name });
+};
+socket.on('connect', () => {
+  console.log('connect');
+  createTerminal(termialTab0);
+});
+socket.on('message', (data: any) => {
+  console.log('message', data);
+});
+
+socket.on('tab-output', (data: any) => {
+  console.log('tab-output', data);
+  term.write(data);
+});
+socket.on('tab-pid', (data: any) => {
+  console.log('tab-pid-data', data);
+});
+
+const inputEl = document.querySelector('#input') as HTMLInputElement;
+const send = document.querySelector('#send');
+
+send?.addEventListener('click', () => {
+  const data = inputEl?.value;
+  socket.emit('tab-input', data);
+});