WebSocket+xterm+springboot+vue 实现 xshell 操作linux终端功能

这篇具有很好参考价值的文章主要介绍了WebSocket+xterm+springboot+vue 实现 xshell 操作linux终端功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图

WebSocket+xterm+springboot+vue 实现 xshell 操作linux终端功能

1.工具介绍与安装

1.1 xterm.js

xterm 是一个使用 TypeScript 编写的前端终端组件,可以直接在浏览器中实现一个命令行终端应用。Xterm.js 适用于大多数终端应用程序,如 bash,vim 和 tmux,这包括对基于curses的应用程序和鼠标事件的支持。

1.2 安装

// 1、安装 xterm
npm install --save xterm

// 2、安装xterm-addon-fit
// xterm.js的插件,使终端的尺寸适合包含元素。
npm install --save xterm-addon-fit

// 3、安装xterm-addon-attach(这个你不用就可以不装)
// xterm.js的附加组件,用于附加到Web Socket
npm install --save xterm-addon-attach

安装完之后可以在package.json看到依赖
WebSocket+xterm+springboot+vue 实现 xshell 操作linux终端功能

1.3 websocket

websocket主要用于将前端的指令传递到后端,后端做出响应在传回前端显示。

springboot中安装依赖

 <!--  WebSocket 支持  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

2.前端实现

2.1 模板部分

//菜单中
<template>
      <div class="console" id="terminal" style="min-height: cala(100vh)"></div>
</template>
//这种是直接vue里面
<template>
  <section>
    <div id="log" style="margin:10px auto;">
      <div class="console" id="terminal"></div>
    </div>
  </section>
</template> 

2.2 逻辑部分

这一部分是填写你后端连接的地址,注意不要弄错

const WebSocketUrl = "wss://localhost:8080/ws/ssh";
<script>
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import { AttachAddon } from "xterm-addon-attach";

export default {
  name: "Xterm",
  props: {
    socketURI: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      term: null,
      socket: null,
      rows: 32,
      cols: 20,
      SetOut: false,
      isKey: false,
    };
  },
  mounted () {
    this.initSocket();

  },
  beforeDestroy () {
    this.socket.close();
    // this.term.dispose();
  },
  methods: {
    //Xterm主题
    initTerm () {
      const term = new Terminal({
        rendererType: "canvas", //渲染类型
        rows: this.rows, //行数
        // cols: this.cols,// 设置之后会输入多行之后覆盖现象
        convertEol: true, //启用时,光标将设置为下一行的开头
        // scrollback: 10,//终端中的回滚量
        fontSize: 14, //字体大小
        disableStdin: false, //是否应禁用输入。
        cursorStyle: "block", //光标样式
        // cursorBlink: true, //光标闪烁
        scrollback: 30,
        tabStopWidth: 4,
        theme: {
          foreground: "yellow", //字体
          background: "#060101", //背景色
          cursor: "help" //设置光标
        }
      });
      const attachAddon = new AttachAddon(this.socket);
      const fitAddon = new FitAddon();
      term.loadAddon(attachAddon);
      term.loadAddon(fitAddon);
     
      term.open(document.getElementById("terminal"));
     
      term.focus();
      let _this = this;
      //限制和后端交互,只有输入回车键才显示结果
      term.prompt = () => {
        term.write("\r\n$ ");
      };
      term.prompt();
      
      function runFakeTerminal (_this) {
        if (term._initialized) {
          return;
        }
        // 初始化
        term._initialized = true;
        term.writeln();//控制台初始化报错处
        term.prompt();
        // / **
        //     *添加事件监听器,用于按下键时的事件。事件值包含
        //     *将在data事件以及DOM事件中发送的字符串
        //     *触发了它。
        //     * @返回一个IDisposable停止监听。
        //  * /
        //   / ** 更新:xterm 4.x(新增)
        //  *为数据事件触发时添加事件侦听器。发生这种情况
        //  *用户输入或粘贴到终端时的示例。事件值
        //  *是`string`结果的结果,在典型的设置中,应该通过
        //  *到支持pty。
        //  * @返回一个IDisposable停止监听。
        //  * /
        // 支持输入与粘贴方法
        term.onData(function (key) {
          let order = {
            Data: key,
            Op: "stdin"
          };
          _this.onSend(order);
        });
        _this.term = term;
      }
      runFakeTerminal(_this);
    },
    //webShell主题
    initSocket () {
     // const WebSocketUrl = "ws://localhost:8080/ws/ssh";
      const WebSocketUrl = "wss://localhost:8080/ws/ssh";
      this.socket = new WebSocket(
        WebSocketUrl
      );
      this.socketOnClose(); //关闭
      this.socketOnOpen(); //
      this.socketOnError();
    },
    //webshell链接成功之后操作
    socketOnOpen () {
      this.socket.onopen = () => {
        // 链接成功后
        this.initTerm();
      };
    },
    //webshell关闭之后操作
    socketOnClose () {
      this.socket.onclose = () => {
        console.log("close socket");
      };
    },
    //webshell错误信息
    socketOnError () {
      this.socket.onerror = () => {
        console.log("socket 链接失败");
      };
    },
    //特殊处理
    onSend (data) {
      data = this.base.isObject(data) ? JSON.stringify(data) : data;
      data = this.base.isArray(data) ? data.toString() : data;
      data = data.replace(/\\\\/, "\\");
      this.shellWs.onSend(data);
    },
    //删除左右两端的空格
    trim (str) {
      return str.replace(/(^\s*)|(\s*$)/g, "");
    }
  }
};
</script>

