reghao
/
devops


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        a{
            color: #005980;
        }
        .widget-small{
            background-color: #FFFFFF;
            overflow: hidden;
            text-align: center;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .widget-small .fa{
            float: left;
            width: 40%;
            line-height: 80px;
            color: #FFFFFF;
        }
        .widget-user .fa{
            background-color: #029789;
        }
        .widget-visit .fa{
            background-color: #17a2b8;
        }
        .widget-message .fa{
            background-color: #fbad4c;
        }
        .widget-like .fa{
            background-color: #ff646d;
        }
        .widget-small-info{
            float: left;
            text-align: left;
            width: 40%;
            margin-left: 20px;
            margin-top: 18px;
            line-height: 24px;
        }
        .widget-small-info h4{
            font-size: 18px;
        }
        .widget-small-info span{
            font-size: 16px;
        }
        .project-introduce{
            min-height: 466px;
        }
        .project-introduce h4{
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 8px;
        }
        .project-introduce li{
            list-style: decimal;
            margin-left: 28px;
        }
        .alert {
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }
    </style>
</head>

<body class="timo-layout-page">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <form id="form2">
                    <div class="layui-form-item layui-form-text">
                        <textarea id="myTextarea" placeholder="实时同步" class="layui-textarea" name="text"></textarea>
                    </div>
                    <div class="layui-form-item timo-finally">
                        <button class="layui-btn button-submit2"><i class="fa fa-times-circle"></i> 清空</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <form id="form1">
                    <div class="layui-form-item layui-form-text">
                        <textarea id="myTextarea1" placeholder="请输入内容(enter 键发布, ctrl+enter 键换行)" class="layui-textarea" name="text"></textarea>
                    </div>
                    <div class="layui-form-item timo-finally">
                        <button class="layui-btn button-submit"><i class="fa fa-check-circle"></i> 发布</button>
                        <button class="layui-btn button-submit1"><i class="fa fa-times-circle"></i> 清空</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">
                <span><i class="fa fa-table"></i> 状态时间线</span>
            </div>
            <div class="layui-card-body">
                <ul class="flow-default layui-timeline" id="LAY_demo1" style="height: 500px;overflow: auto">
                    <!--<li id="li2" class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">v2.0.1</h3>
                            <p>
                                1.更新：重命名菜单类型为：目录、菜单、按钮. 重写Shiro“记住我”系列化数据，减少cookie体积<br>
                            </p>
                        </div>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/plugins/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/echarts-4.7.0/echarts.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    $(document).on("click", ".button-submit", function (e) {
        e.preventDefault();
        var form = $(this).parents("form");
        var url = form.attr("action");
        var serializeArray = form.serializeArray();
        var payload = serializeArray[0].value
        if (payload === '') {
            layer.msg('请输入内容', {offset: '15px', time: 5000, icon: 2});
            return
        }

        document.getElementById("form1").reset();
        var jsonData = {}
        jsonData.event = 'event_content'
        jsonData.payload = payload
        ws.send(JSON.stringify(jsonData))
    });
    $(document).on("click", ".button-submit1", function (e) {
        e.preventDefault();
        document.getElementById("form1").reset();
    });
    $(document).keypress(function(e) {
        if((e.which === 13 && e.ctrlKey) || (e.which === 10 && e.ctrlKey)){
            // 这里实现换行
            var content = $("#myTextarea1").val();
            $("#myTextarea1").val(content+"\n");
        }else if(e.which === 13){
            // 避免回车键换行
            e.preventDefault();

            var content = $("#myTextarea1").val();
            submitData(content)
        }
    });

    function submitData(content) {
        if (content === '') {
            layer.msg('请输入内容', {offset: '15px', time: 5000, icon: 2});
            return
        }

        document.getElementById("form1").reset();
        var jsonData = {}
        jsonData.event = 'event_content'
        jsonData.payload = content
        ws.send(JSON.stringify(jsonData))
    };

    document.getElementById("myTextarea").addEventListener("input", function() {
        const event = {}
        event.event = 'sync'
        event.payload = this.value
        ws.send(JSON.stringify(event))
    });
    $(document).on("click", ".button-submit2", function (e) {
        e.preventDefault();
        document.getElementById("form2").reset();
    });

    function add1(title, content) {
        var h3 = document.createElement("h3");
        h3.className = 'layui-timeline-title'
        h3.innerHTML = title

        var p = document.createElement("p");
        p.innerHTML = content

        var i = document.createElement("i");
        i.className = 'layui-icon layui-timeline-axis'
        i.innerHTML = '&#xe63f;'

        var div = document.createElement("div");
        div.className = 'layui-timeline-content layui-text'
        div.appendChild(h3)
        div.appendChild(p)

        var li = document.createElement("li");
        li.className = 'layui-timeline-item'
        li.appendChild(i)
        li.appendChild(div)

        var ul = document.getElementById("LAY_demo1");
        ul.prepend(li);
    }

    var connected = false
    var ws
    function initWebSocket() {
        if ("WebSocket" in window) {
            var host1 = window.location.host
            var url = 'wss://' + host1 + '/ws/message'
            ws = new WebSocket(url);
            ws.onopen = function() {
                connected = true
                // Web Socket 已连接上，使用 send() 方法发送数据
                console.log("websocket connected...");
            };
            ws.onclose = function() {
                connected = false
                console.log("websocket connection closed...");
                reconnect()
            };
            ws.onerror = function () {
                connected = false
                console.log("websocket connection error...");
                //reconnect()
            };
            ws.onmessage = function (evt) {
                var event = JSON.parse(evt.data)
                var eventType = event.event
                var title = new Date().getTime()
                add1(title, event.payload)
                //document.getElementById("myTextarea").value = evt.data
            }
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }
    function reconnect() {
        if (connected) return

        setTimeout(function () {
            console.log('websocket reconnecting...')
            initWebSocket()
        }, 5000)
    }
    initWebSocket()
</script>
</body>
</html>