HTML怎么实现websocket的模拟日志监控界面
短信预约 -IT技能 免费直播动态提醒
本篇内容介绍了“HTML怎么实现websocket的模拟日志监控界面”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
[HTML] websocket的模拟日志监控界面
模拟命令行的界面效果，使用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;
width:100%;
}
</style>
<script class="lazy" data-src="reconnecting-websocket.min.js"></script>
<script class="lazy" data-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>“HTML怎么实现websocket的模拟日志监控界面”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
