专栏首页陶士涵的菜地[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; 
    /*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> 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [前端]GOFLY项目-响应式登录页的设计和实现

    宽度一般都是按百分比设置,当页面中百分比也满足不了的时候,可以使用media query区分出当前屏幕的宽度

    陶士涵
  • [小程序]小程序框架的简单页面布局

    6.最下面的文字靠右,view相当于一个块元素,设定宽度后,text-align右对齐

    陶士涵
  • [android] 自定义广播事件

    上一节的短信拦截在4.0以上系统中无效,可以使用这种办法实现,定义一个activity,清单文件中指定主题为透明,在onCreate()方法里面直接调用fins...

    陶士涵
  • 带新手玩转MVC——不讲道理就是干(上)

    前言:这几天更新了几篇博客,都是关于Servlet、JSP的理解,后来又写了两种Web开发模式,发现阅读量还可以,说明JSP还是受关注的,之前有朋友评论说JSP...

    泰斗贤若如
  • HTML+CSS提升小实战

    1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; ch...

    别先生
  • 小程序左右标签滑块排行榜

    达达前端
  • HTML第五课——css盒子模型【2】

    用户2149234
  • 自定义菜单的实现

    针对Girdlayout 可以调用refreshGridItem来动态添加 GirdLayout 的内容。

    用户4458175
  • vue 手写一个时间选择器

    最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件。

    小皮咖
  • CSS画图

    参考资料:https://www.cnblogs.com/wangjiachen666/p/9462837.html

    CherishTheYouth

扫码关注云+社区

领取腾讯云代金券