前端动态打印后台日志
websocket获取后台日志
<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();
}