2.3 样式 以及自适应屏幕大小

这一部分是因为xterm.js的FitAddon 只会横向的去适应屏幕大小,纵向他会有留白。这里是覆盖了xterm的一个原来的样式,下面的scope里面的是对字体的一些修饰

<style>
.xterm-screen{
  min-height: calc(100vh);
}
</style>

WebSocket+xterm+springboot+vue 实现 xshell 操作linux终端功能

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.xterm-screen{
  min-height: calc(100vh);
}
</style>
<style scoped>
 h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style> 

3.后端实现

3.1 实体类部分

    /**
     *
     * @Description SshModel实体类
     */
    public class SshModel {

        private String name;
        private String host;
        private Integer port;
        private String user;
        private String password;
        /**
         * 编码格式
         */
        private String charset;

        /**
         * 文件目录
         */
        private String fileDirs;

        /**
         * ssh 私钥
         */
        private String privateKey;

        private String connectType;

        /**
         * 不允许执行的命令
         */
        private String notAllowedCommand;

        /**
         * 允许编辑的后缀文件
         */
        private String allowEditSuffix;

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getNotAllowedCommand() {
            return notAllowedCommand;
        }

        public void setNotAllowedCommand(String notAllowedCommand) {
            this.notAllowedCommand = notAllowedCommand;
        }

        public ConnectType connectType() {
            return EnumUtil.fromString(ConnectType.class, this.connectType, ConnectType.PASS);
        }

        public String getConnectType() {
            return connectType;
        }

        public void setConnectType(String connectType) {
            this.connectType = connectType;
        }

        public String getPrivateKey() {
            return privateKey;
        }

        public void setPrivateKey(String privateKey) {
            this.privateKey = privateKey;
        }

        public String getFileDirs() {
            return fileDirs;
        }

        public void setFileDirs(String fileDirs) {
            this.fileDirs = fileDirs;
        }

        public List<String> fileDirs() {
            return StringUtil.jsonConvertArray(this.fileDirs, String.class);
        }

        public void fileDirs(List<String> fileDirs) {
            if (fileDirs != null) {
                for (int i = fileDirs.size() - 1; i >= 0; i--) {
                    String s = fileDirs.get(i);
                    fileDirs.set(i, FileUtil.normalize(s));
                }
                this.fileDirs = JSONArray.toJSONString(fileDirs);
            } else {
                this.fileDirs = null;
            }
        }

        public String getHost() {
            return host;
        }

        public void setHost(String host) {
            this.host = host;
        }

        public Integer getPort() {
            return port;
        }

        public void setPort(Integer port) {
            this.port = port;
        }

        public String getUser() {
            return user;
        }

        public void setUser(String user) {
            this.user = user;
        }

        public String getPassword() {
            return password;
        }

        public void setPassword(String password) {
            this.password = password;
        }

        public String getCharset() {
            return charset;
        }

        public void setCharset(String charset) {
            this.charset = charset;
        }

        public Charset getCharsetT() {
            Charset charset;
            try {
                charset = Charset.forName(this.getCharset());
            } catch (Exception e) {
                charset = CharsetUtil.CHARSET_UTF_8;
            }
            return charset;
        }

        public List<String> allowEditSuffix() {
            return StringUtil.jsonConvertArray(this.allowEditSuffix, String.class);
        }

        public void allowEditSuffix(List<String> allowEditSuffix) {
            if (allowEditSuffix == null) {
                this.allowEditSuffix = null;
            } else {
                this.allowEditSuffix = JSONArray.toJSONString(allowEditSuffix);
            }
        }

        public String getAllowEditSuffix() {
            return allowEditSuffix;
        }

        public void setAllowEditSuffix(String allowEditSuffix) {
            this.allowEditSuffix = allowEditSuffix;
        }

        /**
         * 检查是否包含禁止命令
         *
         * @param sshItem   实体
         * @param inputItem 输入的命令
         * @return false 存在禁止输入的命令
         */
        public static boolean checkInputItem(SshModel sshItem, String inputItem) {
            // 检查禁止执行的命令
            String notAllowedCommand = StrUtil.emptyToDefault(sshItem.getNotAllowedCommand(), StrUtil.EMPTY).toLowerCase();
            if (StrUtil.isEmpty(notAllowedCommand)) {
                return true;
            }
            List<String> split = Arrays.asList(StrUtil.split(notAllowedCommand, StrUtil.COMMA));
            inputItem = inputItem.toLowerCase();
            List<String> commands = Arrays.asList(StrUtil.split(inputItem, StrUtil.CR));
            commands.addAll(Arrays.asList(StrUtil.split(inputItem, "&")));
            for (String s : split) {
                //
                boolean anyMatch = commands.stream().anyMatch(item -> StrUtil.startWithAny(item, s + StrUtil.SPACE, ("&" + s + StrUtil.SPACE), StrUtil.SPACE + s + StrUtil.SPACE));
                if (anyMatch) {
                    return false;
                }
                //
                anyMatch = commands.stream().anyMatch(item -> StrUtil.equals(item, s));
                if (anyMatch) {
                    return false;
                }
            }
            return true;
        }

        public enum ConnectType {
            /**
             * 账号密码
             */
            PASS,
            /**
             * 密钥
             */
            PUBKEY
        }
    }

