<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>WebTerminal</title>
    <link rel="stylesheet" th:href="@{/css/xterm.css}"/>
</head>

<body>
<div id="terminal" style="width: 100%;height: 100%"></div>

<script type="text/javascript" th:src="@{/js/plugins/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/websocket.js}"></script>
<script type="text/javascript" th:src="@{/js/xterm.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var options = [[${sshConnData}]]
    openTerminal(options);
    function openTerminal(options){
        var client = new WebSocketClient();
        var term = new Terminal({
            cols: 80,
            rows: 30,
            cursorBlink: true, // 光标闪烁
            cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
            scrollback: 100, //回滚
            tabStopWidth: 8, //制表宽度
            screenKeys: true
        });

        term.on('data', function (data) {
            // 键盘输入时的回调函数
            client.sendClientData(data);
        });
        term.open(document.getElementById('terminal'));
        //在页面上显示连接中...
        term.write('Connecting...\n');
        //执行连接操作
        client.connect({
            onError: function (error) {
                // 连接失败回调
                console.log('WebSocket 连接错误...')
                term.write('Error: ' + error + '\r\n');
            },
            onConnect: function () {
                // 连接成功回调
                console.log('WebSocket 连接成功...')
                // 发送 SSH 连接数据
                client.sendInitData(options);
            },
            onClose: function () {
                // 连接关闭回调
                console.log('WebSocket 连接关闭...')
                term.write("\rconnection closed");
            },
            onData: function (data) {
                // 收到数据时回调
                console.log('接收到 WebSocket 的数据...')
                term.write(data);
            }
        });
    }
</script>
</body>
</html>