前端动态打印后台日志

前端动态打印后台日志

websocket获取后台日志

java WebSocket实现Java后台消息推送

<div id="pageFormContent"
  style="margin-top: 10px; max-height: 600px;height: 600px;overflow-y: auto; border-style: solid;background: #304156; border: 1px solid #2e2e2e; color:#dbdbdb;">
  <div id="spider-message" class="profile_title" style="padding-left: 5px" v-html="hello"></div>
</div>

const ws = new WebSocket('ws://' + url + ':8082/websocket/log')
ws.onopen = function() {
  // ws.send("发送数据")
  console.log('初始化完成!')
}
const that = this
ws.onmessage = function(evt) {
  console.log(evt.data)
  if (evt.data.indexOf('升级完成') > -1) {
    that.download()
  }
  that.hello += '<p>' + evt.data + '</p>'
  const $dom = document.getElementById('pageFormContent')
  $dom.scrollTop = $dom.scrollHeight
}
ws.onclose = function() {
  // 关闭 websocket
  console.log('连接已关闭...')
}

ajax定时发送请求获取日志

window.setTimeout(function () {},1000);

iframe动态打印parent.postMessage

postmessage解决iframe跨域嵌套，调用父页面方法【跨页面通信】

<style type="text/css">
.pageFormContent{
	margin-top: 10px; 
	max-height: 300px;
	height: 300px;
	overflow-y: auto; 
	border-style: solid;
	background: #1e1e1e; 
	border: 1px solid #2e2e2e; 
	color:#dbdbdb;
}

</style>

<div style="display: flex; ">
   <form id="upgradeForm" action="/dbscript/upgrade" type="post" target="spiderFrame">
       <button type="button" id="upgrade" style="width: 100px;font-size: 16px">打印日志</button>
   </form>
</div>
<div class="pageFormContent" id="pageFormContent" >
	<div id="spider-message" class="profile_title"></div>
</div>

<iframe src="" id="spiderFrame" name="spiderFrame" style="display: none"></iframe>

<script>
<!--接收从iframe子页面发送过来的信息-->
window.addEventListener('message', function(e) {
    if(e.data && ((typeof e.data) == 'string')) {
        printMessage(e.data);
    }
});
function printMessage(message){
    if(message == 'shutdown') {
        vue.download()
        return;
    }
    $("#spider-message").append("<p>" + message + "</p>");
    var $dom = document.getElementById("pageFormContent");
    $dom.scrollTop = $dom.scrollHeight;
}
$("#upgrade").click(function () {
    var $form = $("form#upgradeForm");
    $form.submit();
    $("#spider-message").append("<p> 程序正在初始化...</p>");
});
</script>

@RequestMapping("/upgrade")
public void upgrade(HttpServletResponse response) {
	response.setCharacterEncoding("UTF-8");
	String msg = "日志。。。。";
	msg.replace("\n", "<br/>");
	PrintWriter writer = response.getWriter();
	writer.print(String.format("<script>parent.postMessage(\"%s\", '*');</script>", msg));
    writer.flush();
}