3.1.1 先配置一个WebSocketConfig类

@Configuration
@ComponentScan
@EnableAutoConfiguration
public class WebSocketConfig implements ServletContextInitializer {
    /**
     * 给spring容器注入这个ServerEndpointExporter对象
     * 相当于xml:
     * <beans>
     * <bean id="serverEndpointExporter" class="org.springframework.web.socket.server.standard.ServerEndpointExporter"/>
     * </beans>
     * <p>
     * 检测所有带有@serverEndpoint注解的bean并注册他们。
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
        servletContext.addListener(WebAppRootListener.class);
        servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","52428800");
        servletContext.setInitParameter("org.apache.tomcat.websocket.binaryBufferSize","52428800");
    }
}

3.2 SshHander类

主要的实现是这两个核心类,这里是通过ssh去连接服务器的。
这里填写你的服务器用户名,密码等

@OnOpen
        public void onOpen(javax.websocket.Session session) throws Exception {
            SessionSet.add(session);
            SshModel sshItem = new SshModel();
            sshItem.setHost("xxxx");
            sshItem.setPort(xxxx);
            sshItem.setUser("xxxx");
            sshItem.setPassword("xxxxx");
            int cnt = OnlineCount.incrementAndGet(); // 在线数加1
            log.info("有连接加入,当前连接数为:{},sessionId={}", cnt,session.getId());
            SendMessage(session, "连接成功,sessionId="+session.getId());
            HandlerItem handlerItem = new HandlerItem(session, sshItem);
            handlerItem.startRead();
            HANDLER_ITEM_CONCURRENT_HASH_MAP.put(session.getId(), handlerItem);
        }
@ServerEndpoint("/ws/ssh")
@Component
public class SshHandler {
        private static final ConcurrentHashMap<String, HandlerItem> HANDLER_ITEM_CONCURRENT_HASH_MAP = new ConcurrentHashMap<>();

        @PostConstruct
        public void init() {
            System.out.println("websocket 加载");
        }
        private static Logger log = LoggerFactory.getLogger(SshHandler.class);
        private static final AtomicInteger OnlineCount = new AtomicInteger(0);
        // concurrent包的线程安全Set,用来存放每个客户端对应的Session对象。
        private static CopyOnWriteArraySet<javax.websocket.Session> SessionSet = new CopyOnWriteArraySet<javax.websocket.Session>();


        /**
         * 连接建立成功调用的方法
         */
        @OnOpen
        public void onOpen(javax.websocket.Session session) throws Exception {
            SessionSet.add(session);
            SshModel sshItem = new SshModel();
            sshItem.setHost("xxxx");
            sshItem.setPort(xxxx);
            sshItem.setUser("xxxx");
            sshItem.setPassword("xxxxx");
            int cnt = OnlineCount.incrementAndGet(); // 在线数加1
            log.info("有连接加入,当前连接数为:{},sessionId={}", cnt,session.getId());
            SendMessage(session, "连接成功,sessionId="+session.getId());
            HandlerItem handlerItem = new HandlerItem(session, sshItem);
            handlerItem.startRead();
            HANDLER_ITEM_CONCURRENT_HASH_MAP.put(session.getId(), handlerItem);
        }

        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose(javax.websocket.Session session) {
            SessionSet.remove(session);
            int cnt = OnlineCount.decrementAndGet();
            log.info("有连接关闭,当前连接数为:{}", cnt);
        }

