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

这篇具有很好参考价值的文章主要介绍了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 、attachAddon 替换即可

一、自动版(推荐)
如图所示:

vue xterm,Element,javascript,vue.js,websocket,Terminal,PowerShell,终端

代码(复制另存txt,修改.html直接运行)
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>前端终端,操作后端的docker容器</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css">
</head>


<body class="bodyCss">
    <div id="app">
        <div id="terminal" ></div>
    </div>
</body>
<script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<script  src="https://unpkg.com/xterm-addon-fit@0.6.0/lib/xterm-addon-fit.js"></script>
<script  src="https://unpkg.com/xterm-addon-attach@0.6.0/lib/xterm-addon-attach.js"></script>

<script>
    let wsTime = null
    new Vue({
        el: '#app',
        data() {
            return {
                // 终端
                term:{},
                // websocket
                ws:{}
            }
        },
        created(){
            // 初始化终端
            this.initTerminal() 
        },
        mounted() {
            // 建立websocket连接
            this.websocket()
        },
        beforeDestroy() {
            this.ws.close()
            this.term.dispose()
        },
        methods: {
            // 初始化终端配置
            initTerminal(){
                this.term = new Terminal({
                    rendererType: "canvas", //渲染类型
                    // rows: 40, //行数,影响最小高度
                    // cols: 100, // 列数,影响最小宽度
                    convertEol: true, //启用时,光标将设置为下一行的开头
                    // scrollback: 50, //终端中的滚动条回滚量
                    disableStdin: false, //是否应禁用输入。
                    cursorStyle: "underline", //光标样式
                    cursorBlink: true, //光标闪烁
                    theme: {
                        foreground: '#F8F8F8',
                        background: '#2D2E2C',
                        cursor: "help", //设置光标
                        lineHeight: 16,
                    },
                    fontFamily: '"Cascadia Code", Menlo, monospace'
                });
            },
            // 自定义终端默认展示内容
            writeDefaultInfo(){
                let defaultInfo = [
                '┌\x1b[1m terminals \x1b[0m─────────────────────────────────────────────────────────────────┐ ',
                '│                                                                            │ ',
                '│  \x1b[1;34m 欢迎使用Web Docker SSH \x1b[0m                                                  │ ',
                '│                                                                            │ ',
                '└────────────────────────────────────────────────────────────────────────────┘ ',]
                this.term.write(defaultInfo.join('\n\r'))
            },
            // 建立websocket连接
            websocket() {
                // WebSocket start
                if ('WebSocket' in window) {
                	//需要修改ip和id
                	//例如:const url = `ws://192.168.111.222:2375/v1.41/containers/0eb8aafb4e6e/attach/ws?logs=0&stream=1&stdin=1&stdout=1&stderr=1`
                    const url = `ws://你的ip/v1.41/containers/你的id/attach/ws?logs=0&stream=1&stdin=1&stdout=1&stderr=1`
                    const ws = new WebSocket(url)
                    this.ws = ws
                    ws.onopen = (event) => {
                        console.log('已建立连接:',event)
                        // 输入换行符可让终端显示当前用户的工作路径
                        ws.send('\n') 
                        // 窗口自适应插件
                        const fitAddon = new FitAddon.FitAddon();
                        // websocket自动收发消息插件
                        const attachAddon = new AttachAddon.AttachAddon(ws)
                        this.term.loadAddon(attachAddon)
                        this.term.loadAddon(fitAddon)
                        this.term.open(document.getElementById('terminal'));
                        // 聚焦闪烁光标
                        this.term.focus()
                        // 窗口尺寸变化时,终端尺寸自适应
                        window.onresize = () => { 
                            fitAddon.fit()
                        }
                        // 自定义终端默认展示内容
                        this.writeDefaultInfo()
                    };
                    ws.onmessage = (event) => {
                        console.log('接收信息:',event)
                    };
                    ws.onerror = (event) => {
                        console.log('错误信息:', event)
                        if (wsTime) {
                            window.clearTimeout(wsTime)
                            wsTime = null
                        }
                        wsTime = window.setTimeout(() => {
                            this.websocket()
                        }, 3000)
                    };
                    ws.onclose = (event) => {
                        console.log('已关闭连接:', event)
                        // if (wsTime) {
                        //    window.clearTimeout(wsTime)
                        //    wsTime = null
                        // }
                        // wsTime = window.setTimeout(() => {
                        //    this.websocket()
                        // }, 3000)
                    };
                } else {
                    console.log('浏览器不支持 WebSocket..')
                }
                // WebSocket end
            }
        }
    })
