[HTML] websocket的模拟日志监控界面
程序员文章站
2022-03-07 15:34:36
模拟命令行的界面效果，使用swoole作为websocket的服务，重新做了下html的界面效果 ......
模拟命令行的界面效果，使用swoole作为websocket的服务，重新做了下html的界面效果
<html>
<head>
<title>swlog montior-菜地</title>
</head>
<style>
@charset "utf-8";
body {
background-color:#000;
margin:0px;
padding:0px;
color:rgb(0,198,83);
font:"微软雅黑";
font-size:14px;
}
.window {
border:2px #ccc outset;
width:1200px;
height:450px;
background-color:rgb(20,23,41);
margin: 10px auto;
overflow:hidden;
}
.title {
background-color:#fff;
padding:2px;
color: #000;
}
#text {
background-color:rgb(20,23,41);
border-top:#ccc outset 2px;
height:420px;
overflow-y:scroll;
padding:5px;
}
ul {
margin:0px;
padding:0px;
list-style:none;}
input {
background-color:#000;
border:0;
color:#fff;
outline:none;
/*font-size:12px;*/
width:100%;
}
</style>
<script src="reconnecting-websocket.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script>
$(document).ready(function(){
var wsuri = "ws://192.168.1.102:9501";
var sock = new reconnectingwebsocket(wsuri);
sock.debug = true;
sock.timeoutinterval = 5400;
//建立连接后触发
sock.onopen = function() {
console.log(" 建立连接后触发 connected to " + wsuri);
$("ul").append("<li>connected to "+wsuri+" success</li>");
}
// 关闭连接时候触发
sock.onclose = function(e) {
console.log("关闭连接时候触发 connection closed (" + e.code + ")");
$("ul").append("<li>disconnected to "+wsuri+"...</li>");
}
// 收到消息后触发
sock.onmessage = function(e) {
console.log("收到消息后触发 message received: " + e.data);
$("ul").append("<li>"+e.data+"</li>");
var scrollheight = $('#text').prop("scrollheight");
$('#text').scrolltop(scrollheight,420);
}
//发生错误的时候触发
sock.onerror=function (e) {
console.log("发生错误时候触发"+wsuri);
$("ul").append("<li>connected to "+wsuri+" failed</li>");
var scrollheight = $('#text').prop("scrollheight");
$('#text').scrolltop(scrollheight,420);
}
$(document).keyup(function(event){
if(event.keycode ==13){
$("ul").append("<li>.</li>");
var scrollheight = $('#text').prop("scrollheight");
$('#text').scrolltop(scrollheight,420);
}
});
});
</script>
</head>
<body>
<div class="window">
<div class="title">
<span>swlog montior</span>
</div>
<div id="text">
<ul>
<li>welcome...</li>
</ul>
</div>
</div>
</body>
</html>
下一篇： Vue起步(无cli)的啊教程详解