        /**
         * 收到客户端消息后调用的方法
         * @param message
         * 客户端发送过来的消息
         */
        @OnMessage
        public void onMessage(String message, javax.websocket.Session session) throws Exception {
            log.info("来自客户端的消息:{}",message);
            //        SendMessage(session, "收到消息,消息内容:"+message);
            HandlerItem handlerItem = HANDLER_ITEM_CONCURRENT_HASH_MAP.get(session.getId());
            this.sendCommand(handlerItem, message);
        }

        /**
         * 出现错误
         * @param session
         * @param error
         */
        @OnError
        public void onError(javax.websocket.Session session, Throwable error) {
            log.error("发生错误:{},Session ID: {}",error.getMessage(),session.getId());
            error.printStackTrace();
        }

        private void sendCommand(HandlerItem handlerItem, String data) throws Exception {
            if (handlerItem.checkInput(data)) {
                handlerItem.outputStream.write(data.getBytes());
            } else {
                handlerItem.outputStream.write("没有执行相关命令权限".getBytes());
                handlerItem.outputStream.flush();
                handlerItem.outputStream.write(new byte[]{3});
            }
            handlerItem.outputStream.flush();
        }

        /**
         * 发送消息,实践表明,每次浏览器刷新,session会发生变化。
         * @param session
         * @param message
         */
        public static void SendMessage(javax.websocket.Session session, String message) {
            try {
                //            session.getBasicRemote().sendText(String.format("%s (From Server,Session ID=%s)",message,session.getId()));
                session.getBasicRemote().sendText(message);
                session.getBasicRemote().sendText("dhhw>$");
            } catch (IOException e) {
                log.error("发送消息出错:{}", e.getMessage());
                e.printStackTrace();
            }
        }

        private class HandlerItem implements Runnable {
            private final javax.websocket.Session session;
            private final InputStream inputStream;
            private final OutputStream outputStream;
            private final Session openSession;
            private final ChannelShell channel;
            private final SshModel sshItem;
            private final StringBuilder nowLineInput = new StringBuilder();

            HandlerItem(javax.websocket.Session session, SshModel sshItem) throws IOException {
                this.session = session;
                this.sshItem = sshItem;
                this.openSession = JschUtil.openSession(sshItem.getHost(), sshItem.getPort(), sshItem.getUser(), sshItem.getPassword());
                this.channel = (ChannelShell) JschUtil.createChannel(openSession, ChannelType.SHELL);
                this.inputStream = channel.getInputStream();
                this.outputStream = channel.getOutputStream();
            }

