模拟命令行的界面效果，使用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. 论文阅读笔记（十六）【AAAI2018】：Region-Based Quality Estimation Network for Large-Scale Person Re-Identification

    Introduction (1)Motivation: 当前的行人重识别方法都只能在标准的数据集上取得好的效果,但当行人被遮挡或者肢体移动时,往往效果不佳. (2)Contribution: ① 提出 ...

  2. bootstrap 兼容 IE8

    在 html 中引用 <!-- bootstrap 兼容 IE8 --> <script src="../../jsapi/js/html5shiv.min.js" ...

  3. Centos 7 firewall的防火墙的规则

    这是官方文档: http://www.firewalld.org/documentation/man-pages/firewall-cmd.html 想使用iptables的规则,firewall也可 ...

  4. 使用Python库paramiko登录远程设备

    前言 手动下载paramiko库的安装包.在PyPi库中查找即可,但是不到是我的电脑问题还是网络问题,2.0.0以上版本我都安装不了,因此我自己是安装的paramiko 1.17.0版本,此版本经过测 ...

  5. node--处理一个增加上传操作和渲染页数条

    一段学习的结束 我也不知道我这是在写些什么,只是觉得学完了一些东西,就是想把它记录 一下,这样我就可以知道我是学过这一块的,要多激励自己,^^O(∩∩)O哈哈~ 以下内容并不完全与标题匹配,不过以下内 ...

  6. Ubuntu在当前用户目录下安装python 包

    对于tar.gz文件: tar -zxvf setuptools-19.6.tar.gz cd setuptools-19.6.tar.gz python3 setup.py build python ...

  7. 错误 CS8107 C# 7.0 中不支持功能“xxxxxx”。请使用 7.1 或更高的语言版本。

    解决方法:项目右键属性 —> 生成 —> 找到最下面的高级按钮,点击高级按钮 —> 常规 —> 语言版本 —> 选择 C#最新次要版本,或者比当前版本更高的版本即可,点击 ...

  8. 论文阅读笔记（十三）【arxiv2018】：Revisiting Temporal Modeling for Video-based Person ReID

    Introduction (1)Motivation: 当前的一些video-based reid方法在特征提取.损失函数方面不统一,无法客观比较效果.本文作者将特征提取和损失函数固定,对当前较新的4 ...

  9. pip 更换镜像源

    国内的pip源 阿里云:https://mirrors.aliyun.com/pypi/simple/ 清华:https://pypi.tuna.tsinghua.edu.cn/simple 中国科技 ...

  10. 自动生成admin（后台）

    public --->>>>index.php 入口文件如下: // +---------------------------------------------------- ...