</script>

</html>



二、自定义版
如图所示:

vue xterm,Element,javascript,vue.js,websocket,Terminal,PowerShell,终端文章来源地址https://www.toymoban.com/news/detail-531761.html

代码(复制另存txt,修改.html直接运行)
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>前端终端,操作后端的docker容器</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css">
</head>

<body class="bodyCss">
    <div id="app">
        <div id="terminal" ></div>
    </div>
</body>
<script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<script  src="https://unpkg.com/xterm-addon-fit@0.6.0/lib/xterm-addon-fit.js"></script>

<script>
    let wsTime = null
    new Vue({
        el: '#app',
        data() {
            return {
                // 终端
                term:{},
                // websocket
                ws:{},
                // 用户输入
                command:''
            }
        },
        created(){
            // 初始化终端
            this.initTerminal() 
        },
        mounted() {
            // 建立websocket连接
            this.websocket()
        },
        beforeDestroy() {
            this.ws.close()
            this.term.dispose()
        },
        methods: {
            // 初始化终端配置
            initTerminal(){
                this.term = new Terminal({
                    rendererType: "canvas", //渲染类型
                    // rows: 40, //行数,影响最小高度
                    // cols: 100, // 列数,影响最小宽度
                    convertEol: true, //启用时,光标将设置为下一行的开头
                    // scrollback: 50, //终端中的滚动条回滚量
                    disableStdin: false, //是否应禁用输入。
                    cursorStyle: "underline", //光标样式
                    cursorBlink: true, //光标闪烁
                    theme: {
                        foreground: '#F8F8F8',
                        background: '#2D2E2C',
                        cursor: "help", //设置光标
                        lineHeight: 16,
                    },
                    fontFamily: '"Cascadia Code", Menlo, monospace'
                });
            },
            // 自定义终端默认展示内容
            writeDefaultInfo(){
                let defaultInfo = [
                '┌\x1b[1m terminals \x1b[0m─────────────────────────────────────────────────────────────────┐ ',
                '│                                                                            │ ',
                '│  \x1b[1;34m 欢迎使用Web Docker SSH \x1b[0m                                                  │ ',
                '│                                                                            │ ',
                '└────────────────────────────────────────────────────────────────────────────┘ ',]
                // 测试颜色区间 
                // let arr = Array.from({length:100},(v,i)=>v = i)
                // console.log(arr)
                // arr.map((item,i) => {
                //     defaultInfo.push(`Hello from \x1B[1;3;${i}m ${i} \x1B[0m  \u2764\ufe0f   ${i}`)
                // })
                this.term.write(defaultInfo.join('\n\r'))
                this.writeOfColor('我是加粗斜体红色的字呀','1;3;','31m')
                // this.term.write('\n\r$ ')
            },
            // 
            writeOfColor(txt, fontCss = "", bgColor = ""){
                // 在Linux脚本中以 \x1B[ 开始,中间前部分是样式+内容,以 \x1B[0m 结尾
                // 示例 \x1B[1;3;31m 内容 \x1B[0m  
                // fontCss
                // 0;-4;字体样式(0;正常 1;加粗 2;变细 3;斜体 4;下划线)
                // bgColor
                // 30m-37m字体颜色(30m:黑色 31m:红色 32m:绿色 33m:棕色字 34m:蓝色 35m:洋红色/紫色 36m:蓝绿色/浅蓝色 37m:白色)
                // 40m-47m背景颜色(40m:黑色 41m:红色 42m:绿色 43m:棕色字 44m:蓝色 45m:洋红色/紫色 46m:蓝绿色/浅蓝色 47m:白色)
                this.term.write(`\x1B[${fontCss}${bgColor}${txt}\x1B[0m`)
            },
            // 监听输入
            userWrite(){
                this.term.onData(e => {
                    switch (e) {
                        case '\u0003': // Ctrl+C
                            this.term.write('^C ');
                            this.term.write('\r\n$ ')
                        break;
                        case '\r': // Enter
                            this.ws.send(this.command)
                            this.ws.send('\n') 
                            this.command = ''
                            // this.term.write('\r\n$ ')
                        break;
                        case '\u007F': // Backspace (DEL)
                            // Do not delete the prompt
                            if (this.term._core.buffer.x > 2) {
                                this.term.write('\b \b');
                                if (this.command.length > 0) {
                                    this.command = this.command.substr(0, this.command.length - 1);
                                }
                            }
                        break;
                        default: // Print all other characters for demo
                            if (e >= String.fromCharCode(0x20) && e <= String.fromCharCode(0x7E) || e >= '\u00a0') {
                                this.command += e;
                                this.writeOfColor(e,'2;3;','33m')
                                console.log('用户输入command',this.command)
                            }
                    }
                });
            },
            // 建立websocket连接
            websocket() {
                // WebSocket start
                if ('WebSocket' in window) {
                    //需要修改ip和id
                	//例如:const url = `ws://192.168.111.222:2375/v1.41/containers/0eb8aafb4e6e/attach/ws?logs=0&stream=1&stdin=1&stdout=1&stderr=1`
                    const url = `ws://你的ip/v1.41/containers/你的id/attach/ws?logs=0&stream=1&stdin=1&stdout=1&stderr=1`
                    const ws = new WebSocket(url)
                    this.ws = ws
                    this.$nextTick(()=>{
                        this.userWrite()
                    })
                    ws.onopen = (event) => {
                        console.log('已建立连接:',event)
                        // 输入换行符可让终端显示当前用户的工作路径
                        ws.send('\n') 
                        // 窗口自适应插件
                        const fitAddon = new FitAddon.FitAddon();
                        // 窗口尺寸变化时,终端尺寸自适应
                        window.onresize = () => { 
                            fitAddon.fit()
                        }
                        this.term.loadAddon(fitAddon)
                        this.term.open(document.getElementById('terminal'));
                        this.term.focus()
                        // 自定义终端默认展示内容
                        this.writeDefaultInfo()
                    };
                    ws.onmessage = (event) => {
                        console.log('接收信息:',event)
                        //将字符串转换成 Blob对象
                        const blob = new Blob([event.data], {
                            type: 'text/plain'
                        });
                        //将Blob 对象转换成字符串
                        const reader = new FileReader();
                        reader.readAsText(blob, 'utf-8');
                        reader.onload = (e) => {
                            // 可以根据返回值判断使用何种颜色或者字体,不过返回值自带了一些字体颜色
                            this.writeOfColor(reader.result,'0;','37m')
                        }
                    };
                    ws.onerror = (event) => {
                        console.log('错误信息:', event)
                        if (wsTime) {
                            window.clearTimeout(wsTime)
                            wsTime = null
                        }
                        wsTime = window.setTimeout(() => {
                            this.websocket()
                        }, 3000)
                    };
                    ws.onclose = (event) => {
                        console.log('已关闭连接:', event)
                        // if (wsTime) {
                        //    window.clearTimeout(wsTime)
                        //    wsTime = null
                        // }
                        // wsTime = window.setTimeout(() => {
                        //    this.websocket()
                        // }, 3000)
                    };
                } else {
                    console.log('浏览器不支持 WebSocket..')
                }
                // WebSocket end
            }
        }
    })