            void startRead() throws JSchException {
                this.channel.connect();
                ThreadUtil.execute(this);
            }


            /**
             * 添加到命令队列
             *
             * @param msg 输入
             * @return 当前待确认待所有命令
             */
            private String append(String msg) {
                char[] x = msg.toCharArray();
                if (x.length == 1 && x[0] == 127) {
                    // 退格键
                    int length = nowLineInput.length();
                    if (length > 0) {
                        nowLineInput.delete(length - 1, length);
                    }
                } else {
                    nowLineInput.append(msg);
                }
                return nowLineInput.toString();
            }

            public boolean checkInput(String msg) {
                String allCommand = this.append(msg);
                boolean refuse;
                if (StrUtil.equalsAny(msg, StrUtil.CR, StrUtil.TAB)) {
                    String join = nowLineInput.toString();
                    if (StrUtil.equals(msg, StrUtil.CR)) {
                        nowLineInput.setLength(0);
                    }
                    refuse = SshModel.checkInputItem(sshItem, join);
                } else {
                    // 复制输出
                    refuse = SshModel.checkInputItem(sshItem, msg);
                }
                return refuse;
            }


            @Override
            public void run() {
                try {
                    byte[] buffer = new byte[1024];
                    int i;
                    //如果没有数据来,线程会一直阻塞在这个地方等待数据。
                    while ((i = inputStream.read(buffer)) != -1) {
                        sendBinary(session, new String(Arrays.copyOfRange(buffer, 0, i), sshItem.getCharsetT()));
                    }
                } catch (Exception e) {
                    if (!this.openSession.isConnected()) {
                        return;
                    }

                    SshHandler.this.destroy(this.session);
                }
            }
        }

        public void destroy(javax.websocket.Session session) {
            HandlerItem handlerItem = HANDLER_ITEM_CONCURRENT_HASH_MAP.get(session.getId());
            if (handlerItem != null) {
                IoUtil.close(handlerItem.inputStream);
                IoUtil.close(handlerItem.outputStream);
                JschUtil.close(handlerItem.channel);
                JschUtil.close(handlerItem.openSession);
            }
            IoUtil.close(session);
            HANDLER_ITEM_CONCURRENT_HASH_MAP.remove(session.getId());
        }

        private static void sendBinary(javax.websocket.Session session, String msg) {
            //		if (!session.isOpen()) {
            //			// 会话关闭不能发送消息
            //			return;
            //		}

            //		synchronized (session.getId()) {
            //			BinaryMessage byteBuffer = new BinaryMessage(msg.getBytes());
            try {
              //  System.out.println("#####:"+msg);
                session.getBasicRemote().sendText(msg);
            } catch (IOException e) {
            }
            //		}
        }
    }

3.3 StringUtil工具类

import cn.hutool.core.date.DateField;
import cn.hutool.core.date.DateTime;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.lang.Validator;
import cn.hutool.core.util.StrUtil;
import cn.hutool.system.SystemUtil;
import com.alibaba.fastjson.JSON;

import java.io.File;
import java.util.List;

/**
 * @Description 方法运行参数工具
 *
 */
public class StringUtil {

    /**
     * 支持的压缩包格式
     */
    public static final String[] PACKAGE_EXT = new String[]{"tar.bz2", "tar.gz", "tar", "bz2", "zip", "gz"};

    /**
     * 获取启动参数
     * @param args 所有参数
     * @param name 参数名
     * @return 值
     */
    public static String getArgsValue(String[] args, String name) {
        if (args == null) {
            return null;
        }
        for (String item : args) {
            item = StrUtil.trim(item);
            if (item.startsWith("--" + name + "=")) {
                return item.substring(name.length() + 3);
            }
        }
        return null;
    }

    /**
     * id输入规则
     *
     * @param value 值
     * @param min   最短
     * @param max   最长
     * @return true
     */
    public static boolean isGeneral(CharSequence value, int min, int max) {
        String reg = "^[a-zA-Z0-9_-]{" + min + StrUtil.COMMA + max + "}$";
        return Validator.isMatchRegex(reg, value);
    }

