模拟命令行的界面效果，使用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>

[HTML] websocket的模拟日志监控界面的更多相关文章

  1. 总结2015搭建日志,监控,ci,前端路由,数据平台，画的图与界面 - hugo - ITeye技术网站

    总结2015搭建日志,监控,ci,前端路由,数据平台,画的图与界面 - hugo - ITeye技术网站 极分享:高质分享+专业互助=没有难做的软件+没有不得已的加班 极分享:高质分享+专业互助=没有 ...

  2. Logstash实践: 分布式系统的日志监控

    文/赵杰 2015.11.04 1. 前言 服务端日志你有多重视? 我们没有日志 有日志,但基本不去控制需要输出的内容 经常微调日志,只输出我们想看和有用的 经常监控日志,一方面帮助日志微调,一方面及 ...

  3. ElasticSearch实战－日志监控平台

    1.概述 在项目业务倍增的情况下,查询效率受到影响,这里我们经过讨论,引进了分布式搜索套件——ElasticSearch,通过分布式搜索来解决当下业务上存在的问题.下面给大家列出今天分析的目录: El ...

  4. 微服务日志监控与查询logstash + kafka + elasticsearch

    使用 logstash + kafka + elasticsearch 实现日志监控 https://blog.csdn.net/github_39939645/article/details/788 ...

  5. 前端异常日志监控 - 使用Sentry

    背景 现在的前端项目越来越复杂,在不同的客户端会产生各种在开发人员机器上不会出现的问题.当用户报告一个问题给开发人员的时候,开发人员无法直接定位问题.在此前,听过一次鹅厂的前端人员,他们对QQ里面的网 ...

  6. Sentry错误日志监控你会用了吗？

    无论作为新手还是老手程序员在程序的开发过程中,代码运行时难免会抛出异常,而且项目在部署到测试.生产环境后,我们便不可能像在开发时那样容易的及时发现处理错误了.一般我们都是在错误发生一段时间后,错误信息 ...

  7. 运维开发实践——基于Sentry搭建错误日志监控系统

    错误日志监控也可称为业务逻辑监控, 旨在对业务系统运行过程中产生的错误日志进行收集归纳和监控告警.似乎有那么点曾相识?没错... 就是提到的“APM应用性能监控”.但它又与APM不同,APM系统主要注 ...

  8. [Asp.net]SignalR实现实时日志监控

    摘要 昨天吃饭的时候,突然想起来一个好玩的事,如果能有个页面可以实时的监控网站或者其他类型的程序的日志,其实也不错.当然,网上也有很多成熟的类似的监控系统.就想着如果通过.net该如何实现?所以就在想 ...

  9. MySQL慢日志监控脚本实例剖析

    公司线上的 MySQL 慢日志,之前一直没有做好监控.趁着上周空闲,我就把监控脚本写了下,今天特地把代码发出来与51博友分享一下. 针对脚本的注解和整体构思,我会放到脚本之后为大家详解. 1 2 3 ...

随机推荐

  1. Uva12034 （组合数取模）

    题意:两匹马比赛有三种比赛结果,n匹马比赛的所有可能结果总数 解法: 设答案是f[n],则假设第一名有i个人,有C(n,i)种可能,接下来还有f(n-i)种可能性,因此答案为 ΣC(n,i)f(n-i ...

  2. Anroid Studio 教程干货

    常见设置 a)在Setting中,修改主题.修改工程目录的字体大小.  b)在Setting中,显示行号:  c)设置注释模板,File–>Other Setting –> Default ...

  3. Miller_Rabin()算法素数判定 +ollard_rho 算法进行质因数分解

    //****************************************************************// Miller_Rabin 算法进行素数测试//速度快,而且可以 ...

  4. sql注入常见绕过技巧

    参考链接:https://blog.csdn.net/huanghelouzi/article/details/82995313 https://www.cnblogs.com/vincy99/p/9 ...

  5. 使用mininet创建网络拓扑，使ryu、ovs、主机连接

    实验拓扑 控制器:RYU 交换机:s1,s2 主机:h1,h2,h3,h3 联通性(直连): h1<->s1;h2<->s1 h3<->s2;h4<-> ...

  6. SpringMVC简单小结

    一.MVC的的大概解释: MVC的核心思想是业务数据抽取和业务数据呈现相分离. MVC:M(Model)+V(View)+C(Controller) M(模型层):业务数据的信息表示,通常是业务实体 ...

  7. 生产环境容器落地最佳实践 --JFrog 内部K8s落地旅程

    引言 Kubernetes已经成为市场上事实上领先的编配工具,不仅对技术公司如此,对所有公司都是如此,因为它允许您快速且可预测地部署应用程序.动态地伸缩应用程序.无缝地推出新特性,同时有效地利用硬件资 ...

  8. 重新机兵回归(MMR)

    重新机兵回归记录 S/L法 Save / Load 法 . 在关键战斗前,先save一把 , 在结算奖励后如果奖励不好 , 再重新load再来过 . 比如说拿红牡丹等 . 还可以在逃跑时用此法 . 随 ...

  9. kuangbin专题专题十一 网络流 Minimum Cost POJ - 2516

    题目链接:https://vjudge.net/problem/POJ-2516 思路:对于每种商品跑最小费用最大流,如果所有商品和人一起建图跑,O(v^2*m)数量级太大,会超时. 把店里的商品拆点 ...

  10. fastadmin中curd生成的表单将数字展示为文字

    1.在require-table.js文件中找到formatter 在status中将下列参数自行替换为你的表达方式 var custom = {2: 'success', 3: 'danger', ...