思路：最近在工作上，基于自己的兴趣，和监控需要。
设计并实现了日志监控工具，此工具，目的在与让在生产环境中没有服务器管理权限的开发人员，可以方便的访问到服务器中应用产生的日志和下载相关日志文件。
解决的需求是：方便开发人员在微服务环境下进行调试。排查错误。特别是当服务器众多的时候，实现分布式管理服务器。
采用技术：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。
1719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