    /**
     * 删除文件开始的路径
     *
     * @param file      要删除的文件
     * @param startPath 开始的路径
     * @param inName    是否返回文件名
     * @return /test/a.txt /test/  a.txt
     */
    public static String delStartPath(File file, String startPath, boolean inName) {
        String newWhitePath;
        if (inName) {
            newWhitePath = FileUtil.getAbsolutePath(file.getAbsolutePath());
        } else {
            newWhitePath = FileUtil.getAbsolutePath(file.getParentFile());
        }
        String itemAbsPath = FileUtil.getAbsolutePath(new File(startPath));
        itemAbsPath = FileUtil.normalize(itemAbsPath);
        newWhitePath = FileUtil.normalize(newWhitePath);
        String path = StrUtil.removePrefix(newWhitePath, itemAbsPath);
        //newWhitePath.substring(newWhitePath.indexOf(itemAbsPath) + itemAbsPath.length());
        path = FileUtil.normalize(path);
        if (path.startsWith(StrUtil.SLASH)) {
            path = path.substring(1);
        }
        return path;
    }

    /**
     * 获取jdk 中的tools jar文件路径
     *
     * @return file
     */
    public static File getToolsJar() {
        File file = new File(SystemUtil.getJavaRuntimeInfo().getHomeDir());
        return new File(file.getParentFile(), "lib/tools.jar");
    }

    /**
     * 指定时间的下一个刻度
     *
     * @return String
     */
    public static String getNextScaleTime(String time, Long millis) {
        DateTime dateTime = DateUtil.parse(time);
        if (millis == null) {
            millis = 30 * 1000L;
        }
        DateTime newTime = dateTime.offsetNew(DateField.SECOND, (int) (millis / 1000));
        return DateUtil.formatTime(newTime);
    }

//	/**
//	 * 删除 yml 文件内容注释
//	 *
//	 * @param content 配置内容
//	 * @return 移除后的内容
//	 */
//	public static String deleteComment(String content) {
//		List<String> split = StrUtil.split(content, StrUtil.LF);
//		split = split.stream().filter(s -> {
//			if (StrUtil.isEmpty(s)) {
//				return false;
//			}
//			s = StrUtil.trim(s);
//			return !StrUtil.startWith(s, "#");
//		}).collect(Collectors.toList());
//		return CollUtil.join(split, StrUtil.LF);
//	}

    /**
     * json 字符串转 bean,兼容普通json和字符串包裹情况
     *
     * @param jsonStr json 字符串
     * @param cls     要转为bean的类
     * @param <T>     泛型
     * @return data
     */
    public static <T> T jsonConvert(String jsonStr, Class<T> cls) {
        if (StrUtil.isEmpty(jsonStr)) {
            return null;
        }
        try {
            return JSON.parseObject(jsonStr, cls);
        } catch (Exception e) {
            return JSON.parseObject(JSON.parse(jsonStr).toString(), cls);
        }
    }

    /**
     * json 字符串转 bean,兼容普通json和字符串包裹情况
     *
     * @param jsonStr json 字符串
     * @param cls     要转为bean的类
     * @param <T>     泛型
     * @return data
     */
    public static <T> List<T> jsonConvertArray(String jsonStr, Class<T> cls) {
        try {
            if (StrUtil.isEmpty(jsonStr)) {
                return null;
            }
            return JSON.parseArray(jsonStr, cls);
        } catch (Exception e) {
            Object parse = JSON.parse(jsonStr);
            return JSON.parseArray(parse.toString(), cls);
        }
    }
}

以上就是终端的实现了,(有问题可以私信我)希望能帮助到大家。文章来源地址https://www.toymoban.com/news/detail-409381.html

