@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>


</style>
<section class="content-header"></section>
<section class="content">
    <div class="container-fluid">
        <!-- SELECT2 EXAMPLE -->
        <div class="card card-default">
            <div class="card-header">
                <h3 class="card-title">终端</h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>

            <div class="card-body">

                <div id="terminal" style=""></div>

                <div class="clearfix">
                </div>
            </div>

        </div>
    </div>
    <!-- /.container-fluid -->

</section>
<link href="/adminlte/plugins/xterm/xterm.css" rel="stylesheet" />
<script src="/adminlte/plugins/xterm/xterm.js"></script><
<script src="/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>

<script>


    var term = new Terminal({
        cursorStyle: 'underline', //光标样式
        cursorBlink: true, // 光标闪烁
        convertEol: true, //启用时，光标将设置为下一行的开头
        disableStdin: false, //是否应禁用输入。
        theme: {
            //  foreground: 'yellow', //字体
            // background: '#060101', //背景色
            cursor: 'help',//设置光标
        }
    });

    // 获取窗口的宽度和高度。
    const width = window.innerWidth;
    const height = window.innerHeight;
    const columns = parseInt(width / 10);
    const rows = parseInt(height / 22);

    //cursorx 这个长度不能删除,用于ev.keyCode === 8
    var cursorx = 0;
    

    // 调整终端的尺寸。
    term.resize(columns, parseInt(height / 22));

    //回车输入的内容
    var curr_line = '';
    //历史内容
    var entries = [];
    var currPos = 0;
    var pos = 0;
    var connectionId = '';

    term.open(document.getElementById('terminal'));


    term.prompt = () => {
        term.write('\n\u001b[32m$ >\u001b[37m');
    };

    //通讯
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();


    //signalR接收消息
    connection.on("ReceiveMessage", function (msg) {
        term.write(msg.obj);
     
    });


    // 已建立连接
    connection.on("ConnectionId", function (msg) {
        //  term.write('Welcome to my Scheme web intepreter!\r\n123');
        //  term.prompt();
        connectionId = msg.obj;
        //创建 ssh 客户端
        connection.invoke('CreateConnectionAsync', width, height, columns, rows).then((result) => {

        });
    });





    // 监听后端终端关闭
    connection.on('WriteErrorAsync', () => {

        term.write('SessionClosed');
    });




    term.on('key', function (key, ev) {

     
        const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
        //const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
        if (cursorx == 0) {
            cursorx = term.buffer.cursorX;
        }
        if (ev.keyCode === 13) { // Enter key
            if (curr_line.replace(/^\s+|\s+$/g, '').length != 0) { // Check if string is all whitespace
                entries.push(curr_line);
                currPos = entries.length - 1;
                // term.prompt();


                connection.invoke('WriteLineAsync', curr_line).then((result) => {
                    if (result.code == 1) {
                    
                      //  term.write('\n' + result.obj);
                       // term.prompt();
                    }
                });


            } else {
                term.write('\n\33[2K\r\u001b[32m$ >\u001b[37m');
            }
            curr_line = '';
        } else if (ev.keyCode === 8) { // Backspace
            if (term.buffer.cursorX > cursorx) {
                curr_line = curr_line.slice(0, -1);
                term.write('\b \b');
            }
        } else if (ev.keyCode === 38) { // Up arrow
            if (entries.length > 0) {
                if (currPos > 0) {
                    currPos -= 1;
                }
                curr_line = entries[currPos];
                term.write('\33[2K\r\u001b[32m$ >\u001b[37m' + curr_line);
            }
        } else if (ev.keyCode === 40) { // Down arrow
            currPos += 1;
            if (currPos === entries.length || entries.length === 0) {
                currPos -= 1;
                curr_line = '';
                term.write('\33[2K\r\u001b[32m$ >\u001b[37m');
            } else {
                curr_line = entries[currPos];
                term.write('\33[2K\r\u001b[32m$ >\u001b[37m' + curr_line);

            }
        } else if (printable) {

            curr_line += key;
            term.write(key);
        }
    });

    //启动 SignalR 客户端
    connection.start();
</script>

