[HTML] websocket的模拟日志监控界面
2024-10-08 11:06:00
模拟命令行的界面效果,使用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>
最新文章
- Android入门(二十二)解析JSON
- phpcms2008 常用数组,变量整理
- poj: 3006
- ";奇葩家园“之genymotion工具篇
- jQuery-对Select的操作
- Android(java)学习笔记188:关于构造代码块,构造函数的一道面试题(华为面试题)
- CCI_chapter 1
- Linux解析内核源代码——传输控制块诞生
- Redis-位图法实现简单统计
- Google Closure Compiler高级压缩混淆Javascript代码
- 使用python实现测试工具(一)
- 解决element-ui upload组件报错 Avoid using non-primitive value as key, use string/number value instead
- A Plug for UNIX POJ - 1087(模板题 没啥好说的。。就用了一个map)
- 支持向量机SVM 参数选择
- Jsp基本语法 第二章
- tomcat运行监控脚本,自动启动
- FATAL ERROR: Could not find ./share/fill_help_tables.sql
- Java_得到GET和POST请求URL和参数列表
- 字符串";k:1“” 处理成字典 {&#39;k&#39;:1,&#39;k1&#39;:2....}
- 网络配置br0 brtcl