到了这里,关于WebSocket+xterm+springboot+vue 实现 xshell 操作linux终端功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue + xtermjs + websocket 前端网页版终端,操作后端的docker容器

    简介: 1.自动版,无需维护websocket,由xterm-addon-attach插件监控输入输出(推荐,简单好用) 2.自定义版,维护websocket,自己实现输入输出 3.xtermjs、xterm-addon-attach、xterm-addon-fit、docker 4.以上版本都是由cdn形式html页面实现,如需vue-cli工程化实现,只需import引入fitAddon 、attachAdd

    2024年02月12日
    浏览(42)
  • WebSocket+Vue+SpringBoot实现语音通话

    参考文章 整体思路 前端点击开始对话按钮后,将监听麦克风,获取到当前的音频,将其装化为二进制数据,通过websocket发送到webscoket服务端,服务端在接收后,将消息写入给指定客户端,客户端拿到发送过来的二进制音频后再转化播放 注意事项 由于音频转化后的二进制数据

    2024年02月06日
    浏览(47)
  • SpringBoot+Vue整合WebSocket实现实时通讯

            在开发过程中,我们经常遇到需要对前台的列表数据,实现实时展示最新的几条数据,或者是调度的任务进度条实现实时的刷新......,而对于这种需求,无状态的http协议显然无法满足我们的需求,于是websocket协议应运而生。websocket协议本质上是一个基于tcp的协议

    2024年02月13日
    浏览(42)
  • SpringBoot+Vue 整合websocket实现简单聊天窗口

    1 输入临时名字充当账号使用 2 进入聊天窗口 3 发送消息 (复制一个页面,输入其他名字,方便展示效果) 4 其他窗口效果 pom依赖 WebSocketConfig.java WebSocketServer.java MessageVo.java App.vue

    2024年02月09日
    浏览(46)
  • vue+springboot+websocket实现消息通知,含应用场景

    vue、springboot 实现场景 点击同步之后更新数据,更新时间比较长,因此使用异步,之后该按钮置灰,在数据更新完成之后,服务端通知客户端已经同步成功,通知提示框,用户即可查看数据 前端 1、在对应的页面编写初始化、连接成功,错误,接受信息方法 2、mounted或者cre

    2024年02月11日
    浏览(77)
  • Vue3+springboot通过websocket实现实时通信

    本文章使用vue3+springboot通过websocket实现两个用户之间的实时通信,聊天信息使用mongodb非关系型数据库进行存储。 效果图如下: 用户发送信息  农户收到信息并发送回去 后台消息打印 引入依赖   配置 在config目录下, 创建WebSocketConfig类 创建一个WebSocketServer来 处理连接 用户

    2024年02月05日
    浏览(44)
  • SpringBoot+Netty+Vue+Websocket实现在线推送/聊天系统

    ok,那么今天的话也是带来这个非常常用的一个技术,那就是咱们完成nutty的一个应用,今天的话,我会介绍地很详细,这样的话,拿到这个博文的代码就基本上可以按照自己的想法去构建自己的一个在线应用了。比如聊天,在线消息推送之类的。其实一开始我原来的想法做在

    2024年02月03日
    浏览(43)
  • SpringBoot实现WebSocket发送接收消息 + Vue实现SocketJs接收发送消息

    1、https://www.mchweb.net/index.php/dev/887.html 2、https://itonline.blog.csdn.net/article/details/81221103?spm=1001.2101.3001.6661.1utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-81221103-blog-121078449.pc_relevant_aadepth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-81221103-blog-12107

    2024年02月05日
    浏览(47)
  • SpringBoot+WebSocket+VUE实现一个简单的聊天机器人

    要实现一个简单的聊天机器人,可以使用Spring Boot框架作为后端,使用WebSocket协议实现实时通信,使用VUE作为前端实现聊天界面。 引入jar包 在Spring Boot的配置类中添加WebSocket配置 这里的WebSocketHandler是自定义的WebSocket处理器,用于处理WebSocket消息。 做了一个简单的拦截器,实

    2023年04月19日
    浏览(45)
  • web网页端使用webSocket实现语音通话功能(SpringBoot+VUE)

    最近在写一个web项目,需要实现web客户端之间的语音通话,期望能够借助webSocket全双工通信的方式来实现,但是网上没有发现可以正确使用的代码。网上能找到的一个代码使用之后 只能听到“嘀嘀嘀”的杂音 解决方案: 使用Json来传递数据代替原有的二进制输入输出流 技术

    2024年02月02日
    浏览(123)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包