模拟命令行的界面效果，使用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. JavaScript-跨浏览器事件处理程序（EventUtil）

    事件操作对象: var EventUtil= { //添加事件 addHandler: function (element, type, handler) { if (element.addEvent ...

  2. 没有胆量，有天赋也是白费。Without guts,talent is wasted.

    没有胆量,有天赋也是白费. Without guts,talent is wasted.

  3. 在Ubuntu中建立软连接

    使用ln 命令 今天发现我的python3命令没了,出现了以下提示: /usr/bin/python3: bad interpreter: No such file or directory 查找原因 ...

  4. 如果在vscode 中用运行快捷键（Ctrl+Alt+N）出现中文的乱码

    在VSCODE中,运行代码的快捷方式是Ctrl+Alt+N,终止 代码运行的方式是Ctrl+Alt+M,但是有时候会出现汉字的乱码,这种情况并不是代码有问题,只要在terminal 中运行代码就可以了 ...

  5. FHQTreap刷题记录

    分裂:如图,按值分裂,u比k大则切黄色的一

  6. vue 脚手架使用路由

    概念: 后端路由: 后端处理URL和页面之间的映射关系 前端发展阶段: 1.后端渲染阶段(以jsp,php为代表,其特点为html代码和后端语言代码混写在一起 2.前后端分离阶段(随着ajax的兴起, ...

  7. C++->List的使用注释

    List容器的应用: //----------单链队列-------队列的链式存储结构--------------- typedef struct QNode{                     ...

  8. unity中ContentSizeFitter刷新不及时的问题

    ContentSizeFitter,自适应宽高脚本要在下一帧的时候才会适应宽高.如果想立即生效,可以调用 LayoutRebuilder.ForceRebuildLayoutImmediate(rec ...

  9. 【Unity|C#】基础篇(14)——预处理指令（#）

    [学习资料] <C#图解教程>(第23章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...

  10. 关于Euler-Poisson积分的几种解法

    来源:https://www.cnblogs.com/Renascence-5/p/5432211.html 方法1:因为积分值只与被积函数和积分域有关,与积分变量无关,所以\[I^{2}=\left ...