<!DOCTYPE>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<head>
    <meta charset="UTF-8">
    <title>IMS实时日志</title>
    <script type="text/javascript" src="${static!}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${static!}/plugin/websocket/sockjs.min.js"></script>
    <script type="text/javascript" src="${static!}/plugin/websocket/stomp.min.js"></script>
</head>
<body>
<!-- 标题 -->
<h1 style="text-align: center;">实时日志</h1>

<!-- 显示区 -->
<div id="loggingText" contenteditable="true"
     style="width:100%;height: 600px;background-color: ghostwhite; overflow: auto;"></div>

<!-- 操作栏 -->
<div style="text-align: center;">
    <button onclick="$('#loggingText').text('')" style="color: green; height: 35px;">清屏</button>
    <button onclick="$('#loggingText').animate({scrollTop:$('#loggingText')[0].scrollHeight});"
            style="color: green; height: 35px;">滚动至底部
    </button>
    <button onclick="if(window.loggingAutoBottom){$(this).text('开启自动滚动');}else{$(this).text('关闭自动滚动');};window.loggingAutoBottom = !window.loggingAutoBottom"
            style="color: green; height: 35px; ">开启自动滚动
    </button>
    <button onclick="sendName()">
        发送消息
    </button>
</div>
</body>
<script>
    $(function () {
        connect();
    });
    /**
     * 建立连接
     */
    function connect() {
        var socket = new SockJS('${ctx!}/socket/connect');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            //setConnected(true);
            console.log('Connected: ' + frame);
            stompClient.subscribe('/socket/client/msg/${loginUser.roleId}', function (greeting) {
                console.log(greeting)
                //showGreeting(JSON.parse(greeting.body).content);
            });
        });
    }

    function disconnect() {
        if (stompClient !== null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendName() {
        stompClient.send("/socket/server/log/push/msg", {}, JSON.stringify({'name': "客户端发送"}));
    }
</script>
</html>