模拟命令行的界面效果，使用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. Java 日期格式化，Java 日期工具类，Java Date工具类

    ================================ ©Copyright 蕃薯耀 2020-01-19 https://www.cnblogs.com/fanshuyao/ import ...

  2. C# 图片转为Base64

    /// <summary> /// 图片转Base64 /// </summary> /// <param name="ImageFileName"& ...

  3. python全栈学习 day02

    pycharm 安装设置: 按照百度百科或者官网介绍下载,安装. 激活步骤 1:改host 2.输入激活信息,注意有效期. python 逻辑运算符://返回的均为bool值 与 and A and ...

  4. thinkphp5.0将数据指模板中

    在控制器中写: public function index(){ $username = \think\Db::table('navigation')->where(array("Vi ...

  5. 【巨杉数据库SequoiaDB】巨杉数据库无人值守智能自动化测试实践

    刚刚过去的春节,新型冠状病毒疫情突如其来地横扫大江南北.为了响应国家号召,许多软件公司和互联网公司也将在较长一段时间内建议员工采取远程办公的方式,同时也存在骨干工程师无法及时返岗的问题,使得生产力大受 ...

  6. 安装Flink集群

    1.Windows安装 https://blog.csdn.net/clj198606061111/article/details/99694033 2.Linux安装 https://blog.cs ...

  7. LVM实现将2块磁盘总空间“合二为一”并挂载到同一目录

    需求场景 将MySQL主机的2块18T的数据盘空间全部"合并"后挂载到/mysql_data目录下,要求文件系统格式化为xfs:已有关键信息梳理如下: 需要挂载的数据盘 /dev/ ...

  8. Dubbo-服务注册中心之AbstractRegistry

    在dubbo中,关于注册中心Registry的有关实现封装在了dubbo-registry模块中.提供者(Provider)个消费者(Consumer)都是通过注册中心进行资源的调度.当服务启动时,p ...

  9. Dubbo之服务注册

    在上一篇文章Dubbo之服务暴露分析中介绍了当远程暴露时,如果有注册中心,需要在服务暴露后再将服务注册到注册中心.该篇将介绍该功能的有关步骤. 注册的起点 在RegistryProtocol.expo ...

  10. Python入门常识【入门必学】

         直接上内容:   print print 隔行 / 连续 / 间隔输出 print(a) == print(a,end='\n') print(a, end='') print(a, end ...