</script>

</html>

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

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

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

相关文章

  • 带有 Spring Boot 后端的 Vue.js 前端

    概述 在开始本教程中,先推荐1个SpringBoot+Vue前后端分离Java项目,本项目是一个大型互联网金融项目,采用Spring Boot , Dubbo 微服务的架构,包括多个独立的微服务,micr-common个公共服务,micr-web服务,micr-database数据库服务,micr-pay支付服务 ,micr-task定时任务。 前端技术栈:Vue,

    2024年02月11日
    浏览(41)
  • vue前端开发自学,异步加载组件,提升用户端的客户体验度

    vue前端开发自学,异步加载组件,提升用户端的客户体验度!现实项目开发时,组件的数量非常庞大,如果都是一口气加载完,对手机用户来说,体验度会很差。因此,非常有必要使用异步加载。 那就是,用到了哪个组件,再去加载它就行了。用不到的时候,不加载它。下面看

    2024年01月16日
    浏览(47)
  • Vue element-ui form 表单 前端提交和后端的接收

    一、前端 1、新建弹窗dialog 2、在数据(data)里面绑定(return)数据 3、在method里新建方法 二、后端 1、在配置好mybatis-plus的前提下 2、在控制类中添加方法 3、@RequestBody注解的使用 @requestBody注解的使用 - 西风恶 - 博客园 (cnblogs.com)

    2024年02月15日
    浏览(57)
  • 基于 Vue3 和 WebSocket 实现的简单网页聊天应用

    一个基于Vue3和WebSocket的简易网络聊天室项目,包括服务端和客户端部分。 项目地址 websocket-chat 下面是项目的主要组成部分和功能: 项目结构 功能特性 私聊功能:用户可以选择联系人进行一对一私聊,发送即时消息。 群聊功能:用户可以加入群组,与群组成员进行群聊。

    2024年02月03日
    浏览(55)
  • web网页端使用webSocket实现语音通话功能(SpringBoot+VUE)

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

    2024年02月02日
    浏览(123)
  • 前端实现websocket通信讲解(vue2框架)

    前言 :最近接到的需求是前端需要实现一个全局告警弹窗,如果使用ajax请求http接口只能用定时器定时去请求是否有告警,这样既消耗资源,又不能实时监测到告警信息。所以这个时候就可以采用websocket来实现通信,因为websocket不用请求一次才响应一次,它可以实现服务器主

    2024年02月12日
    浏览(37)
  • sanic 使用websocket与前端vue通信,持续发送信息

    由于sanic使用较少,很难获取到有效信息,而且对websocket也是挺“一窍不通”的,因此写一下总结。在使用过程中,对sanic注册websocket,还是使用socketio不清。前端vue是使用io,还是WebSocket还是VueSocketIO。 API:sanic.add_websocket_route是Sanic框架自带的一个方法,用于添加WebSocket路由

    2024年02月11日
    浏览(68)
  • Vue + Element UI 前端篇(十五):嵌套外部网页

    在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。 这个时候就要求我们的导航菜单能够解析嵌套网页的URL,并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。 实现原理 1. 给菜单URL添加嵌套网页

    2024年02月08日
    浏览(42)
  • docker实践教程,nginx中使用数据卷映射修改前端网页(一)

    小白专用docker教程,图文介绍要怎么在docker中使用nginx修改配置前端网页 Docker Hub (https://hub.docker.com) Docker 官网:https://www.docker.com 不懂docker的搭配菜鸟教程食用更佳,个人觉得菜鸟教程说得太简单了,看了还是云里雾里,只适合刚开始对docker有个基本了解,不适合实际应用,

    2024年04月16日
    浏览(37)
  • 十八、网页端在移动端的像素

    一、简介 -1. 在不同的屏幕,单位像素的大小是不同的,像素越小,屏幕越清晰。 手机端的像素就是宽度和高度,如iphone6 4.7寸 750 x 1334。 -2. 手机的像素点 远远小于 计算机的像素点。 问题:一个宽度为900px的网页在iphone6中要如何显示呢? 二、总结 默认情况下,移动端的网

    2024年02月16日
    浏览(35)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包