思路：最近在工作上，基於自己的興趣，和監控需要。
設計並實現了日誌監控工具，此工具，目的在與讓在生產環境中沒有服務器管理權限的開發人員，可以方便的訪問到服務器中應用產生的日誌和下載相關日誌文件。
解決的需求是：方便開發人員在微服務環境下進行調試。排查錯誤。特別是當服務器衆多的時候，實現分佈式管理服務器。
採用技術：SpringBoot，SpringWebStarter，redis，後端shell 命令。前端：layui，html，jQuery。前後端交互：Rest，WebSocket。
服務器之間使用redis進行通信。它們之間的通信，使用redis通信，主要是考慮端口開放申請麻煩。當然Agent之間的通信可以使用TCP和UDP進行通信。或其他註冊機制。
實現效果：
實現：
截圖：
技術難點：
layui彈出窗口，關閉時，同步關閉websocket。
websocket和服務器通信。
相關源碼：
log監控源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${logFile}</title>
<script th:src="@{/static/plugin/jQuery/jquery-2.2.3.min.js}"></script>
<script th:src="@{/static/plugin/bootstrap/js/bootstrap.min.js}"></script>
<link rel="stylesheet"
th:href="@{/static/plugin/bootstrap/css/bootstrap.min.css}" />
<link th:href="@{/static/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>
<div id="log-container"
style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
<div></div>
</div>
<div id="closeWS"></div>
</body>
<script>
var logWS = new WebSocket('ws://[[${server}]]/log');
logWS.onmessage = function(event) {
// 接收服務端的實時日誌並添加到HTML頁面中
var divo = $("#log-container div");
var text = divo.text;
if(text.length>5000){
divo.text(text.substring(5000));
}
divo.append(event.data);
var scrollHeight = divo.prop("scrollHeight");
divo.scrollTop($(document).height(),450);
}
$(window).scroll(function(){
var clientHeight = $(this).height();
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
if(scrollTop + clientHeight == scrollHeight){
alert("到底部了！");
}
});
logWS.onopen = function () {
logWS.send('[[${logFile}]]');
}
function close(){
logWS.close();
}
$(document).ready(function() {
});
</script>
</body>
</html>
這裏的難點就是close的方法的使用，在關閉layui彈出窗時如何關閉websocket。