模拟命令行的界面效果，使用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. Vue(三)--循环语句

    v-for: v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. demo1. <!DOCTYPE html&g ...

  2. tensorflow张量限幅

    本篇内容有clip_by_value.clip_by_norm.gradient clipping 1.tf.clip_by_value a = tf.range(10) print(a) # if ...

  3. 性能优化 && 用户体验

    性能优化 下拉菜单那种最好是点击时候请求,或者是查询时候请求 分页加载 用户体验 有加载.进度条.友好提示

  4. 使用IntersectionObserver制作滚动动画以及其他记录

    前言 最近在重做公司项目的主页,正好新来了个UI,整个都重新设计了一下,动画还挺多的.我之前没有怎么玩过这些,踩了挺多坑,最后找到了目前而言最合适的方法,现在做一个记录. 需要把原来的主页从项目中抽出 ...

  5. Grammar Framework 1

    Word is cheap, show me the grammar. Doc requirements:TODO 1. English doc 2. Mark the importance 语法框架 ...

  6. HashMap的一些学习

    1.equals和==的对比==用于比较引用和比较基本数据类型时具有不同的功能:A:比较基本数据类型,如果两个值相同,则结果为true而在比较引用时,如果引用指向内存中的同一对象,结果为true; e ...

  7. appium知识点

    1 appium元素获取技巧 # 就是页面滑动 driver.swipe(x1, y1, x1, y2, t) # 拿到所有跟元素有关的标签,其实是个列表 driver.find_elements_b ...

  8. vue项目常用方法封装，持续更新中。。。

    vue项目中可以直接使用 1.常用工具类untils.js中 /* * 验证手机号是否合格 * true--说明合格 */ export function isPhone(phoneStr){ let ...

  9. hdu 6182A Math Problem（快速幂）

    You are given a positive integer n, please count how many positive integers k satisfy kk≤nkk≤n.  Inp ...

  10. python语言基础3

    一:python函数 是组织好的,可重复使用的,用来实现单一,或相关联功能的代码块.以前使用过的一些Python提供的内建函数,如print().max(4,18).min(100,50).当然我们自 ...